기억보단 기록을/Typescript

[Typescript] Section 05. 타입 별칭, Type vs Interface

_OIL 2023. 5. 20. 19:06
반응형

1. 타입 별칭 이란

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';

//interface 레벨의 복잡한 타입도 가능
type Developer = {
  name: string;
  skill: string;
}

//타입 별칭에 제네릭도 사용할 가능
type User<T> = {
  name: T
}

2. type vs interface

type  진영

타입스크립트에서 type과 interface는 객체를 선언할 때 매우 유사한 구조입니다. 논란의 여지가 있지만 대부분의 경우 일관되게 type을 사용하고 다음 중 하나에 해당하는 경우에만 interface를 사용하는 것이 좋습니다.

  • interface의 "merging" 기능을 활용하고 싶을 때.
  • 클래스/인터페이스 계층을 포함하는 OO 스타일 코드를 가지고 있을 때.

위의 경우가 아니면, 항상 더 다용도적인 type을 사용하면 코드가 더 일관성 있게 됩니다.

참고 링크

 

(번역)더 좋은 타입스크립트 프로그래머로 만드는 11가지 팁

원문 : https://dev.to/zenstack/11-tips-that-help-you-become-a-better-typescript-programmer-4ca1타입스크립트를 배우는 것은 종종 재발견의 여정입니다. 여러분들의 타입스크립트에 대한 첫인상은

velog.io

interface  진영

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다. 따라서, 가능한 한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다.

참고 링크

 

타입 별칭 | 타입스크립트 핸드북

타입 별칭 (Type Aliases) 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. 예를 들면 아래와 같습니다. 위와 같이 string, number와 같은 간단한 타입 뿐만 아니라 inter

joshua1988.github.io

 

내 생각 

타입스크립트에서 `type`과 `interface`는 모두 타입 정의를 위해 사용되는 기능입니다. 각각의 사용 시나리오는 다음과 같습니다.

type 사용 시나리오:

  • 새로운 타입을 정의하고 싶을 때 사용합니다.
  • 유니온 타입(Union types), 인터섹션 타입(Intersection types), 튜플 타입(Tuple types) 등의 복잡한 타입을 정의할 때 유용합니다.
  • 타입의 조건부 유형(Conditional types)을 사용하여 타입을 조작하고 싶을 때 사용합니다.
  • 리터럴 타입(Literal types)을 정의하고자 할 때 사용합니다.

예시:

type Point = {
  x: number;
  y: number;
};

type Color = 'red' | 'blue' | 'green';

type Coordinates = [number, number];

type PartialPoint = Partial<Point>; // 모든 속성이 선택적인 타입

type CustomType<T> = T extends string ? string : number; // 타입의 조건부 유형 사용

 

interface 사용 시나리오:

  • 클래스나 객체의 구조를 정의하고, 해당 구조를 구현하는 것에 중점을 둘 때 사용합니다.
  • 클래스나 객체의 멤버(프로퍼티, 메서드)의 타입을 명시하고, 해당 멤버들에 대한 구현을 요구하고 싶을 때 사용합니다.
  • 타입 확장(extends)을 통해 인터페이스를 상속받거나 구현할 수 있습니다.
  • 동일한 이름의 인터페이스를 선언하면, 자동으로 병합(merge)됩니다.

예시:

interface Point {
  x: number;
  y: number;
}

interface Shape {
  color: string;
  draw(): void;
}

interface Circle extends Shape {
  radius: number;
}

interface Square extends Shape {
  sideLength: number;
}

class MyCircle implements Circle {
  color: string;
  radius: number;

  constructor(color: string, radius: number) {
    this.color = color;
    this.radius = radius;
  }

  draw() {
    console.log(`Drawing a ${this.color} circle with radius ${this.radius}.`);
  }
}

 

일반적으로 type과  interface는 서로 유사한 기능을 제공하지만, 몇 가지 차이점이 있습니다. 예를 들어,  type은 유니온 타입과 인터섹션 타입 등의 고급 타입 기능을 더 많이 제공하며, interface는 타입 확장과 병합 등의 기능이 강력합니다. 따라서 사용 시나리오에 따라 선택하면 됩니다. 대부분의 경우에서 interface를 사용하는 것이 좋지만, type은 복잡한 타입 정의나 타입 조작이 필요한 경우에 유용합니다.

 

반응형