Skip to main content

인터페이스 - 추가

이 페이지는 기존 TypeScript의 interface에 대한 보충 설명입니다. 핸드북에 자세한 설명이 나와있으나, 어떻게 동작되는지에 초점을 조금 맞추고자 하였습니다.

간략히#

  • 기본적으로 인터페이스는 다음 세 종류로 활용됩니다.
    • 함수
    • 클래스
    • indexable

함수의 경우#

interface eating {
(food: string, rotten: boolean): string;
}
const eatingApples: eating = function (apple: string, rotten: boolean) {
return rotten ? 'ill...' : 'Yum!';
};
  • parameter의 이름까지 같을 필요는 없습니다.

클래스의 경우#

  • 가장 일반적입니다.
interface Person {
name: string;
hello(): void;
}
class Student implements Person {
name: string;
constructor(name: string) {
this.name = name;
}
hello() {
console.log('안녕하세요');
}
}

indexable type#

  • 딕셔너리 패턴을 만드는 것을 제공합니다.
  • 인덱스 시그니쳐는 문자열과 숫자 두가지 타입이 있습니다.
interface stringType {
[key: string]: any;
}
interface numericType {
[key: number]: any;
}

숫자와 문자열 타입#

  • number가 javascript에서 객체에 인덱싱 하기 전 string으로 변환됩니다. 100 (number) 과 "100" (string)으로 인덱싱 하는 것은 동일합니다.
  • 따라서 숫자타입에서 반환되는 타입은 문자열에서 반환되는 타입의 하위 타입이어야 합니다.
class Animal {
name: string = '';
}
class Dog extends Animal {
breed: string = '';
}
interface Okay {
[x: string]: Animal;
[x: number]: Dog;
}
let a: Okay = { a: new Animal(), b: new Dog(), 4: new Dog() }; //accepatable
  • 숫자 indexable 은 리터럴에 따라 배열같이 동작될 수도 있습니다.
interface example {
[d: number]: string;
}
let a: example = {};
a[0] = 'f';
a[2] = 'g';
let b: example = [];
b[0] = 'f';
b[2] = 'g';
console.log(a); // {0:"f", 2:"g"}
console.log(b); // ["f", empty, "g"]