인터페이스

객체가 갖추어야 할 것을 적어 둡니다

2.4 에서 type 으로 객체 형태에 이름을 붙였습니다. 같은 일을 하는 문법이 하나 더 있습니다.

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

등호도 세미콜론도 없습니다. 함수를 선언하는 것과 비슷하게 생겼습니다. 둘의 차이는 다음 단원에서 보고, 여기서는 인터페이스를 다루는 법을 봅니다.

인터페이스로 매개 변수 적기

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

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

show({ name: "홍길동", age: 27 });

type User = { … } 로 적은 것과 쓰는 자리에서는 차이가 없습니다. 매개 변수·반환·변수 어디에나 같은 방식으로 적습니다.

선택 속성과 읽기 전용

2.3 에서 본 ? 와 readonly 를 그대로 사용합니다.

interface User {
	readonly id: number;
	name: string;
	nickname?: string;
}

const a: User = { id: 1, name: "홍길동", nickname: "길동" };
const b: User = { id: 2, name: "김철수" };

console.log(a.nickname ?? "별명 없음");
console.log(b.nickname ?? "별명 없음");

b.id = 3;

마지막 줄만 지우면 길동 과 별명 없음 이 나옵니다. 고쳐서 실행해 보세요.

물려받아 넓히기

extends 로 이미 있는 인터페이스를 물려받습니다. 2.4 의 & 와 하는 일이 비슷하지만, 이쪽이 인터페이스의 방식입니다.

interface Person {
	name: string;
}

interface Member extends Person {
	level: "basic" | "pro";
}

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

console.log(`${m.name} ${m.level}`);

Member 는 name 과 level 을 모두 갖추어야 합니다. 여럿을 한 번에 물려받을 수도 있습니다 — interface A extends B, C { … }.

처음에 자주 걸리는 것

직접 해보기

interface Book {
	title: string;
	pages: number;
	author?: string;
}

function show(book: Book): void {
	console.log(`${book.title} (${book.pages}쪽) ${book.author ?? "지은이 미상"}`);
}

show({ title: "타입스크립트 입문", pages: 320, author: "홍길동" });
show({ title: "이름 없는 책", pages: 100 });

interface Book {
	title: string;
	pages: number;
}

interface EBook extends Book {
	sizeMb: number;
}

const e: EBook = { title: "타입스크립트 입문", pages: 320, sizeMb: 12 };

console.log(`${e.title} ${e.sizeMb}MB`);

이 단원의 정리