타입스크립트(TypeScript) - 인터페이스(interface) & 클래스(class) 공부내용 정리

출처 : 구글이미지

타입스크립트의 클래스 기능들은 대부분은 C#에서 빌려왔다. 프로퍼티 초기자, 다형성, 인터페이스, 한정자 등등을 지원한다. 반명세 자바스크립트에는 없지만 타입스크립트의 고유 기능으로 접근자, 인터페이스, 제네릭이 있고, 컴파일 떄만 존재하고 자바스크립트로 컴파일 할때는 아무 코드도 생성하지 않는다.

---

01. 접근 한정자(public, protected, private)

 타입스크립트는 클래스의 프로퍼티와 메서드에 세 가지 접근 한정자를 제공한다.

- public: 어디에서나 접근할 수 있다.

- protected: 해당 클래스와 서브클래스의 인스턴스에만 접근할 수 있다.

- private: 해당 클래스의 인스턴스에만 접근할 수 있다.  

type Category = 'Outer' | 'Top' | 'Bottom' | 'Shoes' | 'Acc';
type Week = 'Sun' | 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' | 'Sat';
type Object = 'School' | 'Work' | 'Gym' | 'Home';

class DailyLook {
    constructor(
        private readonly object: Object,
        protected week: Week,
        public category: Category
    ) {}
}

let a = new DailyLook('School', 'Mon', 'Outer');
// a.object = 'Work' => Error!
// a.week = 'Fri' => Error!
a.category = 'Acc'

 object의 경우에는 private으로 설정이 되어 있기 때문에 인스턴스를 통해 접근이 불가능하고 추가적으로 readonly 떄문에 최초에서 값을 할당한 다음에는 더 이상 값을 덮어 씌울 수 없기에 에러가 발생한다. week는 protected가 되어있고, 이 경우에도  클래스 인스턴스를 통해 외부에서는 접근이 불가능하다.

 추가적으로 abstract를 class앞에 사용하면 사용자가 해당 class를 직접 생성하지 못하게 막고, 상속받은 클래스로만 인스턴스화 할 수 있도록 허용할 수 있다.

---

02 인터페이스 

 클래스는 인터페이스를 통해 사용할 때가 많다. 타입 별칭 처럼 인터페이스도 타입에 이름을 지어주는 수단이다. 타입별칭과 매우 유사하지만 차이점이 있다.

type Human = {
  name: string,
  age: number
}

type Worker = Human & {
  position: string
}

interface Human {
  name: string,
  age: number
}

interface Worker extends Human {
  position: string
}

위의 코드를 보면 상당히 유사한 것을 알 수 있다. 그럼 차이점은 무엇일까?

👆🏻첫번째 차이점은 이름과 범위가 같은 인터페이스가 여러개 있으면 합쳐진다. 타입스크립트의 기능으로 선언 합침(declaration merging)이라고 한다.말로는 이해하기 어렵기 떄문에 코드를 작성하면 다음과 같다.

interface Menu {
  name: string,
};

interface Menu {
  price: number,
};

let noodle: Menu = {
  name: '칼국수',
  price: 4_000,
};

✌🏻두번째 차이점은 상속을 받는 인터페이스 타입이 상위 인터페이스를 할당할 수 있는지 체크를 한다.

interface Menu {
  name: string,
  prcie : number,
  introduce(x: string): string
}

interface FancyMenu extends Menu {
  name: string,
  price: number,
  introduce(x: number): string
}

// Interface 'FancyMenu' incorrectly extends interface 'Menu'.
// Types of property 'introduce' are incompatible.
// Type '(x: number) => string' is not assignable to type '(x: string) => string'.
// Types of parameters 'x' and 'x' are incompatible.
// Type 'string' is not assignable to type 'number'.

introduce에 변수를 number로 할당할 수 없다고 아주 친절히 설명해주고 있다.

🤟🏻세번째는 타입별칭의 경우에는 & 또는 | 등의 연사자를 포함한 모든 타입을 사용할 수 있다. 

type num = number;
type NewNum = number | string;

위의 코드는 인터페이스로는 작성할 수 없다.