(TypeScript) 타입스크립트 interface와 Type Alias(타입 별칭)

타입스크립트 (TypeScript)

 

타입스크립트에서 새로운 타입을 정해줄 수 있는 interface와 Type Alias(타입별칭) 에 대해 공부했습니다.

 

1. interface

// interface
interface Snacks {
  readonly name: string; // readonly는 해당 값이 할당된 후에 수정이 안되도록 합니다.
  price: number;
  sale?: boolean; // '?' 선택속성 (있을수도 없을수도 있습니다)
}

const snack1: Snacks = { name: 'Shrimp crackers', price: 1000 };
const snack2: Snacks = { name: 'Pocachip', price: 1500, sale: true };

 

interface로 Snacks 라는 과자 타입을 생성해줬습니다.

그 후 snack1과 snack2을 각각 할당해줬습니다.

 

이런식으로 사용할 수 있지만 인터페이스는 보통 클래스의 추상화 규칙을 정의하는데 많이 쓰입니다.

인터페이스로 특정 규칙을 만들어놓고 그 인터페이스를 클래스에 연결하여 사용합니다.

 

// 클리너 인터페이스 생성 (클래스 규칙 생성)
interface Cleaner {
  cleanUp(item: string): string;
}

// 전기 청소기 생성
class ElectricCleaner implements Cleaner {
  cleanUp(item: string): string {
    return `전기 청소기로 제거하였습니다 : ${item}`;
  }
}

// 공기 청소기 생성
class AirCleaner implements Cleaner {
  cleanUp(item: string): string {
    return `공기 청소기로 제거하였습니다 : ${item}`;
  }
}

// 테스트
const cleaner = new ElectricCleaner();
const cleaner2 = new AirCleaner();
console.log(cleaner.cleanUp('유리조각')); // 전기 청소기로 제거하였습니다 : 유리조각
console.log(cleaner2.cleanUp('먼지')); // 공기 청소기로 제거하였습니다 : 먼지

 

이런식으로 클리너 인터페이스를 생성해주고 그 규격사항과 연관되는 두 종류의 청소기를 만들어줬습니다.

 

 

2. Type Alias (타입 별칭)

// Type Alias - 타입 별칭

type Num = number; // Num이라는 새로운 숫자 타입을 정의해줌.
const score: Num = 100;

type Text = string; // Text라는 새로운 문자열 타입을 정의해줌.
const title: Text = 'Fantasy Story';
const description: Text = 'The story of traveling the fantasy world.';

// Player라는 새로운 객체 타입을 정의해줌.
type Player = {
  id: string;
  nickname: string;
  password: number;
};

// challenger를 새롭게 만들어 Player 객체 타입을 이용하여 정보를 할당함.
const challenger: Player = {
  id: 'baby123',
  nickname: '아기',
  password: 12345,
};

 

타입 별칭으로 새로운 타입들을 정의해주었습니다.

타입 별칭은 해당하는 타입의 데이터, 즉 하나의 타입으로서 타입 데이터를 저장하고있는 경우에 사용됩니다.

 

이 두 방법은 비슷해보이지만 차이점이 있습니다.

 

• 타입 별칭은 새 이름, 새 존재를 생성하지 않습니다. 즉 실제로는 새 타입을 생성하지 않습니다. 만약 타입에러가 발생하게 되면 타입 별칭으로 정의한 타입은 정의한 타입을 보여주지 않고 실제 타입이 나오게 됩니다. 인터페이스는 정의하면 실제로 새 타입, 새 이름을 생성하게되고 타입 에러는 인터페이스가 나오게 됩니다.
• 인터페이스는 extends, implements가 가능하지만 타입 별칭은 불가능합니다.
• 인터페이스는 선언 병합(Declaration Merging) 이 가능합니다. 동일한 이름으로 여러 번 선언해도 합쳐집니다.
• 타입 별칭은 기본적인 타입, Array, Tuple, Union 등을 새롭게 정의할 수 있습니다.

공식문서에서는 인터페이스를 더 권장하고 있습니다.

하지만 타입 별칭도 최근에 확장 등이 가능하도록 업데이트가 되었다고 하네요.

결국에는 각각의 특징과 의미를 좀 더 생각해서 사용하면 될 것 같다고 생각합니다.

당연히 인터페이스로 표현할 수 없는 기본 타입, 배열, 튜플, 유니온 등을 새롭게 정의해야 한다면

타입 별칭을 이용하면 되고, 또 위에서 언급했듯이 타입의 데이터를 저장하고 있는 경우에도 타입 별칭을 사용하는게 맞는 것 같습니다.

인터페이스는 인터페이스 규칙을 정해놓고 그 규칙에 맞게 클래스같은 무언가를 구현할 때 사용하면 될 것 같습니다.