Effective Typescript - 13 - 타입과 인터페이스의 차이점 이해하기

타입스크립트에서 이름있는 타입을 정의하는 방법은 'type'키워드 이용한 타입 정의와 'inferface'키워드를 이용한 타입 정의 방식이 있다.

 

A. type 선언(type allias) 방식과 interface 선언 방식의 유사한점

  a. 리터럴로 할당시 잉여 속성에 대한 체크를 지원한다. ( 11 섹션에서 나온 내용임 )

  b. 인덱스 시그니처 사용 가능.

  c. 함수의 타입도 정의가능.

  d. 제네릭 사용 가능.

  e. 확장. 인터페이스는 타입을 확장 가능. 타입은 인터페이스를 확장 가능.

// 타입 엘리어스 선언 type THuman = {     name : string;     age : number; } // 인터페이스 선언 interface IHuman{     name : string;     age : number; } //유사점 1. 리터럴 할당시 잉여속성 할당에 대한 제한 상황 const jason: THuman = { name: 'Jason', age: 18, has_job: false}; // 리터럴로 할당시 잉여 속성 할당에 대한 경고가 나타남 const benson: THuman = { name: 'Benson', age: 18, has_job: true}; // 리터럴로 할당시 잉여 속성 할당에 대한 경고가 나타남 //유사점 2. 인덱스 시그니처 사용가능 // 타입 엘리어스 선언 type ThumanAccount = {     name : string;     age : number;     [key: number]: number } // 인터페이스 선언 interface IhumanAccount{     name : string;     age : number;     [key: number]: number } //유사점 3. 함수타입 선언 가능 type Tcalc = (a:number, b:number) => number; interface Icalc{     (a:number, b:number): number } //유사점 4. 제너릭 사용 가능 type TDatePair<T> = {     a: T;     b: T; } interface IDataPair<T>{     a:T;     b:T; } //유사점 5. 타입 확장. //인터페이스는 타입을 확장 할 수있다. interface IHumanWrap extends THuman{     height : number; } //타입은 인터페이스를 확장할 수 있다. type THumanWrap = IHuman & {height : number}

 

B. 타입 선언과 인터페이스 선언의 차이점.

  a. 유니온 타입은 존재할 수 있지만, 유니온 인터페이스라는 개념은 없다.

type numberOrStr = number | string;

  b. 인터페이스는 타입에서는 없는 '보강(augment)' 라는 기능을 사용할 수 있다. (선언 병합)

interface Person{     name: string; } // 같은 인터페이스를 한번더 선언하는 것이 특징이다. interface Person {     age: number;     dead?: boolean; } // 보강된 인터페이스 타입에 리터럴을 할당한다. const john: Person = {     name : 'John',     age: 33 }

 

결론:

복잡한 타입의 선언이 필요할때 Type allias 방식을 이용한 정의가 일반적으로 유리하다.

간단한 객체 타입 선언이 필요하다면 '보강' 이라는 기능이 필요하다고 생각 되면 인터페이스로 정의하는 유리하다.

인터페이스 선언의 사용 상황과, 타입 선언의 사용 상황이 각각 일관성이 유지되는 것이 무엇보다 중요하다.