Typescript ( type vs interface )

type

• 별칭(alias)을 만들어주는 역할을 합니다. 객체뿐만 아니라, 기본 타입, 유니언, 튜플, 함수 등 거의 모든 TypeScript 타입을 조합할 수 있어 interface보다 좀 더 유연한 타입 조합이 가능합니다.
• 유니언(|) 또는 인터섹션(&)을 사용할 수 있어 강력합니다.
• 고급 타입 조작이 필요할 경우 (유니언, 튜플, 조건부 타입 등)

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

const user: User = {
  id: 1,
  name: "Bob"
};

// & 을 이용한 교차 타입 
type Name = { name: string };
type Age = { age: number };

type Person = Name & Age;

const person: Person = {
  name: "Tom",
  age: 30
};

// 튜플 타입
type RGB = [number, number, number];

const color: RGB = [255, 0, 0];

// 배열 타입
type StringArray = string[];

const arr: StringArray = ["a", "b", "c"];

// 함수 타입
type Greeter = (name: string) => string;

const greet: Greeter = (name) => `Hi, ${name}`;

 

interface

• 객체의 구조(Shape) 를 정의하는 데 사용됩니다. 주로 클래스나 객체의 타입을 정의할 때 사용합니다.
• extends 키워드로 다른 인터페이스를 확장할 수 있습니다.
• 같은 이름으로 여러 번 선언하면 자동으로 병합할 수 있습니다. (선언 병합)

// 객체 타입 정의
interface Person {
  name: string;
}

// extends으로 인터페이스 확장
interface Employee extends Person {
  employeeId: number;
}

const emp: Employee = {
  name: "John",
  employeeId: 123
};

// 함수 타입 정의
interface Greeter {
  (name: string): string;
}

const greet: Greeter = (name) => `Hello, ${name}`;

// 배열 타입 정의
interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ["a", "b", "c"];

// 선언 병합
interface Point {
  x: number;
}
interface Point {
  y: number;
}

const p: Point = {
  x: 10,
  y: 20
}; // 병합된 타입: { x: number, y: number }

 

정리

	type	interface
선언 방식	type Sample = {}	interface Sampe {}
확장 여부	& 으로 조합 가능	extends 으로 확장 가능
선언 병합 여부	불가능	가능
유니언 / 교차 여부	가능	불가능
사용 용도	객체 + 유니언 / 튜플 등 다양한 형태에 적합	주로 객체 및 클래스 타입 정의에 적합

 

헷갈리기 쉬운 Tuple vs Array

	Tuple (튜플)	Array (배열)
특징	정해진 개수와 정해진 타입을 가진 배열	모두 같은 타입을 가진 배열
사용용도	서로 다른 타입의 값을 순서대로 나열	같은 타입의 값 나열
예시	[string, number, boolean]	string[], number[]