[Typescript] Interface

안녕하세요, 김선진입니다.

회사에서 모바일-웹 통신 인터페이스를 정의했고,

코드를 정리하는 과정에서 typescript interface를 사용했습니다.

그리고 매번 프로젝트성 글만 썼었는데, 개념글을 쓰면 블로그 유입량이 늘어날까? 하는 실험도 있음.

---

0. 서론

아시다시피 타입스크립트는 자바스크립트의 슈퍼셋으로,

자바스크립트의 요상한(?) this와 함수를 1급 객체로 취급하는 부분이 동일하다.

이번에 어떤 문제를 해결하는 과정에서 유틸 펑션을 만들어야 하는 부분이 있었는데,

위 언급한 특성 덕분에 타입스크립트에서는 클래스 대신 함수에도 interface 적용이 가능하다.

MDN에서도 class의 첫 소개에 이렇게 적혀있다.

"클래스는 사실 함수입니다."

1. Duck typing

인터페이스는 타입스크립트의 핵심 근간인 덕 타이핑에서 비롯된다.

"만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다."

class Duck{
	quack() { console.log('꽥'); }
    fly() { console.log('파닥파닥'); }
}

class Person {
	quack() { console.log('꽦!!!'); }
    fly() { console.log('인간은 비행기를 탔다.'); }
}


function duckHavior(duck){
	duck.quack();
    duck.fly();
}

james = new Duck();
jonh = new Person();
duckHavior(james); //꽥 파닥파닥
duckHavior(jonh); // 꽦!!!  인간은 비행기를 탔다.

Duck 클래스와 Person 클래스는 다른 클래스지만 모양이 같기 때문에 동일한 타입으로 간주해버린다.

quack과 fly함수만 구현되어 있다면 그게 뭐든 간에 duckHavior 내부에서는 오리가 되는 것이다.

 

2. Interface

이런 덕 타이핑은 매우 편리하지만, 문제가 있다.

duckHavior의 매개변수로 quack(), fly()를 가지고 있지 않은 객체를 넘긴다면 런타임 에러가 발생한다.

그렇다고 함수 내에서 타입 가드를 작성하기엔, 덕 타이핑을 사용하려다 타입가드가 더 복잡해지는 경우가 있다.

 

타입스크립트에서는 덕타이핑의 문제점을 해소하기 위해 Interface가 등장했다.

Interface는 간단히 말하면 타입에 이름을 지어주는 것이고,

컴파일타임에서 잘못된 타입을 사용했을 때 에러를 뱉어주기 때문에

좀 더 타입 세이프티한 코드를 작성할 수 있다.

인터페이스는 다음과 같이 선언한다.

interface DuckLike{
	quack(): void;
    fly(): void;
}

(코드블럭 인덴트가 왜이러는지?)

선언한 인터페이스를 활용하면 위에서 작성했던 덕 타이핑 코드를 타입 세이프티하게 만들 수 있다.

class Duck implements DuckLike{
	quack() { console.log('꽥'); }
    fly() { console.log('파닥파닥'); }
}

class Person implements DuckLike{
	quack() { console.log('꽦!!!'); }
    fly() { console.log('인간은 비행기를 탔다.'); }
}


function duckHavior(duck: DuckLike){
	duck.quack();
    duck.fly();
}

james = new Duck();
jonh = new Person();
duckHavior(james); //꽥 파닥파닥
duckHavior(jonh); // 꽦!!!  인간은 비행기를 탔다.
duckHavior('test') // error

2-1. Optional Property

interface Person{
	name: string;
    birth?: string;
    gender: string;
    age: number;
}

?가 붙어있는 birth는 옵셔널 프로퍼티(Optional Property)라 하여, undefined가 될 수 있다.

즉 birth는 string|undefined 타입이 된다.

2-2. Indexable Types

interface Person{
	name: string;
    birth?: string;
    gender: string;
    age: number;
    [indxe: string]: string;
}

인터페이스에서는 인덱스를 정해줄 수 있다.

Person에 인덱스를 선언해주자. 이제 string: string인 어느 프로퍼티를 선언해도 Person 타입이 된다.

2-3. Function Types

interface NumberToString {
  (value: number): string;
}

Typescript에서는 Function용 Interface도 선언 가능하다.

NumberToString을 구현한 함수는 number타입 매개변수를 받아 어떻게든 가공하여 string값을 반환한다.

const ageString:NumberToString = (value: number) => {
	return `i am ${value}years old`;
}

이런 식으로 사용한다.

인터페이스 내부에 있는 펑션 시그니처가 길다면 펑션 타입으로 빼내 사용하는 것도 좋아 보인다.

 

이런 특성들을 이용하여 코드를 정리했더니 보기도 깔끔하고 좋더라.

갓터페이스.

 

타입스크립트 인터페이스에 대해 알아봤다.

그럼 이만~.

 

Refernces

https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

Handbook - Interfaces

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

Classes

https://ko.wikipedia.org/wiki/%EB%8D%95_%ED%83%80%EC%9D%B4%ED%95%91

덕 타이핑 - 위키백과, 우리 모두의 백과사전