[ Typescript ] - interface와 type의 차이

interface와 type의 차이

interface와 type 둘 다 타입스크립트에서 타입을 정의하기 위해 사용하며, 유사하지만 다음과 같이 차이를 지닌다. 

1. interface

interface는 주로 구조적인 타입을 정의할 때 사용한다.

interface의 선언

interface [interface명] { } 
ex) interface Person {}

interface는 또한아래와 같이 동일한 명칭을 가진 interface를 여러 개 구현하는 것이 가능하며, 이때 해당 interface를 타입으로 선언하여 사용할 경우, 해당 interface 명칭을 가진 속성을 모두 포함하게 된다.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
    name: 'mihee',
    age: 27
}

또한 interface의 경우 implements를 통해 class를 확장할 수 있다.

interface Person {
    eat(): void;
}

class Adult implements Person {
    eat(): void {
        console.log('eat~~')
    }
}

 

2. type

type의 경우 주로 유니온, 인터섹션, 매핑 등의 타입을 정의하기 위해 사용한다.

type이 interface보다 좀 더 복잡한 타입 선언이 가능하고, 더욱 높은 유연성과 확장성을 가진다.

type의 선언

type [type명] = {}
type Person = {}

type의 경우 |와 & 를 함께 사용할 수 있다.

type Snack = "Cookie" | "Chocolate";

type Meal = "Noodle" | 'Rice'

type Food = Snack & Meal

* 유니온 : 여러 타입 중 하나의 타입이 될 수 있음을 의미한다. |를 사용하며, 예를 들어 type MyType = { A | B } 인 경우 MyType의 경우 A가 될 수 도 있고, B가 될 수 도 있다.
* 인터섹션 : 두 개 이상의 타입을 결합하는 것을 의미한다. 예를 들어 아래 코드를 보면 Person과 Student 타입을 &를 이용해서 결합하여 새로운 타입을 만들어 내는 것을 볼 수 있다.

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

type Student = {
	grade: number;
    score: number;
}

type StudentPerson = Person & Student;

const studentPerson: StudentPerson = {
	name: 'mihee',
    age: 27,
    grade: 3,
    score: 50
}

* 매핑 : 매핑의 경우 type의 속성에 대해 변환을 적용해 줄 수 있도록 해준다.

type CustomerInfo = {
	name: string
	phone: number;
}

type StringifyCustomerInfo = {
	[ Key in keyof CustomerInfo ]: string;
}

const customer1: CustomerInfo = {
    name: 'mihee',
    phone: 1012345678
}

const customer2:StringifyCustomerInfo = {
	name: 'mihee',
    phone: '1012345678'
}

- 매핑 활용하기 ex) 속성을 optional 하게

type CustomerInfo = {
  name: string;
  phone: number;
};

type PartialCustomer = {
  [Key in keyof CustomerInfo]?: CustomerInfo[Key];
};

const customerPartialInfo: PartialCustomer = {name:'mihee'}

- 매핑 활용하기 ex) 속성에 null과 undefined 허용

type CustomerInfo = {
  name: string;
  phone: number;
};

type NullOrUndefiledCustomerInfo = {
  [Key in keyof CustomerInfo]: CustomerInfo[Key] | null | undefined;
};

const customerNullOrUndefined = {
    name: 'mihee',
    phone: undefined
}