Typescript Docs - Interface

Bard·2020년 11월 16일

Typescript Docs

목록 보기

3/4

인터페이스

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것입니다. 이를 "덕 타이핑(duck typing)" 혹은 "구조적 서브타이핑 (structural subtyping)"이라고도 합니다. TypeScript에서, 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법입니다.

Our first interface

function printLabel(labeledObj: { label: string }) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

이 코드를 string 타입의 label을 가진 인터페이스로 다시 작성하면, 다음과 같습니다.

interface LabeledValue {
    label: string;
}

function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

인터페이스에서 순서는 중요하지 않습니다.

Optional Properties

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});

선택적 프로퍼티는 프로퍼티의 이름 끝에 ?를 붙여서 사용합니다.

Readonly Properties

interface Point {
    readonly x: number;
    readonly y: number;
}

이 경우 x,y를 수정할 수 없습니다.

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // 오류!

Readonly array도 사용할 수 있습니다.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // 오류!
ro.push(5); // 오류!
ro.length = 100; // 오류!
a = ro; // 오류!

그러나 type assertion으로 오버라이드하는 것은 가능합니다.

a = ro as number[];

readonly는 프로퍼티에 사용하고 const는 변수에 사용합니다.

Function Types

인터페이스는 함수 타입도 기술할 수 있습니다.

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}

인터페이스에서 쓴 프로퍼티의 이름과 매개변수의 이름이 같을 필요는 없습니다.

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
    return result > -1;
}

Indexable Types

배열처럼 인덱싱을 할 수도 있습니다.

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

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

Implementing an interface

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

자바나 c#처럼 클래스가 특정 contract를 충족하도록 강제하기 위해 인터페이스를 구현할 수 있습니다.

Extending interfaces

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;