타입스크립트 interface/type 알아보기

1. Interface

타입스크립트의 interface는 객체의 구조를 정의하는 데 사용한다.

1-1. 기본적인 인터페이스

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

const user: User = {
  name: "Alice",
  age: 30,
};

 

1-2. 선택적 속성

interface Product {
  id: number;
  name: string;
  price?: number; // 선택적 속성
}

const product: Product = {
  id: 1,
  name: "Laptop",
  // price는 선택적이므로 생략 가능
};

 

1-3. 읽기 전용 속성

interface Book {
  readonly title: string;
  author: string;
}

const book: Book = {
  title: "1984",
  author: "George Orwell",
};

// book.title = "Brave New World"; // 오류: 읽기 전용 속성이므로 수정 불가

 

1-4. 함수 타입을 포함하는 인터페이스

interface Callback {
  (message: string): void;
}

const logMessage: Callback = (message) => {
  console.log(message);
};

logMessage("Hello, TypeScript!");

 

1-5. 인터페이스 상속

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

const dog: Dog = {
  name: "Rex",
  bark: () => console.log("Woof!"),
};

 

2. Type

타입스크립트의 타입 별칭(Type Alias)은 특정 타입에 이름을 붙여서 재사용할 수 있게 해주는 기능이다. 인터페이스와 비슷하지만, 좀 더 다양한 타입을 정의할 수 있다.

 

2-1. 기본 타입 별칭

type Point = {
  x: number;
  y: number;
};

const point: Point = {
  x: 10,
  y: 20,
};

 

2-2. 유니온 타입

type StringOrNumber = string | number;

const value1: StringOrNumber = "Hello";
const value2: StringOrNumber = 42;

 

2-3. 튜플 타입

type StringNumberTuple = [string, number];

const tuple: StringNumberTuple = ["Alice", 30];

 

2-4. 함수 타입

type GreetFunction = (name: string) => void;

const greet: GreetFunction = (name) => {
  console.log(`Hello, ${name}!`);
};

 

2-5. 객체와 유니온, 교차 타입 결합

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

type Admin = User & {
  role: string;
};

const admin: Admin = {
  id: 1,
  name: "Bob",
  role: "admin",
};

 

 

주요 차이점

특징	interface	type
상속	다른 인터페이스를 상속할 수 있음	교차 타입(&)을 사용하여 결합 가능
유연성	객체 형태에 적합	기본 타입, 유니온, 튜플 등 다양한 타입 정의 가능
구현	클래스에서 구현 가능	직접 구현 불가
확장성	기존 인터페이스에 추가 가능	새로운 타입을 생성해야 함
선언 병합	동일 이름의 인터페이스를 여러 번 선언 가능	선언 병합이 불가능함
사용 용도	주로 객체 구조 정의	다양한 타입 정의(객체, 유니온 등)