2.4.4. type과 interface 키워드의 차이점은 무엇인가요?

[fe-Jay]

📝 74p ~ 76p

❓ type 과 interface 키워드의 차이점은 무엇인가요?

교재 76p에는 '우형에서는 type 과 interface 키워드를 어떻게 사용할까? 라는 스토리가 있습니다. type 과 interface의 차이점과 각 키워드를 사용했을 때 장,단점으로는 무엇이 있을까요?

[hyeonseong2023]

type 과 interface의 차이점

1. 확장

// interface : 상속을 통한 확장
interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

// type : 교차 타입 (&)을 통한 유형 확장
type Animal = {
  name: string;
}

type Bear = Animal & { 
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

2. 추가

// interface : 기존 인터페이스에 새 필드 추가
interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

// type : 유형은 생성된 후에는 변경 불가
type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

 // Error: Duplicate identifier 'Window'.

각 기능의 장,단점

type 장점

1. 교차 타입 (Intersection Types): & 연산자를 사용하여 여러 타입 결합
2. 조건부 타입 (Conditional Types): 타입 연산에 대한 보다 유연한 접근 가능
3. 유니언 타입 (Union Types): 여러 가능한 타입 정의

   type 단점

4. 재선언 불가: 같은 이름의 타입을 여러 번 선언 불가
5. 추가적인 속성 정의 불가: 선언 후 타입에 추가적인 필드를 추가 불가

interface 장점

선언 병합: 같은 이름의 인터페이스를 여러 번 선언할 수 있으며, 모든 선언 병합 상속: extends 키워드를 사용하여 기존의 인터페이스 확장 가능

interface 단점

제한된 기능: 교차 타입과 같은 고급 타입 연산은 지원 불가 상속 구조의 복잡성: 다중 상속 시 구조가 복잡해질 수 있음

[gwangminjun]

상속

interface

extends 키워드를 이용

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

interface developer extends Person { // 확장(상속)
  language: string;
}

const minjun: developer = {
  name: 'minjun',
  age: 28,
  language: 'java'
}

type

교차 타입(&)을 이용

type Person = {
  name: string,
  age: number
}

type developer = Person & { // 확장(상속)
  language: string
}

const jieun: Student = {
  name: 'jieun',
  age: 27,
  school: 'HY'
}

computed value

• computed value : 표현식을 이용해서 객체의 key 값을 정의

  interface

  computed value 사용 불가

  
  type Subjects = 'math' | 'science' | 'sociology';

interface Grades { [key in Subjects]: string; // ❗️Error: A mapped type may not declare properties or methods. }

### type
computed value 사용 가능
```ts
type Subjects = 'Math' | 'Science' | 'Sociology';

type Grades = {
  [key in Subjects]: string;
}

사용

정해진 컨벤션이 있다면 해당 컨벤션을 사용하고
없다면 각 특징을 파악하여 사용해야할 시점에 특징에 맞게 사용하면 될거같습니다~

reference

• https://velog.io/@wlwl99/TypeScript-type%EA%B3%BC-interface%EC%9D%98-%EC%B0%A8%EC%9D%B4
• https://velog.io/@1998yuki0331/%EB%82%98-%EB%B3%B4%EB%A0%A4%EA%B3%A0-%EC%A0%95%EB%A6%AC%ED%95%98%EB%8A%94-TypeScript-%ED%95%B8%EB%93%9C%EB%B6%81

[Clt689]

type과 interface의 차이점

1. 선언 병합(Declaration Merging)

• interface : 같은 이름으로 여러 번 선언된 인터페이스는 하나로 병합됩니다. 즉, 동일한 이름의 인터페이스를 여러 파일이나 위치에서 선언하면 이들이 자동으로 하나의 인터페이스로 합쳐집니다.
• type : 타입 별칭은 선언 병합이 되지 않습니다. 동일한 이름의 타입 별칭을 여러 번 선언할 수 없으며, 이렇게 하면 컴파일 오류가 발생합니다.

2. 확장 및 구현

• interface : 인터페이스는 다른 인터페이스를 상속(extends)할 수 있으며, 클래스가 이를 구현(implements)할 수 있습니다. 또한, 인터페이스 간의 확장은 다중 상속이 가능합니다.
• type : 타입은 &(교차 타입) 연산자를 사용해 다른 타입과 결합할 수 있습니다. 하지만 인터페이스처럼 클래스를 통해 구현할 수는 없습니다.

3. 표현 가능한 타입

• type : 유니온 타입, 튜플, 기타 복잡한 타입(예: 함수 타입) 등을 정의할 수 있습니다. type은 단순한 객체 형태의 타입 외에도 다양한 형태의 타입을 정의하는 데 더 유연합니다.
• interface : 주로 객체 타입의 구조를 정의하는 데 사용되며, type만큼 유연하지는 않습니다. 하지만 최신 타입스크립트에서는 인터페이스도 함수 타입을 정의할 수 있습니다.

4. 명확한 목적

• interface : 객체의 구조를 정의하거나 클래스를 구현할 때 사용합니다.
• type : 보다 광범위하게 사용되며, 복잡한 타입을 구성하거나 별칭을 정의할 때 사용됩니다.

---

장점과 단점

interface의 장점👍

• 클래스와의 호환성: 클래스를 구현할 때 인터페이스를 사용할 수 있습니다. 이는 객체 지향 프로그래밍에서 특히 유용합니다.
• 선언 병합: 인터페이스는 동일한 이름으로 여러 번 선언하여 확장할 수 있어, 라이브러리나 API의 타입 정의에서 특히 유리합니다.
• 가독성: 주로 객체 구조를 정의하는 데 사용되므로, 객체의 형태를 명확하게 표현할 수 있습니다.

  interface의 단점

• 제한된 타입 표현: 복잡한 유니온 타입이나 튜플을 정의하는 데는 적합하지 않습니다.
• 유연성 부족: 타입을 결합하거나 교차 타입을 표현하는 데는 type보다 덜 유연합니다.

type의 장점👍

• 유연성: 복잡한 타입, 유니온 타입, 교차 타입, 튜플 등을 쉽게 표현할 수 있습니다.
• 간결함: 한 줄로 여러 타입을 조합하여 새로운 타입을 정의할 수 있어 코드가 간결해집니다.
• 표현력: 함수 타입, 유니온 타입 등 다양한 표현을 지원하여 복잡한 타입 구조를 쉽게 정의할 수 있습니다.

  type의 단점

• 선언 병합 불가: 타입 별칭은 동일한 이름으로 여러 번 선언할 수 없기 때문에 선언 병합을 통한 확장이 불가능합니다.
• 클래스와의 제한된 호환성: 클래스의 구현에 직접 사용할 수 없습니다.

[BaekWeb]

type 과 interface의 차이점과 각 키워드를 사용했을 때 장,단점으로는 무엇이 있을까요?

interface 의 장점

• 확장성 : interface 와 interface를 병합 하여 확장 시킬 수있습니다.
• 구조적 타이핑: 객체지향프로그래밍에서 클래스와 연동이 잘됨

interface 의 단점

• type에 비해 제한적 : 타입을 정의할 수있지만, 유니온타입, 튜플 등 복잡한 타입을 다루기에 type에 비해 제한적
• 복잡한 연산을 지원하지 않음

type의 장점

• 유연성 : 다양한 타입의 조합을 지원 (유니온, 교차, 튜플 등)
• 복잡성 : 복잡한 타입을 정의할 때 유리
• 조건부 타입 같은 타입 연산 가능

type의 장점

• 확장성의 제한 : interface 와 달리 자동으로 병합되지 않아 타입을 확장하려면 새로운 타입 정의
• 가독성 : 복잡한 타입을 사용할 때 타입의 정의가 읽기 어려울 수 있음 (유니온, 교차 타입)

type과 interface의 차이점은? type은 interface에 비해 타입을 정의하는데 자유롭고 복잡한 연산을 지원하지만 복잡해지면서 타입의 정의를 읽기 어려울 수있다는 차이점이있다. 또한 interface의 경우 확장성이 좋은 반면 type의 경우 확장을 하기위해서는 새로운 타입을 정의해야하는 번거로움이 있다.

[fe-Jay]

차이점

TS에서 type 과 interface 키워드는 공통적으로 타입을 정의할 때 사용하지만, 몇 가지 중요한 차이점이 존재함.

	interface	type
확장성 Extensibillity	1. extends 키워드를 사용하여 타입 확장 가능. 2. 선언 병합이 가능하여, 동일한 이름의 interface 선언시 자동 병합됨.	1. 교차타입 & 을 사용하여 타입 확장 가능. 2. 선언 병합 불가능. 동일한 이름의 타입 재선언 불가.
표현력 Expressiveness	1. 객체 리터럴 타입(class)을 정의하는데 주로 사용2. 함수, 클래스 등도 정의할 수 있지만, 복잡한 타입 표현에 제한 있음.	1. 모든 종류의 타입 정의 (union intersection tuple …) 2. 조건부, 매핑된 타입 등 고급 타입기능 사용 가능.
계산된 속성 Computed Properties	계산된 속성 이름 사용 불가능.	계산된 속성 이름 직접 사용 가능.
성능	타입 검사시 더 빠를 수 있음.(ex. 복잡한 타입 계층)	복잡한 타입 연산을 수행할 때 컴파일 시간이 더 소요될 수 있음.
사용사례	1. 객체의 구조를 정의할 때 주로 사용. 2. 라이브러리나 API를 설계할 때 선호(선언병합이 가능하기 때문)	1. 모든 종류 타입의 별칭을 정의할 때 사용. 2. 복잡한 타입 로직이 필요한 경우 선호.

각 키워드의 장단점 및 권장사항

1. 팀 내에서 일관된 타입 스타일을 유지하는 것이 중요함. 한 프로젝트 내에서는 가능한 interface type 중 한 가지 방식을 주로 사용하는 것을 권장함.
2. 외부에 공개되는 API를 개발할 때는 interface 를 사용하는 것이 유연한 확장성을 제공함.
3. 복잡한 타입 연산이 필요한 경우 type 을 사용하는 것이 더 적합함.
4. 대규모 프로젝트에서는 interface 가 성능면에서 다소 유리할 수 있음.

코드 비교

  // 1. API 응답 타입 정의 (interface 사용)
  interface User {
    id: number;
    name: string;
    email: string;
  }

  interface ApiResponse { // 응답형태와 같은 객체형태 정의
    data: User[];
    meta: {
      total: number;
      page: number;
      perPage: number;
    };
  }

  // API 응답을 처리하는 함수
  function processApiResponse(response: ApiResponse) {
    response.data.forEach(user => {
      console.log(`${user.name} has email ${user.email}`);
    });
    console.log(`Total users: ${response.meta.total}`);
  }

  // 2. 복잡한 타입 정의 (type 사용)
  type Status = 'pending' | 'processing' | 'completed' | 'failed';

  type Job<T> = {
    id: number;
    status: Status;
    data: T; // 제네릭 타입
    createdAt: Date;
    completedAt?: Date;
  };

  function processJob<T>(job: Job<T>) { // 제네릭 타입(Job<T>)
    console.log(`Processing job ${job.id} with status ${job.status}`);
  }