interface 와 type

거의 같고, 두 가지가 다릅니다

객체 형태를 적는 데는 둘 다 됩니다. 아래 두 줄은 쓰는 자리에서 완전히 같습니다.

interface User { name: string; }

type User = { name: string; };

다른 것은 둘입니다.

type 만 되는 것

type Id = string | number;
type Formatter = (value: number) => string;
type Pair = [string, number];

const id: Id = 1;
const won: Formatter = v => `${v}원`;
const pair: Pair = ["홍길동", 27];

console.log(id, won(1000), pair[0]);

객체가 아닌 것에는 interface 를 쓸 수 없습니다. 유니온·함수·튜플에 이름을 붙이려면 type 입니다.

interface 만 되는 것

interface User {
	name: string;
}

interface User {
	age: number;
}

const u: User = { name: "홍길동", age: 27 };

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

같은 이름으로 두 번 적었는데 오류가 아닙니다. 둘이 합쳐져 { name: string; age: number } 가 됩니다.

type User = {
	name: string;
};

type User = {
	age: number;
};

합쳐지는 것이 좋기만 한 것은 아닙니다. 내가 적지 않은 곳에서 속성이 늘어날 수 있다는 뜻이라, 실수로 같은 이름을 두면 알아채기 어렵습니다.

이 성질이 값을 하는 자리는 남이 만든 타입을 넓힐 때입니다. 라이브러리가 적어 둔 인터페이스에 내 프로젝트의 속성을 더할 수 있습니다(4.3).

어느 쪽을 사용하나

어느 쪽이든 됩니다. 팀에서 하나로 맞추는 것이 가장 중요하고, 흔한 기준은 이렇습니다.

• 객체의 형태를 적을 때는 interface. 특히 남이 물려받거나 넓힐 수 있는 것.
• 그 밖의 모든 것은 type — 유니온, 함수, 튜플, 그리고 있는 타입을 조합해 만드는 것(3.4).

이 트랙에서도 그렇게 적었습니다. Level 과 Formatter 는 type, User 와 Member 는 interface 입니다.

처음에 자주 걸리는 것

직접 해보기

type Book = {
	title: string;
	pages: number;
	author?: string;
};

function show(book: Book): void {
	console.log(`${book.title} (${book.pages}쪽)`);
}

show({ title: "타입스크립트 입문", pages: 320 });

이 단원의 정리