dev.syw

interface와 type의 차이, 객체 타입, 선택적·readonly 프로퍼티, 확장과 교차를 배운다.

인터페이스와 타입 별칭

객체의 "모양(shape)"을 정의하는 두 가지 도구가 interfacetype 입니다. 둘은 비슷하지만 쓰임새에 차이가 있습니다. 객체 타입을 깔끔하게 표현하는 법을 익혀 봅시다.

학습 목표

  • interface 로 객체 타입을 정의한다.
  • 선택적 프로퍼티와 readonly 를 사용한다.
  • interfacetype 의 차이를 안다.
  • 확장(extends)과 교차(&)로 타입을 조합한다.

객체 타입 정의

객체가 어떤 속성을 가지는지 interface 로 선언합니다.

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

const user: User = { name: '민수', age: 20 };

선언한 속성이 빠지거나 타입이 다르면 오류가 납니다.

const wrong: User = { name: '영희' }; // ❌ age가 없음

선택적 프로퍼티

? 를 붙이면 있어도 되고 없어도 되는 속성이 됩니다.

interface Profile {
  name: string;
  bio?: string;   // 선택적
}

const p1: Profile = { name: '민수' };              // OK
const p2: Profile = { name: '영희', bio: '개발자' }; // OK

readonly 프로퍼티

readonly 는 한 번 정해지면 다시 바꿀 수 없는 속성입니다.

interface Point {
  readonly x: number;
  readonly y: number;
}

const point: Point = { x: 10, y: 20 };
point.x = 5; // ❌ 읽기 전용 속성은 수정 불가

💡 TIPreadonly 는 "이 값은 절대 바뀌지 않는다"는 의도를 코드로 못 박는 방법입니다. 좌표·ID처럼 불변이어야 하는 값에 쓰세요.

타입 별칭 (type)

type 키워드로도 객체 모양을 정의할 수 있습니다. 또한 유니온·튜플 등 객체가 아닌 타입에도 이름을 붙일 수 있습니다.

type User = {
  name: string;
  age: number;
};

type ID = string | number;       // 유니온에 이름 붙이기
type Pair = [string, number];     // 튜플에 이름 붙이기

interface vs type

대부분의 객체 타입은 둘 다 쓸 수 있습니다. 차이는 다음과 같습니다.

구분interfacetype
객체 모양OO
유니온·튜플 등XO
선언 병합O (같은 이름 합쳐짐)X
확장 방법extends& (교차)

💡 TIP — 일반적인 권장: 객체·클래스 모양은 interface, 유니온이나 복잡한 조합은 type. 한 프로젝트 안에서 일관성만 지키면 됩니다.

확장 — extends

interface 는 다른 인터페이스를 상속받아 속성을 더할 수 있습니다.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const d: Dog = { name: '바둑이', breed: '진돗개' };

교차 타입 — &

type& 로 여러 타입을 합칩니다. 두 타입의 속성을 모두 가진 타입이 됩니다.

type Animal = { name: string };
type Pet = { owner: string };

type PetAnimal = Animal & Pet;

const cat: PetAnimal = { name: '나비', owner: '민수' };

요약

  • interfacetype 으로 객체의 모양을 정의한다.
  • ? 는 선택적 프로퍼티, readonly 는 수정 불가 프로퍼티.
  • type 은 유니온·튜플 등 객체가 아닌 타입에도 쓸 수 있다.
  • 확장은 interfaceextends, 조합은 type&.
  • 객체엔 interface, 복잡한 조합엔 type을 쓰면 무난하다.

댓글 0

TypeScript” 강좌에 대한 댓글입니다.

댓글을 작성하려면 로그인이 필요합니다.