[TS] Type Aliase 타입 별칭 : 변수처럼 타입에 이름 붙이기

 

 

💡 타입에 이름을 붙여보자!

 

const cart: string[] = ['c001', 'c002', 'c003']; // cart 에 타입을 정의

interface User {
  username: string;
  email: string;
  cart: string[]; // User 객체에 cart 를 넣어주려고 타입을 또 정의함
}

const user: User = {
  username: 'aoto',
  email: 'aotoyae@gmail.com',
  cart,
};

 

위와 같이 똑같이 cart 타입을 두 번 적어주면

(타입이 바꼈을 때) 수정하기 어려운, 유지 보수가 힘든 코드가 된다.

 

 

이럴 때 별칭으로 타입에 이름을 붙여준다.

type Cart = string[]; // ** 여기

const cart: Cart = ['c001', 'c002', 'c003']; // 타입 이름만 적어줌

interface User {
  username: string;
  email: string;
  cart: Cart; // 타입 이름만 적어줌
}

const user: User = {
  username: 'aoto',
  email: 'aotoyae@gmail.com',
  cart,
};

 

number 로 타입을 바꾸니 에러가 뜬다 ~

 

😲 별칭은 모든 타입에 붙여줄 수 있다.

type CartResultCallback = (result: boolean) => void; // 함수

type Product = { // 객체
  id: string;
  name: string;
};

 

그런데 객체는 interface 를 만들던 방식과 같다!

두 가지 방법이 가능한건데 되도록이면 interface 를 쓰도록 하자.

 

 

~ 활용 ~

수정 전

interface Entity {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

interface Monster extends Entity {
  name: string;
  level: number;
  hasGold?: boolean;
  skills: string[];
  move: (fromPoint: [number, number], toPoint: [number, number]) => void
}

function getDiff(fromPoint: [number, number], toPoint: [number, number]) {
  let dx = toPoint[0] - fromPoint[0];
  let dy = toPoint[1] - fromPoint[1];
  return [dx, dy];
}

const monster: Monster = {
  id: 'g001',
  name: '고블린',
  level: 22,
  skills: ['태권도', '특공무술'],
  move(fromPoint, toPoint) {
    let [dx, dy] = getDiff(fromPoint, toPoint);
    console.log(`오른쪽으로 ${dx} 위쪽으로 ${dy} 만큼 이동!`);
  },
  createdAt: new Date(),
  updatedAt: new Date(),
}

const current: [number, number] = [0, 0];
const target: [number, number] = [4, 5];
monster.move(current, target);

 

수정 후

type Point = [number, number];

interface Entity {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

interface Monster extends Entity {
  name: string;
  level: number;
  hasGold?: boolean;
  skills: string[];
  move: (fromPoint: Point, toPoint: Point) => void
}

function getDiff(fromPoint: Point, toPoint: Point) {
  let dx = toPoint[0] - fromPoint[0];
  let dy = toPoint[1] - fromPoint[1];
  return [dx, dy];
}

const monster: Monster = {
  id: 'g001',
  name: '고블린',
  level: 22,
  skills: ['태권도', '특공무술'],
  move(fromPoint, toPoint) {
    let [dx, dy] = getDiff(fromPoint, toPoint);
    console.log(`오른쪽으로 ${dx} 위쪽으로 ${dy} 만큼 이동!`);
  },
  createdAt: new Date(),
  updatedAt: new Date(),
}

const current: Point = [0, 0];
const target: Point = [4, 5];
monster.move(current, target);