[TypeScript] Type Alias VS Interface

📌 Interface

 타입스크립트의 인터페이스는 객체가 가질 수 있는 다양한 구조들을 직접 타입으로 만들 수 있는 방법입니다. 즉, 객체의 틀 또는 설계도라고 할 수 있습니다. 

 interface 키워드를 통해 인터페이스를 정의할 수 있습니다. 구분자로는 세미콜론(;) 또는 콤마(,) 를 사용하며, 아예 구분자를 사용하지 않을 수도 있습니다. 

 인터페이스 내부는 속성과 메서드에 대한 타입만 정의할 뿐, 구현은 하지 않습니다. 

interface Person {
  name: string;
  age: number;
  greeting(): void;
}

let john: Person = {
  name: "John",
  age: 20,
  greeting: () => {
    console.log("Hello");
  },
};

 

 또한 인터페이스 내부에서의 함수 타입 표현은 2가지 방법으로 가능합니다. 

• 함수이름(매개변수): 리턴타입
• 함수이름: (매개변수) => 리턴타입

interface Func {
    sum(a: number, b: number): number;
    sum: (a: number, b: number) => number;
}

 

✅ 선택적 프로퍼티 (Optional Properties)

 물음표(?) 기호를 통해 필수로 구현되지 않아도 되는 프로퍼티를 정의할 수 있습니다. 

interface Person1 {
  name: string;
  age: number;
}
interface Person2 {
  name: string;
  age?: number;
}

// Error: 'age' 속성이 '{ name: string; }' 형식에 없지만 'Person' 형식에서 필수입니다.
let john: Person1 = { 
  name: "John",
};

let alice: Person1 = { // OK
  name: "Alice",
};

 

✅ 인터페이스 확장

 extends 키워드를 사용하여 인터페이스를 확장할 수 있습니다. 여러 인터페이스를 확장하고 싶다면, 콤마(,) 를 사용하여 여러 개의 인터페이스를 확장합니다. 

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

interface Student extends Person {
  major: string;
}

interface Developer extends Person, Student {
  position: string;
}

let student: Student = {
  name: "John",
  age: 20,
  major: "Computer Engineering",
};

let dev: Developer = {
  name: "John",
  age: 20,
  major: "Computer Engineering",
  position: "frontend",
};

 

✅ 선언 병합 (Declaration Merging)

 같은 이름으로 정의된 인터페이스는 서로 병합됩니다. 

interface Animal {
  name: string;
}
interface Animal {
  honey: boolean;
}
const bear: Animal = {
  // interface 는 선언 병합 가능
  name: "honey bear",
  honey: true,
};

---

📌 Type Alias

 타입 별칭(Type Alias)는 사용자가 정의하는 타입 변수입니다. 

 type 키워드를 통해 정의할 수 있습니다. 인터페이스와 마찬가지로 선택적 프로퍼티를 사용할 수 있습니다. 

type Person = {
  name: string;
  age?: number;
};
let alice: Person = {
  name: "Alice",
};

 

✅ 타입 조합

 인터페이스는 extends 키워드로 확장이 가능한 반면, 타입 별칭은 &(ampersand)를 사용해서 타입을 조합합니다. 

type Person = {
  name: string;
  age?: number;
};

type Student = Person & {
    major: string;
}

let alice: Student = {
  name: "Alice",
  age: 20,
  major: "Computer Engineering"
};

---

📌 차이점 - 선언 병합

 인터페이스는 같은 이름으로 여러 인터페이스를 선언하더라도, 선언 병합이 일어납니다.

 반면 타입 별칭은 같은 이름으로 선언 시, 식별자 중복 에러가 발생합니다. 

// interface 는 선언 병합 가능
interface Animal {
  name: string;
}
interface Animal {
  honey: boolean;
}
const bear: Animal = {
  name: "honey bear",
  honey: true,
};

// type alias 는 선언 병합이 불가능
// Error: 'Cat' 식별자가 중복되었습니다.
type Cat = {
  name: string;
};
type Cat = {
  male: boolean;
};
const cat1: Cat = {
  name: "A",
  male: true,
};

---

📌 차이점 - 확장

 인터페이스는 extends 키워드를 통해 확장이 가능하지만,

 타입 별칭은 & 기호를 사용하여 확장합니다. 

// 인터페이스 확장
interface Person {
  name: string;
  age: number;
}

interface Student extends Person {
  major: string;
}

// 타입 별칭 확장
type Person = {
  name: string;
  age?: number;
};

type Student = Person & {
    major: string;
}