📌 개념

• 특정 타입이나 인터페이스를 참조 가능한 타입 변수
• 타입에 의미를 부여해서 별도의 이름으로 부르는 것 (= 별칭)

📌 장점

1. 유의미한 타입명 짓기

• 예: 일반적인 string 타입이 아니라 MyName이라는 유의미한 타입명 부여

// 타입 별칭 MyName 에 string 타입을 할당한 후
type MyName = string;

// 단순 string이 아닌 'MyName'으로 capt 변수에 타입 부여
var capt: MyName = '캡틴';

2. 여러 번 '반복'되는 타입의 변수화로 중복 제거

• 타입 별칭의 가장 큰 장점
• 예: 2군데 이상에서 쓰이는 string | number라는 타입을 타입 별칭으로 '변수화'

function logText(text: string | number) { }

var message: string | number = '안녕하세요';
logText(message);

type MyMessage = string | number;

function logText(text: MyMessage) { }

var message: MyMessage = '안녕하세요';
logText(message);

🙋‍♀️ 주의
타입 별칭은 동일명에 새로운 값을 부여하는 재할당(선언 병합)은 안 됨

type MyName = string;
type MyName = number; // 에러 발생

📌 타입 별칭 vs. 인터페이스 차이점

1. 코드 에디터에서 표기되는 정보 차이

• 타입 별칭은 타입 선언 후 커서를 올리면 구체적인 타입 정보를 미리보기로 표시
• 인터페이스는 없음

2. 정의 가능한 종류

• 인터페이스는 주로 객체 타입 지정
• 타입 별칭은 객체 타입을 포함한 원시 타입, 유니언/인터섹션, 제네릭, 유틸리티 타입 등에 모두 사용

type ID = string; // 원시 타입

type Product = TShirt | Shoes; // 유니언 타입
type Teacher = Person & Adult; // 인터섹션 타입

type Gilbut<T> = { // 제네릭 타입
	book: T;
}

type MyBeer = Pick<Beer, 'brand'>; // 유틸리티 타입

3. 확장 방식

이미 정의되어 있는 타입들을 조합해서 더 큰 타입 생성

• 인터페이스: extends 키워드를 사용한 상속 사용

interface Person {
	name: string;
    age: number;
}

interface Developer extends Person { // 상속
	skill: string;
}

• 타입 별칭: 인터섹션 &을 사용한 여러 타입 결합

type Person = {
	name: string;
    age: number;
}

type Developer = {
	skill: string;
}

type Joo = Person & Developer

🙋‍♀️ 인터페이스: 선언 병합
인터페이스를 동일한 이름으로 재선언 시 자동으로 합쳐짐

// 동일한 Person이라는 이름으로 여러 개 선언
interface Person {
	name: string;
    age: number;
}
interface Person {
	address: string;
}
// 두 인터페이스의 속성 모두 사용 가능
var seho: Person = {
	name: '세호',
    age: 30,
    address: '광교'
}

🙋‍♀️ 인터페이스와 타입 별칭을 혼합해서 사용 가능

interface Person {
	name: string;
    age: number;
}
type Adult = {
	old: boolean;
}
type Teacher = Person & Adult; // 인터섹션

📌 타입 별칭의 사용처

1. 타입 별칭만 가능한 타입 선언 시

• 원시 타입, 유니언 타입, 인터섹션 타입, 제네릭 타입, 유틸리티 타입, 맵드 타입

// 맵드 타입
type Picker<T, K extends keyof T> = {
	[P in K]: T[P]
};

• 인터페이스는 '객체 타입'을 정의할 때 사용
  • 제네릭을 제외한 타입 별칭용 타입들을 정의하는 데 사용 불가

2. 백엔드 통신 응답 타입 정의

• 여기서의 인터페이스는 타입스크립트의 인터페이스가 아니라 백엔드와 서로 간의 영역 간 접점(API 데이터)을 맞추는 작업을 의미
  => 프론트엔드에서 API 통신(axios) 함수를 설계할 때의 응답 값 타입을 정의하는 작업
• 이 경우는 타입 별칭 말고 인터페이스도 사용 가능

// 타입 별칭으로 정의한 경우
type User = {
	id: string;
    name: string;
}

// 인터페이스로 정의한 경우
interface User {
	id: string;
    name: string;
}

// API 통신 함수에서 사용한 모습
function fetchData(): User {
	return axios.get('http://localhost:3000/users/1');
}

• 백엔드 응답 정의 시 타입 별칭과 인터페이스 둘 다 사용 가능하지만 인터페이스를 사용했을 때 장점이 더 큼
  • 요구 사항 변경으로 인해 데이터 구조가 바뀌는 경우
  • 객체에 다른 속성이 추가되는 경우
  • 다른 객체와 '결합'하여 표시해야 하는 경우
    => 인터페이스가 타입 별칭에 비해 상속과 선언 병합을 통해 타입의 수정이나 확장 면에서 더 유리
• 예: User가 Admin을 상속하고 동일명 User에 skill 선언 병합까지 합쳐져서 최종적으로 모든 속성이 사용 가능해진 경우 (인터페이스 활용)

interface Admin {
	role: string;
    department: string;
}

interface User extends Admin {
	id: string;
    name: string;
}

interface User {
	skill: string;
}

// 결과
interface User {
	id: string;
    name: string;
    role: string;
    department: strint;
    skill: string;
}

📌 타입 별칭과 인터페이스 권장 사용법

• 인터페이스를 보통 먼저 사용
  • 객체 타입 정의 + 백엔드와의 API 인터페이스 정의에 타입 선언
• 타입 별칭을 사용하는 경우
  • 인터페이스가 불가능하거나 마우스 hover로 타입 정보 미리보기를 원할 때
  • 타입 별칭으로만 타입 정의가 가능한 예시
    • 원시 타입, 유니언/인터섹션 타입, 제네릭, 유틸리티 타입, 맵드 타입 등