[TS] 인터페이스

타입스크립트 입문 - 기초부터 실전까지 강의을 듣고 정리한 내용입니다.

 

 

✅ 인터페이스

인터페이스는 상호 간의 정의한 약속 혹은 규칙을 말한다.

 

let kiki: object = {
    name: 'kiki',
    age: 24
}

 

객체의 타입을 정의할 때에는 위와 같이 object라고 타입을 선언해도 된다.

위처럼 kiki라는 객체의 안에 name과 age라는 속성이 있다고 하자.

 

console.log(kiki.name);

 

kiki.name에 접근하려 할 때 이미 object라는 타입을 선언했음에도 에러가 난다.

그 이유는 kiki라는 object 안에 name이라는 속성이 있는지 보장할 수 없기 때문이다.

 

에러를 해결하기 위해서는 { name: string; age: number; }의 식으로 모든 속성의 타입을 선언해 주어야 한다.

그러나 속성이 2개가 아닌 5개 이상이라면? 더 많다면?

보기도 불편하고 중복이 된다는 문제도 있다.

따라서 interface 아니면 type 둘 중 하나를 선언하여 중복성을 없앤다.

 

 

✅ 인터페이스 활용 - 변수

 

var mimi: { name: string; age: number; } = {
    name: 'mimi',
    age: 30
}

 

인터페이스를 사용하지 않고 mimi라는 객체를 정의하면 위와 같다.

 

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

var mimi: User = {
    name: 'mimi',
    age: 30
}

 

인터페이스로 User를 정의한 모습이다.

string 타입인 name과 number 타입인 age를 필수 요소로 가진다.

 

 

✅ 인터페이스 활용 - 함수(인자)

 

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

function getUser(user: User) {
    return user;
}

 

인터페이스를 활용해 함수 파라미터의 타입을 선언하는 것은 일반적인 타입을 선언하는 것과 동일하다.

인터페이스를 사용하면 좀 더 깔끔한 선언이 가능해진다.

 

 

✅ 인터페이스 활용 - 함수(구조)

 

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

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

 

함수의 인자와 리턴 타입 모두 인터페이스로 선언해 두고 인터페이스를 가져오는 모습이다.

sum을 선언하는 과정에서 SumFunction이라는 인터페이스를 적용했기에 함수 구현 과정에서 따로 타입을 선언하지 않아도 인자 a와 b, sum의 리턴 타입 모두 number임을 확인할 수 있다.

 

 

✅ 인터페이스 활용 - 인덱싱

 

interface StringArray {
    [index: number]: string;
}
let arr: StringArray = ['a', 'b', 'c']
arr[0] = 10 // error!

 

인덱싱에 인터페이스를 활용할 수 있다.

StringArray 인터페이스가 뜻하는 것은 배열 인덱스의 타입은 number이고 배열 요소의 값은 string 타입을 가진다는 것이다.

따라서 'a', 'b', 'c' 등의 문자열을 요소로 가진 배열 arr이 있을 때 arr의 0번째 인덱스에 10이라는 number 타입의 값을 넣으려고 하면 오류가 난다.

 

 

✅ 인터페이스 활용 - 딕셔너리 패턴

 

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

let obj: StringRegexDictionary = {
    sth: /abc/,
    num : /[0-9]/,
    NaN : /[^0-9]/
}

Object.keys(obj).forEach(function(value){})

 

위의 인덱싱과 비슷한 사례이다.

딕셔너리의 key 값은 string 타입을 가지고 value는 정규표현식의 형태를 가지도록 인터페이스를 선언했다.

따라서 obj 안의 key는 문자열만 가능하며 value는 정규표현식만 가능하다.

 

이런 식으로 타입을 설정했기 때문에 Object.keys(obj).forEach(function(value){})와 같은 코드에서 value가 string 타입을 가질 것이라고 예측할 수 있다.

 

 

✅ 인터페이스 확장(상속)

 

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

interface Developer extends Person {
    language: string;
}

let kiki: Developer = {
    name: 'kiki',
    age: 25,
    language: 'TypeScript'
}

 

위와 같이 인터페이스는 확장이 가능하다.

인터페이스 Developer에서는 extends를 통해 Person을 상속받고 있다.

따라서 Developer 안에서 직접적으로 선언한 것은 lauguage 속성밖에 없음에도 불구하고 name, age들을 Person으로 부터 받아와 name, age, lauguage의 세 가지 속성을 가진다.

 

그렇기에 Developer 타입을 가지는 kiki라는 객체는 name, age, language 속성을 모두 가져야 한다.