타입스크립트 Type vs Interface

김서영·2024년 9월 26일
0

Type vs Interface


✨ 확장(상속)하는 법

🔶 interface

extends 키워드를 활용해 확장 가능

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

interface Student extends Person { // 확장(상속)
  school: string;
}

const SeoYeong: Student = {
  name: 'SeoYeong',
  age: 28,
  school: 'HNU'
}

🔶 type

& 기호를 활용해 확장 가능

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

type Student = Person & { // 확장(상속)
  school: string
}

const SeoYeong: Student = {
  name: 'SeoYeong',
  age: 28,
  school: 'HNU'
}

✨ 선언적 확장

🔶 interface

선언적 확장 가능
같은 이름의 interface를 선언하면, 자동으로 확장된다.

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

interface Person { // 선언적 확장
  gender: string;
}

const SeoYeong: Student = {
  name: 'SeoYeong',
  age: 28,
  gender: 'female'
}

🔶 type

선언적 확장 불가능

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

type Person = { // ❗️Error: Duplicate identifier 'Person'.
  gender: string;
}

=> 때문에 타입 객체의 확장성을 위해서는 interface를 활용하는 것이 좋다.

✨ 자료형(type)

🔶 interface

객체의 타입을 설정할 때 사용 가능하고, 원시 자료형에는 사용 불가능하다.

객체의 타입 설정

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

원시 자료형의 타입 설정

interface name extends string { // ❌ 불가능
  ...
}

🔶type

객체의 타입을 정의할 때도 사용이 가능하지만, 객체의 타입을 정의할 때는 interface를 활용하는게 더 좋다.

단순한 원시값이나 튜플, 유니온 등의 타입을 선언할 때 type을 활용하는 것이 좋다.

type Name = string; // primitive
type Age = number;
type Person = [string, number, boolean]; // tuple
type NumberString = string | number; // union
type Person = { // 객체는 interface를 사용하도록 하자.
  name: string,
  age: number,
  gender: string
}

✨ computed value 사용

🔶 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 사용이 가능하다.

type Subjects = 'Math' | 'Science' | 'Sociology';

type Grades = {
  [key in Subjects]: string;
}
profile
개발과 지식의 성장을 즐기는 개발자

0개의 댓글