🛠 TypeScript Essential - 2. Type Alias vs Interface

이춘길·2021년 10월 28일

🐱‍🏍 목표

Type Alias
Interface
Type Alias vs Interface

📌 1. Type Alias

1-1) 간단한 타입 지정

export type Name = string;
export type Email = string;
export type FooFunction = () => string; // (1)

export type TGetApi = { // (1)
  (url: string, search?: string): Promise<string>;
};

export type TUser = {
  readonly id: number; // (2)
  readonly name: string;
  email: Email;
  receiveInfo: boolean;
  active?: YesOrNo; // (3)
};

타입 별칭을 만들어 알맞게 사용할 수 있다.
(1) 함수 타입 별칭은 두 가지 방법으로 구성 가능
(2) 객체에 readonly 속성은 값 변경 불가능
(3) Optional Property

1-2) 리터럴 타입 - Primitive type

export type YesOrNo = "Y" | "N";
export type DayOfWeek = "월" | "화" | "수" | "목" | "금" | "토" | "일";
export enum DayOfTheWeek {"월", "화", "수", "목", "금", "토", "일"}

타입에 값을 유니온 타입 형태로 지정할 수 있다.
컴파일 시점에 변수가 지정된 값을 사용하는지 확인한다.
Enum은 실제 데이터에 집합, Type Alias는 타입 체킹

1-3) 리터럴 타입 - Reference Type

export interface Color {
  fontColor: string;
  strokeColor: string;
  borderColor: string;
  backgroundColor: string;
}

export type Display = {
  display: "none" | "block";
  visibility: boolean;
  opacity: number;
};

export type Geometry = {
  width: number;
  height: number;
  padding: number;
  margin: number;
};

export type TStyle = Color &
  Display &
  Geometry & {
    tagName: string;
};

'&'를 이용한 인터섹션 기능을 통해 Merge를 통한 확장
Type Alias뿐만 아니라 Interface로 구성된 타입도 확장 가능

1-4) 추상적인 타입을 지닌 객체

export type TOnlyBooleanValueObject = {
  [prop: string]: boolean;
};

key는 string, 값은 boolean인 객체

1-5) 추상적인 타입을 지닌 함수

export type TGetApiArrow = (url: string, search?: string) 
  => Promise<string>;

export type TGetApi = {
  (url: string, search?: string): Promise<string>;
};

url, search를 인자로 받고 Promise 리턴을 하는 함수
두 가지 형태로 사용될 수 있다.

📌 2. Interface

2-1) 객체에 대한 타입 지정

export interface IUser {
  readonly id: number;
  readonly name: Name;
  email: string;
  receiveInfo: boolean;
  active: YesOrNo;
}

인터페이스는 객체에 대한 타입 지정이 목적

2-2) 인터페이스의 상속

// (1)
export interface IUser {
  address?: string;
}

export interface IUserProfile extends IUser {
  profileImage: string;
  github?: string;
  twitter?: string;
}

// (2)
export interface Color {
  fontColor: string;
  strokeColor: string;
  borderColor: string;
  backgroundColor: string;
}

export type Display = {
  display: "none" | "block";
  visibility: boolean;
  opacity: number;
};

export interface IStyle extends Color, Display {
  tagName: string;
}

(1) 인터페이스는 상속을 통해 타입을 결합한다.
(2) Interface 이외에, Type Alias도 상속을 통한 결합이 가능

2-3) 추상적인 타입을 지닌 객체

export interface IOnlyNumberValueObject {
  [key: string]: number;
}

key는 string, 값은 number인 객체

2-4) 추상적인 타입을 지닌 함수

export interface IGetApi {
  (url: string, search?: string): Promise<string>;
}

url, search를 인자로 받고 Promise 리턴을 하는 함수

2-5) 생성자 인터페이스

1) 생성자 인터페이스 생성

export interface IRectConstruct {
  new (x: number, y: number, width: number, height: number): IRect;
}

2) 생성자 인터페이스 사용

class Rect implements allTypes.IRect {
    id : number;
    x: number;
    y: number;
    width: number;
    height: number;

    constructor(x: number, y: number, width: number, height: number){
        this.id = Math.random() * 100000;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

function createDefaultRect(cstor: allTypes.IRectConstruct){
    return new cstor(0, 0, 100, 100);
}

const rect1 = new Rect(0, 0, 100, 20);
const rect2 = createDefaultRect(Rect);