[TS] type과 interface 차이와 index signature

타입스크립트에서 타입을 지정하는 방식에는 2가지가 있다

type과 interface를 비교해보자

interface

- 확장(extends), (다중)상속이 가능하다

- 동일한 이름을 여러번 사용 가능(= 하나로 병합)

props를 정의할 때 사용한다

interface A {
    a: string;
}

interface B {
    b: string;
}

interface C extends A, B {
    c: string;
}

const example: C = {
    a: "a",
    b: "b",
    c: "c"
};

interface Car {
    drive(): void;  // 메소드
    wheels: number;
}

interface Boat {
    sail(): void;
    sails: number;
}

type

- 유니언 타입( | ), 인터섹션(&) 타입 지원

- 함수, 튜플, 제네릭 등을 정의 가능

- 기본적인 타입에서 복잡한 구조까지 정의 가능

주요 차이점

1. 확장성

- interface : extends

- type : 확장 불가, 인터섹션으로 다른 타입으로 결합

2. 유니언 타입( | )과 인터섹션(&)

& (intersection) : 여러 타입이 결합된 새로운 타입 생성

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
 
type ColorfulCircle = Colorful & Circle;

3. 선언 병합

interface는 동일한 이름으로 선언 시 병합되지만, type은 선언이 안됨

index signature

객체의 속성 키와 값 타입을 정의하는 방법 (객체 속성이 동적으로 정의될 때)

인덱스 시그니처는 2가지의 조건을 만족해야한다

1. 인덱스 시그니처는 객체의 모든 속성이 동일한 타입이여야 한다

interface StringDictionary {
    [key: string]: string; // index signature
}

const myDictionary: StringDictionary = {
    firstName: "John",
    lastName: "Doe"
};

interface InvalidDictionary {
    [key: string]: string;
    length: number; // 오류: 인덱스 시그니처와 충돌 (string 타입이 아니므로)
}

2. 특정 속성을 사용할 때는, 인덱스 시그니처 타입과 호환되어야 한다

interface CustomDictionary {
    [key: string]: string | number;
    length: number; // 특정 속성
    name: string;   // 특정 속성
}

저작자표시