본문 바로가기
프론트엔드/TypeScript

type alias 와 interface

by step 1 2021. 6. 19.
반응형

type alias

: 어떤 타입을 부르는 이름

interface

: 어떤 새로운 타입을 만들어 내는 것

 

함수를 선언할 때 차이

// function
// type alias
type EatType = (food: string) => void;

// interface
interface IEat {
  (food: string): void;
}

 

배열을 선언할 때 차이

// array
// type alias
type PersonList = string[];

// interface
interface IPersonList {
  [index: number]: string;
}

 

interscection을 선언 할 때 차이

interscection: 여러 타입을 합쳐서 사용하는 타입

interface ErrorHandling {
  success: boolean;
  error?: {message: string};
}

interface ArtistsData {
  artists: {name: string}[];
}

// type allas
type ArtistsResponseType = ArtistsData & ErrorHandling;

// interface
interface IArtistsResponse extends ArtistsData, ErrorHandling{}

let art: ArtistsResponseType;
let iar: IArtistsResponse;

union을 사용할 때 차이

type alias는 사용가능 하지만 interface는 사용 불가능

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

// type alias에서는 union하기 편함
type PetType = Bird | Fish;

// 인터페이스에서는 union 하기 힘들다.
// 에러 발생
interface IPet extends PetType {};
// 에러 발생
class Pet implements PetType {};

 

Declaration Merging - 인터페이스에만 있는 기능

같은이름의 인터페이스를 생성하여 기능을 확장하여 사용할 수 있다.

// Declaration Merging - 인터페이스에만 있는 기능
// 같은 이름의 인터페이스를 선언 (기능을 확장할때 주로 사용)
interface MergingInterface {
  a: string;
}

interface MergingInterface {
  b: string;
}

let mi: MergingInterface;

반응형