[ TypeScript ] Interface & Intersection Type

type vs interface

---

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부이다.

인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다.

따라서, 가능한 한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다.

 

Interface 사용법

---

기본 정의

---

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

const person1: Person = { name: 'js', age: 20 };
const person2: Person = { name: 'ljs', age: 'twenty' }; // Error

 

 

선택 속성

---

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

const person1: Person = { name: 'js' };

 

 

Read only 속성

---

인터페이스로 객체를 처음에 생성할 때만 값을 할당할 수 있고 그 이후에는 변경할 수 없는 속성을 의미한다.

 

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

const person1: Person = { name: 'js' };
person1.name = 'ljs'; // Error - person1의 이름을 바꿀려고 해서 에러가 난다. 

let readOnlyArr: ReadonlyArray<number> = [1,2,3];
readOnlyArr.splice(0,1); // error
readOnlyArr.push(4); // error
readOnlyArr[0] = 100; // error

 

 

Index 타입

---

인터페이스에서 속성의 이름을 구체적으로 정의하지 않고 어떤 값의 타입만 정의하는 것이 index type이다.

 

interface Person {
  readonly name: string;
  [key: string]: string | number; // [key string] <-- key에 어떤 string도 들어올 수 있다. 
  				 // value에는 string 또는 number이 들어올 수 있다. 
}

// 예제
const p1: Person = {name: 'js', birthday: '비밀', age: 20};

 

 

함수 타입

---

interface Print {
  (name: string, age: number): string; // 왼쪽은 매개변수이고 오른쪽은 반환 타입이다.
}
// type Print = (name: string, age: number) => string;

const getNameAndAge: Print = function (name, age) {
  return `name: ${name}, age: ${age}`;
};

 

 

Interface 확장

---

extends를 사용하여 확장이 가능하고 새로운 interface를 만들 수 있다.

 

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

// extends로 확장을 해서 새로운 interface를 만들었다. 
// Person interface를 활용하면서 괄호안에 있는 birth를 추가한 interface Korean을 만들어줬다. 
interface Korean extends Person {
  birth: 'KOR';
}

// 아래 코드는 위 두개의 코드와 동일하다. 
interface Korean {
  name: string;
  age: number;
  birth: 'KOR';
}

interface Developer {
  job: 'developer';
}

interface KorAndDev extends Korean, Developer {}

interface KorAndDev {
  name: string;
  age: number;
  birth: 'KOR';
  job: 'developer';
}

 

 

Intersection Type: 여러 타입을 모두 만족하는 하나의 타입

---

Person과 Developer라는 interface가 있을때 두 개의 interface를 intersection type을 이용해서 하나로 합칠 수 있다. 

 

 

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

interface Developer {
	name: string;
  skill: string;
}

type DevJob = Person & Developer;

const nbcPerson: DevJob = {
  name: 'a',
  age: 20,
  skill: 'ts',
};