Front/TypeScript

타입 별칭, this, 오버로딩, 클래스

oodada 2024. 7. 18. 22:02

타입 별칭 (Type Aliases)

타입 별칭은 새로운 타입을 정의하는 용도로 사용됩니다. 타입 별칭은 기존 타입을 참조하여 새로운 타입을 정의할 수 있습니다.

type User =
    | {
          name: string;
          age: number;
          role: boolean;
      }
    | [string, number, boolean];

const user1: User = {
    name: '김가을',
    age: 2,
    role: false,
};

const user2: User = ['김겨울', 22, true];

명시적 this

인터페이스를 사용하여 클래스의 메서드 체이닝을 구현할 수 있습니다. 이때 인터페이스에 명시적 this를 사용하여 메서드 체이닝을 구현할 수 있습니다.

interface Cat {
    name: string;
    age: number;
}

const cat: Cat = {
    name: '김가을',
    age: 2,
};

// 문법: this: Type
function setName(this: Cat, name: string) {
    console.log(`이름을 변경합니다: ${this.name} -> ${name}`);
    // 일반 함수에서의 this는 호출 시점에 결정된다.
    // setName 함수를 호출할 때 this는 cat 객체를 가리킨다.
    // setName 함수 내부에서 this는 cat 객체를 가리키므로 cat 객체의 name 프로퍼티를 변경할 수 있다.
    // any 타입을 사용하지 않고 명시적으로 this를 지정하여 타입 안정성을 확보할 수 있다.
    // Cat interface를 사용하여 this가 Cat 타입임을 명시적으로 지정한다.
}

setName.call(cat, '김겨울');
// call 메서드를 사용하여 setName 함수를 호출할 때 this를 cat 객체로 지정한다.
// setName 함수를 cat 객체의 메서드로 호출할 수 있다.

오버로딩 (Overloading)

오버로딩은 함수의 이름은 같지만 매개변수의 타입 또는 개수가 다른 여러 함수를 정의하는 방법입니다.

function add1(a: number, b: number) {
    return a + b;
}

function add2(a: string, b: string) {
    return a + b;
}

add1(1, 2); // 3
add2('겨울이', ' 바보'); // 'helloworld'
add1(1, '겨울이'); // 오류 발생
add2(1, 2); // 오류 발생
function add(a: number, b: number): number; // 타입 선언
function add(a: string, b: string): string; // 타입 선언
// 함수 구현
function add(a: any, b: any) {
    return a + b;
}

add(1, 2); // 3
add('가을이', ' 바보');
add(1, ' 바보'); // 2가지 중 하나의 타입만 사용할 수 있다.

클래스

접근 제한자 (Access Modifiers)

접근 제한자는 클래스의 멤버에 접근할 수 있는 범위를 지정하는 용도로 사용됩니다. 접근 제한자는 public, protected, private 키워드로 지정할 수 있습니다.

  • public: 외부에서 접근 가능, 클래스 바디에서 생략 가능
  • protected: 상속받은 클래스에서 접근 가능
  • private: 클래스 내부에서만 접근 가능 (비공개)
class Animal {
    // 속성 타입 지정
    public name: string = ''; // 외부에서 접근 가능
    protected age: number = 0; // 상속받은 클래스에서 접근 가능
    private weight: number = 0; // 클래스 내부에서만 접근 가능

    constructor(name: string, age: number, weight: number) {
        this.name = name;
        this.age = age;
        this.weight = weight;
    }
    // 메서드에 public을 붙이면 외부에서 접근 가능
    public print() {
        console.log(`이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`);
    }
}

class Cat extends Animal {
    print() {
        console.log(`${this.name}은 ${this.age}살이고, 몸무게는 ${this.weight}kg입니다.`);
    }
}

const cat = new Animal('김겨울', 2, 3);
cat.print(); // '이름: 김겨울, 나이: 2, 몸무게: 3'

const cat2 = new Cat('김가을', 3, 6);
cat2.print(); // '김가을은 3살입니다.'

console.log(cat.name); // '김겨울'
console.log(cat.age); // 상속받은 클래스에서 접근 가능
console.log(cat.weight); // 클래스 내부에서만 접근 가능

각각의 속성과 constructor의 매개변수가 동일한 이름을 가지고 있을 때는 생성자의 매개변수에 접근 제한자를 붙여서 속성을 선언할 수 있습니다.

class Animal {
    constructor(
        public name: string = '',
        protected age: number = 0,
        private weight: number = 0,
    ) {}

    public print() {
        console.log(`이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`);
    }
}

class Cat extends Animal {
    print() {
        console.log(`${this.name}은 ${this.age}살이고, 몸무게는 ${this.weight}kg입니다.`);
    }
}

const cat = new Animal('김겨울', 2, 3);
cat.print(); // '이름: 김겨울, 나이: 2, 몸무게: 3'

const cat2 = new Cat('김가을', 3, 6);
cat2.print(); // '김가을은 3살입니다.'

console.log(cat.name); // '김겨울'
console.log(cat.age); // 상속받은 클래스에서 접근 가능
console.log(cat.weight); // 클래스 내부에서만 접근 가능

'Front > TypeScript' 카테고리의 다른 글

타입 가져오기, 내보내기  (0) 2024.07.18
타입 제너릭  (0) 2024.07.18
타입 인터페이스 (Interface)  (0) 2024.07.18
타입 추론, 할당, 단언, 가드  (0) 2024.07.18
타입 종류 (TypeScript Types)  (0) 2024.07.18
티스토리 친구하기