[TypeScript/타입스크립트] 인터페이스와 타입 별칭

Interface

여러가지 타입의 프로퍼티를 갖는 변수에 대해, 각 프로퍼티의 타입을 미리 정의하는 것이다. 

주로 객체의 타입을 설정할 때 사용한다. 

 

const obj: {
  name: string;
  id: number;
  age: number;
  flag: boolean;
} = {
  name: 'p1su',
  id: 1,
  age: 25,
  flag: true,
};

obj 라는 객체를 생성할 때 다음과 같이 모든 프로퍼티의 타입을 일일이 설정해주었다. 

이를 인터페이스를 통하여 관리할 수 있다.

 

interface User {
  name: string;
  id: number;
  age: number;
  flag: boolean;
}

const obj: User = {
  name: 'p1su',
  id: 1,
  age: 25,
  flag: true,
};

const foo: User = {
  name: 'si1',
  id: 2,
  age: 24,
  flag: false,
};

obj에서 각 프로퍼티들이 갖는 타입을 User 라는 interface 로 정의하였다. 

이제 User 하나의 타입이고, 해당 타입을 갖는 프로퍼티들을 지닌 객체를 생성할 수 있다.

 

인터페이스는 타입을 정의할 뿐이지, 직접 인스턴스를 생성할 수는 없다. 

 

Interface의 상속

클래스처럼 상속이 가능하다. 

interface User {
  name: string;
  id: number;
  age: number;
  flag: boolean;
}

interface PrivateUser extends User {
  private: boolean;
}

const obj: User = {
  name: 'p1su',
  id: 1,
  age: 25,
  flag: true,
};

const foo: PrivateUser = {
  name: 'si1',
  id: 2,
  age: 24,
  flag: false,
  private: true,
};

 

타입 별칭

type 키워드를 통해 타입을 직접 정의할 수 있다. 

type NameList = string[];

const names: NameList = [
  'foo',
  'bar',
  'baz',
];

 

type Func = (num: number) => number;

const add: Func = (a) => {
  return a + 1;
};

함수의 타입 역시 지정할 수 있다. 

 

타입 상속

& 기호를 이용해서 타입을 상속할 수 있다. 

type User = {
  name: string;
  age: number;
};

type PrivateUser = User & {
  id: number;
};

const foo: User = {
  name: 'p1su',
  age: 25,
};

const bar: PrivateUser = {
  name: 'si1',
  age: 24,
  id: 001,
};

 

Computer Property Name 

객체의 프로퍼티 이름을 표현식을 통해 지정하는 방식이다. 

type KeyTypes = 'name' | 'age';

type User = {
  [key in KeyTypes]: string | number; 
}

const user: User = {
  name: 'John Doe',
  age: 30,
};

interface User2 {
  [key in KeyTypes]: string | number; //매핑된 형식은 속성 또는 메소드를 선언할 수 없습니다. 
}

KeyTypes를 name 이나 age 라는 문자열 리터럴 타입을 가지도록 정의하였다. 

타입 별칭의 경우 이를 표현식을 활용하여 객체의 프로퍼티 이름으로 작성할 수 있다. 

 

interface의 경우는 불가능하다. 

 

무엇을 사용해야 하는지

보통 객체의 타입을 정의할 때는 interface를 사용할 것을 권장하고 있다. 

그외 원시 타입이나 union 타입, 복잡한 타입을 정의할 때는 타입 별칭을 사용해도 되겠다. 

타입스크립트가 아직 익숙하지 않은 상태라면 interface를 위주로 사용하는 것이 좋아보인다.