노트

type과 interface

Type Aliases vs Interfaces

프론트엔드#ts · 연결된 개념 6개

쉽게 말하면

type과 interface는 둘 다 데이터 모양에 이름을 붙이는 방법이에요. interface는 같은 이름으로 두 번 쓰면 내용이 합쳐지는 공용 게시판 같고, type은 유니언까지 담는 대신 같은 이름을 다시 쓸 수 없어요.

비유의 한계 합쳐지는 성질은 라이브러리 전역 타입을 늘릴 때 편하지만, 실수로 같은 이름을 쓰면 조용히 합쳐지는 함정이 돼요. 둘 다 컴파일하면 사라져서 instanceof 검사에는 못 써요.

type(타입 별칭, Type Alias)과 interface는 둘 다 타입에 이름을 붙이는 방법이다. 객체 모양을 정의할 때는 대부분 바꿔 써도 되지만, 확장 방식과 표현 범위가 다르다.

interfacetype
확장extends (여러 개 가능)인터섹션 &
같은 이름 재선언자동 병합(선언 병합)에러
표현 범위객체·함수 모양유니언·튜플·원시값·조건부 타입 등 전부
클래스 implements가능객체 모양이면 가능
interface Window { myApp: AppAPI }
interface Window { ts: TypeScriptAPI }    // 병합 → 전역 타입 확장에 쓰임
 
type Status = 'loading' | 'success'       // interface로는 불가
type Dog = Animal & { breed: string }
  • 선언 병합(Declaration Merging)은 라이브러리의 전역 타입(Window, 모듈 타입)을 바깥에서 늘릴 때 유용하다. 반대로 의도치 않게 같은 이름을 쓰면 조용히 합쳐지는 함정도 된다(선언 파일(.d.ts)과 declare)
  • 유니언, 조건부·매핑 타입이 필요하면 type밖에 없다(유니언·인터섹션·리터럴 타입, 매핑된 타입과 keyof)
  • 선택 기준: 공식 Handbook은 잘 모르겠으면 interface로 시작하고 필요할 때 type을 쓰라고 권한다. 팀이 한쪽으로 통일하는 것이 더 중요하다
  • 둘 다 컴파일하면 사라진다. 런타임 검사(instanceof)에는 못 쓴다(타입 좁히기와 타입 가드)

클래스와 함께 쓰는 문법은 TypeScript 클래스 문법.

출처: TypeScript Handbook - Differences Between Type Aliases and Interfaces

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 구조적 타이핑

    구조적 타이핑(Structural Typing)은 타입의 이름이 아니라 모양(가진 속성과 그 타입)이 맞으면 호환된다고 보는 타입 시스템이다. TypeScript가 이 방식을 쓴다. Java처럼 선언된 이름과 상속 관계로 판단하는 방식은 명목적 타이핑(Nominal Typing)이라 한다.

  • 인덱스 시그니처

    인덱스 시그니처(Index Signature)는 속성 이름을 미리 다 알 수는 없지만 값의 모양은 알 때, [key: string]: T처럼 "어떤 키로 꺼내든 값은 T"라고 적는 TypeScript 문법이다. 키를 모르는 사전(dictionary) 모양의 객체를 표현할 때 쓴다.

  • 제네릭

    제네릭(Generics)은 타입을 매개변수처럼 받아, 여러 타입에 같은 로직을 재사용하면서도 타입 정보를 잃지 않게 하는 기능이다.

  • 타입 추론과 타입 검사

    타입 추론(Type Inference)은 표기가 없어도 컴파일러가 값의 타입을 정하는 단계이고, 타입 검사(Type Checking)는 정해진(추론됐거나 명시된) 타입을 코드가 지키는지 확인하는 단계다. 보통 추론이 먼저 일어나고, 그 결과를 기준으로 검사한다.

  • 템플릿 리터럴 타입

    템플릿 리터럴 타입(Template Literal Types)은 문자열 리터럴 타입을 템플릿 문자열 문법으로 조합해 새 문자열 유니언을 만드는 기능이다. 유니언을 넣으면 가능한 모든 조합이 나온다.

보기 옵션