타입스크립트 인터페이스와 타입별칭 특징과 차이점

 

인터페이스와 타입별칭

안녕하세요. 김테이입니다. 오늘은 타입스크립트의 인터페이스와 타입별칭에 대해서 정리해보겠습니다. 타입스크립트를 사용하면 반드시 사용하게 되는 개념이라 잘 알아두면 좋을 것 같습니다. 😁

 

🔵 타입스크립트 인터페이스

- 타입스크립트에서의 인터페이스는 객체와 함수의 스펙을 정의할 수 있다.

- 객체의 스펙으로는 속성과 속성의 타입을 정의한다.

- 함수의 스펙으로는 파라미터와 반환 타입을 정의한다.

 

인터페이스 기본 문법

interface 인터페이스_이름 {
	속성?: 타입;
}

- 인터페이스의 이름, 속성과 타입을 만들어두고 사용한다.

인터페이스 정의

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

- 스펙 정의로 인해 속성과 속성의 타입이 기본 문법 토대로 정의되어 있다.

- 숫자타입과 문자열타입으로 이루어진 User라는 인터페이스다.

변수에 인터페이스 활용

var tay: User = {
    age: 30,
    name: '테이'
}

 

- 위에 정의한 인터페이스를 변수에 활용해보았다.

- 이제 tay라는 변수는 User라는 타입이며 해당 속성들을 정의한대로 구성되어야 한다.

 

함수에 인터페이스 활용

function getUser(user: User) { 
	console.log(user);
}

- 출력하는 함수를 정의했다.

- 파라미터는 User라는 타입의 형식으로만 받을 수 있다.

 

getUser(1); → number 타입이라 에러
getUser('어쩌구'); → string 타입이라 에러
getUser(tay); → 위에 정의한 User 타입의 변수라 OK

 

인터페이스 함수 타입 (스펙 정의)

interface SumFunction {
  (a: number, b: number): number;
}

var sum: SumFunction;

sum = function (a: number, b: number): number {
  return a + b;
}

- 함수 모양의 인터페이스다.

- 파라미터와 반환 타입이 정의하여 사용한다.

 

인터페이스 확장

- 인터페이스간 상속을 받아서 확장이 가능하다.

 

(1) 기본 인터페이스 정의

interface Person {
  name: string;
  age: number;
  ... 등 100개
}

 

 

(2) 확장된 인터페이스 정의 → ❌

interface Developer {
  name: string; // → 중복
  age: number; // → 중복
  ... 등 100개 // → 중복
  language: string; // ← 고작 1개 추가됨
}

 

- 고작 속성 1개가 추가되었는데 나머지 똑같은 속성들도 일일이 입력해야한다면 엄청나게 번거로울 것 같다.

 

(3) 인터페이스를 통해 확장하기 → 👍

interface Developer extends Person {
  language: string; // <-- Person 인터페이스에 얘만 추가하겠다.
}

 

- extends를 활용하면 편하게 확장할 수 있다.

---

🔵 타입스크립트 타입 별칭

- 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

- 새로운 타입 값을 생성하는 것이 아닌 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것

 

타입별칭 사용

string 타입을 사용할 때

const name: string = 'capt';

 

 

타입 별칭을 사용한다면

// 너의 이름은 MyString
type MyString = string;

// 나와라 MyString
const name: MyString = 'capt';

 interface 같이 복잡한 타입에도 별칭 부여가 가능

type Developer = {
  name: string;
  skill: string;
  // ... 어쩌구 100개
}

 

---

🔵 인터페이스와 타입 별칭의 차이점

- 프리뷰의 차이

- 인터페이스는 확장 가능, 타입별칭은 확장이 불가능

- 공식문서에서 가능한 type보단 interface를 사용하라고 함

' 좋은 소프트웨어는 언제나 확장이 용이해야 한다 어쩌구저쩌구 ' 

 

인터페이스와 타입별칭 프리뷰의 차이

확실히 타입별칭은 참조하기 쉽게 이름을 붙혀준 거라 더 친절하다. 😉

하지만 ... 고민되면 그냥 인터페이스로 쓰자

 

---

 

참고 강의 : https://taylog.tistory.com/217

[강의리뷰] 실전 프로젝트로 배우는 타입스크립트 시리즈 강의 후기 (캡틴판교) 😱 타입스크립