interface vs. type

정은경·2024년 5월 20일
0

👸 Front-End Queen

목록 보기
269/271

TypeScript에서 interfacetype은 모두 객체의 구조를 정의하는 데 사용됩니다. 하지만, 몇 가지 차이점이 있습니다. 아래에서 interfacetype의 주요 차이점들을 설명하겠습니다.

Interface

  1. 확장 가능성 (Extensibility):

    • interface는 선언 병합(declaration merging)을 지원합니다. 즉, 동일한 이름의 여러 interface 선언을 하나로 병합할 수 있습니다.

    • 예시:

      interface Person {
        name: string;
      }
      
      interface Person {
        age: number;
      }
      
      const person: Person = {
        name: "John",
        age: 30
      };
  2. 상속 (Inheritance):

    • interfaceextends 키워드를 사용하여 다른 인터페이스를 상속받을 수 있습니다.

    • 예시:

      interface Name {
        name: string;
      }
      
      interface Age {
        age: number;
      }
      
      interface Person extends Name, Age {}
      
      const person: Person = {
        name: "John",
        age: 30
      };
  3. 구조적 타이핑 (Structural Typing):

    • interface는 TypeScript의 구조적 타이핑 시스템을 활용하여, 객체가 특정 인터페이스를 따르는지 확인합니다.

Type

  1. 유형 별칭 (Type Aliases):

    • type은 단순히 특정 타입에 대한 별칭을 만듭니다. 객체 타입뿐만 아니라 원시 타입, 유니언 타입, 튜플 등 다양한 타입을 정의할 수 있습니다.

    • 예시:

      type Person = {
        name: string;
        age: number;
      };
      
      const person: Person = {
        name: "John",
        age: 30
      };
  2. 유니언 및 인터섹션 타입 (Union and Intersection Types):

    • type은 유니언 타입과 인터섹션 타입을 정의할 수 있습니다.

    • 예시:

      type Name = { name: string };
      type Age = { age: number };
      type Person = Name & Age;
      
      const person: Person = {
        name: "John",
        age: 30
      };
  3. 상속과 확장:

    • type& 연산자를 사용하여 다른 타입을 확장할 수 있습니다.

    • 예시:

      type Name = { name: string };
      type Age = { age: number };
      type Person = Name & Age;
      
      const person: Person = {
        name: "John",
        age: 30
      };
  4. 표현력 (Expressiveness):

    • type은 보다 복잡한 타입을 표현하는 데 더 유연합니다. 예를 들어, 매핑된 타입이나 조건부 타입 등을 정의할 때 유용합니다.

    • 예시:

      type Keys = "name" | "age";
      type Person = {
        [K in Keys]: string;
      };
      
      const person: Person = {
        name: "John",
        age: "30"  // 숫자를 문자열로 표현
      };

결론

  • 확장성이 중요한 경우 interface를 사용하는 것이 좋습니다. 특히, 다른 코드베이스와 협업하거나 라이브러리를 만들 때 유용합니다.
  • 유연한 타입 정의가 필요한 경우 type을 사용하는 것이 더 적합합니다. 유니언 타입이나 조건부 타입과 같은 복잡한 타입을 정의할 때 유용합니다.

각 상황에 맞는 적절한 도구를 선택하는 것이 중요합니다. 대부분의 경우, 인터페이스와 타입 별칭을 혼용하여 사용할 수 있습니다.

profile
#의식의흐름 #순간순간 #생각의스냅샷

0개의 댓글