TS LAB
    TS 2.4 · 2부. 함수와 객체

    타입 별칭

    형태에 이름을 붙여 여러 곳에서 사용합니다.

    예상 학습 시간 14분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 입문
    개념 설명

    형태에 이름을 붙입니다

    앞 단원에서 객체 타입을 그 자리에 길게 적었습니다. 같은 형태를 여러 곳에서 사용하면 그때마다 다시 적어야 하고, 하나가 바뀌면 전부 고쳐야 합니다.

    type 으로 이름을 붙입니다. 

    type 이름 = 타입;

    이름은 대문자로 시작하는 것이 관례입니다 — 값과 구분하기 위해서입니다.

    최소 예제 · 편집 가능

    객체 형태에 이름 붙이기

    main.ts 
    type User = {
	name: string;
	age: number;
};

function show(user: User): void {
	console.log(`${user.name} (${user.age})`);
}

show({ name: "홍길동", age: 27 });
show({ name: "김철수", age: 31 });
    출력
    홍길동 (27) 김철수 (31)

    User 를 한 번 적어 두고 매개 변수에서 이름으로 불렀습니다. 형태가 바뀌면 고칠 곳은 한 군데입니다.

    상세 사용법

    객체만 되는 것이 아닙니다

    type 은 어떤 타입에든 이름을 붙입니다. 유니온에도, 함수에도 붙습니다.

    main.ts 
    type Id = string | number;
type Level = "low" | "mid" | "high";

const a: Id = "a-1";
const b: Id = 1;
const c: Level = "high";

console.log(a, b, c);
    출력
    a-1 1 high

    1.4 와 2.1 에서 이미 사용했던 것입니다. type Level 과 type Formatter 가 그것입니다.

    상세 사용법

    이름 붙인 것을 합치기

    & 로 이으면 둘을 모두 갖춘 것이 됩니다. 유니온(|)이 "둘 중 하나" 라면 이쪽은 "둘 다" 입니다.

    main.ts 
    type Person = { name: string };
type Contact = { phone: string };
type Member = Person & Contact & { level: "basic" | "pro" };

const m: Member = { name: "홍길동", phone: "010-0000-0000", level: "pro" };

console.log(`${m.name} ${m.phone} ${m.level}`);
    출력
    홍길동 010-0000-0000 pro

    작은 조각으로 나누어 두고 필요한 대로 합치는 것이 흔한 방식입니다. 셋 가운데 하나만 바뀌어도 고칠 곳은 그 조각 하나입니다.

    흔한 실수

    처음에 자주 걸리는 것

    type 은 값을 만들지 않습니다

    type User = { … } 는 실행되는 코드가 아닙니다. 검사할 때만 있고 JavaScript 로 바뀌면 사라집니다. User 를 값처럼 부르거나 console.log(User) 할 수 없습니다.

    등호와 세미콜론

    type User = { … }; 는 등호로 잇고 세미콜론으로 끝냅니다. 다음 단원의 interface 는 등호도 세미콜론도 없습니다 — 모양이 달라 헷갈리는 자리입니다.

    이름이 겹치면 안 됩니다

    같은 이름으로 type 을 두 번 적을 수 없습니다. (interface 는 됩니다 — 3.2 에서 봅니다.)

    실습 문제

    직접 해보기

    1. 상품 합계 난이도 중

    이름과 가격을 담는 타입에 이름을 붙이고, 그 배열을 받아 가격 합계를 돌려주는 함수를 만드세요. 

    type Product = {
	name: string;
	price: number;
};

function total(items: Product[]): number {
	return items.reduce((sum, item) => sum + item.price, 0);
}

console.log(total([{ name: "연필", price: 1000 }, { name: "공책", price: 2000 }]));
    2. 조각으로 나누기 난이도 중

    2.3 의 주문 객체를 Buyer 와 Order 로 나누어 이름을 붙이세요. 

    type Buyer = {
	name: string;
	phone: string;
};

type Order = {
	id: number;
	buyer: Buyer;
	items: string[];
};

const order: Order = {
	id: 1,
	buyer: { name: "홍길동", phone: "010-0000-0000" },
	items: ["연필", "공책"]
};

console.log(order.buyer.name, order.items.length);
    요약

    이 단원의 정리

    • type 이름 = 타입; 으로 형태에 이름을 붙입니다.
    • 객체뿐 아니라 유니온·함수·어떤 타입에든 붙습니다.
    • & 로 이으면 둘을 모두 갖춘 것이 됩니다.
    • 작은 조각으로 나누어 두고 합쳐 사용합니다.
    • 타입은 실행되는 코드가 아니라 검사할 때만 있습니다.