노트

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)이라 한다.

  • 타입 추론과 타입 검사

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

  • 템플릿 리터럴 타입

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

  • any와 unknown

    any는 그 값에 대한 타입 검사를 포기하는 타입이고, unknown은 타입을 아직 모르니 확인하기 전에는 쓰지 못하게 하는 타입이다. 둘 다 아무 값이나 받을 수 있지만, 꺼내 쓸 때가 다르다.

  • tsconfig 핵심 옵션

    tsconfig.json은 TypeScript 컴파일러(tsc)에게 어떤 파일을, 어떤 규칙으로 검사하고, 무엇을 출력할지 알려 주는 프로젝트 설정 파일이다. tsc --init으로 만들고, 이 파일이 있으면 tsc만 쳐도 프로젝트 전체를 컴파일한다(-w는 감시 모드, watch mode).

보기 옵션