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

Interface 개념

정의: Interface는 자주 사용하는 type을 재정의

---

1. 변수에 interface 활용하기

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

//변수에 interface 활용
var damin: User = {
    age: 24,
    name: 'kdm',
}; //damin 이라는 변수는 User interface로 정의

User 라는 interface를 선언하고, damin 이라는 변수의 type을 interface로 지정할 수 있습니다.

2. 함수의 interface 활용

//함수의 interface 활용
function getUser(user: User) {
    console.log(user);
} //getUser 함수는 User라는 interface로 정의된 type만 받는다.

getUser(damin);

getUser 함수는 user라는 매개변수를 전달 받아 return합니다.
이때 그 user는 User 라는 interface로 정의했습니다. 따라서 해당 함수의 매개변수는 User 인터페이스 룰을 따라야합니다.

3. 함수의 spec(구조)에 interface를 활용

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

var sum: sumFunction; //sum이라는 함수는 sumFunction 이라는 interface 규칙을 따른다.
sum = function(a:number, b:number): number {
    return a + b;
}

sumFunction 인터페이스에 매개변수와 반환값의 type을 먼저 지정합니다.

sum이라는 함수를 먼저 sumFunction interface로 type을 선언하게 되면, 해당 interface rule을 따릅니다.

4. 인덱싱

interface StringArray {
    [index: number]: string;
} //배열의 index는 number고, arr[i] = string형식의 값만 받음

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

배열 type을 선언할때, 배열의 index 타입을 지정하고 그리고 index에 해당하는 요소들의 type도 interface로 지정할 수 있습니다.

즉 배열의 index는 number고, arr[i] = string형식의 값만 받습니다.

5. 인터페이스 딕셔너리

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

var obj: StringRegexDict = {
    // sth : /abc/,
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}

obj의 key-value로 접근할 수 있습니다.

6. 인터페이스 확장(상속)

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

interface Developer extends Person{
    language: string;
}

var dm: Developer = {
    name: 'Damin Kim',
    age: 24,
    language: 'Typescript',
}

extends 명령어로, Developer 인터페이스에는 반복되는 객체 선언을 단축할 수 있습니다.

type vs interface ?

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

따라서, 타입스크립트에서는 타입별칭 보다는 인터페이스를 사용하는 것을 추천합니다.