[JS][TS] Typescript에서의 Interface

타입스크립트에서는 타입의 정적 체크와 더불어, OOP의 인터페이스와 클래스도 지원한다. 용법은 C#이나 자바에서의 용법과 비슷하다.

인터페이스 자체에 관한 이야기는 다른 OOP 언어에서 다루었을 것이므로, 간단하게만 짚고 넘어가겠다. 인터페이스를 사용함으로 겹치는 규격을 정하여 규격(형태)이 같은 클래스 간에 재사용성을 높이고, 클래스 간의 결합도를 줄일 수 있다. (자세한 내용은 추상 클래스 혹은 인터페이스를 찾아보자)

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

const person: Person = {
    name: 'KDH',
    age: 35
}

 

만약 자바스크립트처럼 interface를 쓰지 않고 사용하려하면 아래처럼 항상 정의해주어야한다.

const person: {name: string; age: number} = {
    name: 'KDH',
    age: 35
};

다른 언어에서 인터페이스를 다루어보았다면, 인터페이스를 상속받을 경우 해당 멤버들을 모두 구현해야한다는 것을 알고 있을 것이다. 타입스크립트에서는 인터페이스를 정의할 때, 구현하지 않아도 되는 속성을 지정할 수 있다. 아래와 같이 ?를 붙여주면 된다.

interface Person {
    name: string;
    age?: number; // 구현하지 않아도 됨
}

interface에서 멤버함수는 아래와 같이 쓸 수 있다. 크게 다르지 않다.

interface Hi {
    name: string; // 변수
    hello(): void; // 함수
    // 구현은 hello: function() {} 혹은 hello:(): string => {} 등으로 가능
}

클래스와 인터페이스끼리의 상속은 C#이나 자바에서와 동일하게 사용하면 된다. class에서는 implements로 받고, 인터페이스끼리는 extends를 사용하면 된다.

class Hello implements IHello {
    // 구현
}

interface Korean extends Person {
    // 정의
}

인터페이스는 클래스가 아닌 함수에도 적용시킬 수 있다. 사실 색다른 개념이 아니라 맨 위의 용례에서 이어진다고 보면 된다.

interface Hello {
    (name:string, age?: number): void;
}

let hello: Hello = function(name:String, age: number) {
    // 구현
}

Indexable Type

마지막으로 잠시 특이한(?) 타입에 대해서 살펴볼 것이다. (아직 주니어이지만) 본인은 타입스크립트에서 처음 본 형태의 타입이었다.
optional한 타입으로, property가 지정한 타입으로 들어가면 된다. arr나 dict와 비슷한데 아래 실제 예를 보는 것이 이해가 빠르다.

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

const test: Test = {};
test[0] = 'hi'; // 위 interface에서 지정한 것과 같이 index는 숫자, value는 string이다.
test[100] = 'hello';

interface Test2 {
    name: string;
    [index: string]: string;
}

const t2: Test = {
    name: 'KDH'; // 위 interface에서 지정한 것과 같이 index는 string, value도 string이다.
}

즉 위와 같이 index틔 타입과 value에 넣을 타입을 지정해주고, 사용할 때에는 그에 맞게 사용하면 된다.

다음 글에서는 이어서 class에 대해서 다루도록 하겠다.