[TypeScript] 타입스크립트 기초 (2) - 인터페이스와 타입 별칭

 

 인터페이스란?

 

타입스크립트의 인터페이스는 항상 특정 형식을 준수하는 데이터만 받겠다는 상호간의 약속을 의미한다.

파라미터에 인터페이스를 정의하고 함수 호출할 때 파라미터에 정의한 인터페이스의 규칙을 따랐는지 확인한다.

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

// 변수에 인터페이스 활용
var ian: User = {
  age: 28,
  name: '이안'
}

// 함수에 인터페이스 활용
function getUser(user: User) {
  console.log(user);
}
const person = {
  age: 28,
  name: 'ian'
}
getUser(person);

 

함수의 전체적은 모습까지 인터페이스가 정의할 수 있다는 게 장점.

라이브러리를 만들거나 협업할 때 함수의 정의 잡을 때 사용.

// 함수의 스펙(구조)에 인터페이스 활용
interface SumFunction {
  (a: number, b: number): number;
}

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

인덱싱

배열(Array) 접근 방식. 몇번째 있는 요소에 들어가는 타입도 정해줄 수 있다.

interface StringArray {
  [index: number]: string;
}

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

딕셔너리 패턴

객체(Object) 접근 방식

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

// 왼쪽 속성(string) 오른편 정규표현식(RegExp)

var obj: StringRegexDictionary = {
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

상속

extends라는 키워드를 사용해서 인터페이스를 확장한다.

// 인터페이스 확장
interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  //name: string;
  //age: number;
  language: string;
}

var ian: Developer = {
  language: 'ts',
  name: '이안',
  age: 28
}

 

 타입 별칭 (Type Aliases)

 

타입 별칭은 새로운 타입 값을 생성하는 것이 아니라 특정 타입을 참조할 수 있는 타입 변수를 의미힌다.

즉, 정의한 타입에 대해 참고 가능하도록 별칭(이름)을 부여하는 것이다.

const name: string = 'ian';

// 타입 별칭 적용
type MyName = string;
const name: MyName = 'ian';

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

인터페이스 vs 타입 별칭

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

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

var ian: Person = {
  name: '이안',
  age: 28
}

인터페이스는 확장이 가능하지만 타입 별칭은 확장이 불가능하다.

그러므로 타입 별칭보다는 인터페이스를 사용하는 것을 추천한다.