[TypeScript] interface과 type 차이

interface VS type

• 공통점
  • 구조적 타이핑: 둘다 구조적 타이핑을 지원합니다. 즉, 객체의 형태가 중요하며, 이름이 아닌 구조로 타입이 결정 됩니다.
  • 확장 가능성: type과 interface는 모두 확장 가능 합니다. 즉, 기존의 타입이나 인터페이스에 새로운 속성을 추가하여 새로운 타입이나 인터페이스를 만들 수 있습니다.
  • 타입 체킹: 둘다 TypeScript의 타입 체킹에 사용되어 오류를 사전에 방지할 수 있게 합니다.
• 차이점
  • 확장(extends) 방식
    • interface: 선언 병합을 통해 확장 됩니다. 동일한 이름으로 여러번 선언할 경우, 자동으로 병합되어 확장 됩니다.
    • type: 인터섹션(교차 타입)을 사용해 확장 됩니다. 새로운 타입을 만들어 기존 타입과 합쳐야 합니다.
  • 선언 방식
    • interface: 주로 객체 형태의 타입을 정의하는데 사용 됩니다.
    • type: 유니온 타입, 튜플, 기본 타입등 거의 모든 것을 이름에 할당할 수 있습니다.
  • 구현상의 차이
    • interface: 클래스가 인터페이스를 구현할 수 있으며, 이를 통해 객체가 특정 구조를 따르도록 강제할 수 있습니다.
    • type: 인터페이스의 구현을 지원하지 않습니다.
  • 재할당 불가
    • interface: 동일한 이름으로 여러번 선언 가능 합니다.
    • type: 한번 선언된 타입은 재할당이 불가능 합니다.
• 결론
  • interface, type은 TypeScript에서 타입을 정의하는 강력한 방법
  • 일반적으로 인터페이스는 객체 지향 프로그래밍에 더 적합
  • 타입 별칭은 유니온이나 튜플 같은 고급 타입 작업에 더 적합

1. 선언 방식의 차이

• interface: 객체 타입 선언

interface Point {
    x: number;
    y: number;
}
// Point 인터페이스는 x와 y 속성을 가진 객체 타입을 정의합니다.

• type: 다양한 타입 선언

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

type Coordinate = Point | { z: number };
// Cordinate는 XYPoint 타입 또는 z 속서을 가진 객체 타입 입니다.

2. 확장 방식의 차이

• interface: 선언 병합을 통한 확장

interface User {
    name: string;
}

interface User {
    age: number;
}

class Student implements User {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age
    }
}

const student: Student = new Student('홍길동', 30);

student

// 결과 Student { name: '홍길동', age: 30 }

• type: 인터섹션을 사용한 확장

type UserName = {
    name: string;
}

type UserAge = {
    age: number;
}
type UserWithAge = UserName & UserAge;

const personal: UserWithAge = {
    name: '홍순영',
    age: 22,
}

personal

{ name: '홍순영', age: 22 }

3. 구현상의 차이

• interface: 클래스 구현

interface Greeter {
    greet(): string;
}

class EnglishGreeter implements Greeter {
    greet() {
        return "Hello~!";
    }
}

const englishGreeter:EnglishGreeter = new EnglishGreeter();
englishGreeter.greet();

// 결과: 'Hello~!'

• type: 객체 구현 불가

type Greeter = {
    greet(): string;
};

// type은 클래스에서 구현될 수 없습니다. 다만, 클래스에 타입을 할당하는 것은 가능합니다.
class EnglishGreeter {
    greet() {
        return "Hello!";
    }
}

재할당 불가

• interface: 재할당 가능

interface People {
    name: string;
}

interface People {
    age: number;
}

• type: 재할당 불가능

type PeopleType = {
    name: string;
}

// 아래 코드는 오류를 발생시킵니다. 이미 선언된 타입을 다시 선언할 수 없습니다.
// type PeopleType = {
//     age: number;
// };