타입스크립트 - 인터페이스, 타입별칭

변수에 인터페이스 활용

 

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

const pani: User = {
  age: 35,
  name: '빠니보틀'
}

interface 키워드를 통하여 자신이 원하는 형태의 타입을 정의할 수 있다.

 

 

함수에 인터페이스 활용

 

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

const pani: User = {
  age: 35,
  name: '빠니보틀'
}

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

getUser(pani)

 

함수의 매개변수에 타입을 지정함으로 인해, 해당 함수가 받는 매개변수를 특정할 수 있다.

 

 

함수의 스펙에 인터페이스 활용

 

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

const sum: SumFunction = (a: number, b: number): number => {
 return a + b
}

 

함수의 스펙을 정의할 때도 사용할 수 있다. 함수의 인자, 반환값의 타입을 정의한다.

 

 

인덱싱 인터페이스

 

 

interface StringArray {
  [index: number]: string
}

const arr: StringArray = ['a', 'b', 'c']
arr[0] // 'a'

arr[0] = 10 // 불가능

 

배열의 인덱싱 방식에 대해서 인터페이스로 정의할 수 있다. 

index는 당연히 number일 것이고, 해당 인덱스로 배열에 접근했을 때의 값이 string 이라고 StringArray 인터페이스에 정의되어 있다. 그렇기 때문에 arr[0]에 숫자를 지정할 수 없다.

 

 

인터페이스 딕셔너리 패턴

 

interface StringRegexDictionary {
  [key: string]: RegExp;
}

const obj: StringRegexDictionary {
  cssFile: 'css', // 불가능
  jsFile: /\.js$/, // 가능
}

 

key는 문자열의 형태이고, 해당 key로 접근했을 때의 값의 타입은 정규식이다.

그렇기 때문에 cssFile: 'css' 같은경우 'css'가 정규식이 아니라 문자열이기 때문에 에러가 발생한다.

 

 

인터페이스 확장(상속)

 

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

interface Developer extends Person {
  language: string;
}

const dev: Developer = {
  name: 'aB',
  age: 32,
  language: 'Typescript'
}

 

지금 정의하고자 하는 인터페이스 (Developer)에 다른 인터페이스 (Person)에 정의되어 있는 속성을 사용해야 할 경우 extends 키워드를 사용하여 상속받을 수 있다. 

 

 

타입별칭

 

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

 

type MyName = string

const name: MyName = 'aB'

 

string이나, number같이 기본값 뿐만아니라 interface 레벨에도 지정할 수 있다.

 

type Developer = {
  name: string;
  skill: string;
}

 

그렇다면 interface와 타입별칭의 차이는 무엇일까?

첫 번째로, VSCode상에서 프리뷰로 확인하였을 때 인터페이스와 타입의 결과가 다르다.

 

인터페이스 사용

 

타입 사용

두 번째는 타입의 확장 가능과 불가능 여부이다.

인터페이스는 확장이 가능하지만, 타입별칭은 확장이 불가능하다! 그렇기 때문에 가능한한 타입별칭 보다는 interface로 선언하는것이 좋다.