객체 타입

어떤 이름과 값을 담는지 적습니다

객체의 타입은 객체를 적는 것과 비슷하게 생겼습니다. 값 자리에 값 대신 타입을 적습니다.

// 값
{ name: "홍길동", age: 27 }

// 타입
{ name: string; age: number }

속을 가르는 것이 쉼표가 아니라 세미콜론입니다. 쉼표도 되지만 세미콜론이 흔한 표기입니다.

객체에 타입 적기

const user: { name: string; age: number } = {
	name: "홍길동",
	age: 27
};

console.log(`${user.name} (${user.age})`);

이렇게 길게 적을 일은 실제로는 드뭅니다. 값을 바로 넣으면 추론되고(1.2), 여러 곳에서 사용할 형태는 이름을 붙여 둡니다(2.4). 여기서는 모양을 보려고 적었습니다.

빠뜨려도, 더 넣어도 막습니다

const user: { name: string; age: number } = {
	name: "홍길동"
};

const user: { name: string } = {
	name: "홍길동",
	age: 27
};

더 넣은 것까지 막는 것은 오타를 잡기 위해서입니다. nickname 을 nickName 으로 적으면 없는 속성을 넣은 셈인데, 막지 않으면 조용히 지나갑니다.

없어도 되는 속성은 ? 를 붙여 둡니다(1.6) — { name: string; nickname?: string }.

안에 객체가 또 있을 때

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

console.log(order.buyer.name);
console.log(order.items.length);

이쯤 되면 이름을 붙여야 합니다. 다음 단원에서 이 타입을 조각으로 나누어 이름을 붙입니다.

바꾸지 못하게 하기 — readonly

const user: { readonly id: number; name: string } = { id: 1, name: "홍길동" };

user.name = "김철수";
console.log(user.name);

user.id = 2;

const 는 변수에 다른 것을 넣는 것을 막고, readonly 는 객체 안의 값을 바꾸는 것을 막습니다. 아이디처럼 만든 뒤 바뀌지 않아야 하는 것에 붙입니다.

처음에 자주 걸리는 것

직접 해보기

const book: { title: string; pages: number; author: { name: string } } = {
	title: "타입스크립트 입문",
	pages: 320,
	author: { name: "홍길동" }
};

console.log(`${book.title} (${book.pages}쪽) ${book.author.name}`);

이 단원의 정리