TypeScript의 Object 타입 선언

TS에서 object 타입을 선언할 때 'interface'와 'type'을 사용한다.

 

interface

선언하기

interface ButtonName {
    name: string;
    id: number;
}

만약 id가 number 또는 빈 값이라면 아래와 같이 표현할 수 있다.

두 개가 같은 표현이다.

id: number | null;
id?: number;

정의하기

const btn: ButtonName = {
    name: 'button1',
    id: 1
};

확장하기(상속)

// extends로 확장하기
interface ButtonName2 extends ButtonName {
    activate: boolean;
}

const btn2: ButtonName2 = {
    name: 'button2',
    id: 2,
    activate: false
};

 

type

선언 및 정의하기

type ButtonName = {
    name: string;
    id: number;
}

const btn: ButtonName = {
    name: 'button1',
    id: 1
};

상속하기

// &로 확장하기
type ButtonName2 = ButtonName & {
    activate: boolean;
}

const btn2: ButtonName2 = {
    name: 'button2',
    id: 2,
    activate: false
};

computed value의 사용

type ButtonName = 'IconButton' | 'FilledButton' | 'OutlinedButton';

const btn: ButtonName = 'IconButton'

 

type과 interface의 차이점

1. type는 Object 타입 외의 모든(any)타입에 이름을 부여할 수 있지만 interface는 오직 Object 타입에만 가능하다.

2. type은 &로, interface는 extends로 상속한다.

3. type은 computed value가 사용가능하다.