[Typescript] interface

[interface]

1. type check를 위한 interface

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

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

myObj는 size, label의 프로퍼티를 가지고있지만 printLabel의 파라미터는 오직 label 프로퍼티만 요청하고있다.

이는 컴파일러가 적어도 하나의 type만 확인하면 된다는것을 알려준다.

위의 예제를 interface를 사용하도록 변경하면 다음과 같다.

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

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

interface LabelledValue에서 label 프로퍼티를 보여주고있다.

이는 printLabel에게 오직 string type label 프로퍼티만 충족시켜주면 충분하다고 말하고있는 것이다.

2. optional 프로퍼티

interface의 모든 프로퍼티가 요구되어지는 것은 아니다.

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"});

interface optional 프로퍼티는 식별자 뒤에 ?를 붙여서 사용하며 선택적으로 구현하는 프로퍼티이다.

위의 코드에서 볼수있듯이, 인터페이스를 구현하는 함수에서 optional 프로퍼티를 가지고있지 않아도 에러가 발생하지않는다.

3. Readonly 프로퍼티

typescript에서는 이름에서 유추가능하듯이 읽기만 가능한 readonly 프로퍼티를 선언할수있다.

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

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

위의 예제와같이 x, y를 readonly 프로퍼티를 이용해 선언했기때문에 x값 변경 요청시 에러가 발생한다.

그럼, readonly 프로퍼티는 const와의 차이가 없는걸까? 라는 궁금증이 생긴다.

얼핏보면 똑같은 행위를하는듯 보이는 이 readonly 프로퍼티와 const의 가장 쉬운 차이점은 const는 변수에 사용되며 readonly는 프로퍼티에 사용된다.

뿐만 아니라 아래와같은 간단한 에제로 const와 readonly 차이를 알수있다.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error! ro = [1, 2, 3];
const ro2 = a;ro2[0] = 12;ro2 = [1, 2, 3]; // error!

const도 상수화, readonly도 상수화일텐데 왜 결과값은 다를까?

이유는 readonly는 내가 가리키는 데이터에대한 상수화이고 const는 자기 자싲의 상수화이기 때문이다.

참고! ro와 ro2의 값은 copy가 아닌 reference된 값이다.

4. Excess Property Checks

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

function createSquare(config: SquareConfig): { color: string; area: number } {    return ;
    // ...
}

/* TEST A*/
let mySquare = createSquare({ colour: "red", width: 100 }); // ERROR
/* TEST B */let test = { colour: "red", width: 100 };let mySquare = createSquare(test); // Success

얼핏보면 TEST A는 존재하지않은 colour를 인자로 사용하여 발생한 ERROR로 보인다.

하지만 TEST B에서도 똑같이 존재하지않은 변수 colour를 인자로 넘기지만 TEST B에서는 ERROR가 발생하지않는다.

TEST A와 TEST B의 차이는 무엇일까?

바로 변수 test에다 colour를 사용여부이다. 

TEST A와 같이 함수에 직접적으로 선언되지않은 colour를 사용할경우 해당 변수는 명백히 잘못사용된 인자가 되지만 TEST B와 같이 test 변수에 선언된 변수는 어디에선가 쓰일수도있는 변수이기때문에 ERROR가 발생하지않는다.

5. 함수타입

interface를 사용하여 함수의 파라미터, 리턴값의 type을 지정할수있다.

함수 인자의 이름은 변경될수 있으며 '()' 괄호를 사용해 선언하며 return값은 ':'으로 선언한다.

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

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

한번 지정한 함수 type은 다른 interface로도 사용가능하다.

위의 코드에서는 SearchFunc 함수 type을 mySearch에서 사용되는것을 보여준다.

이후에 나오는 class type, hybred type 등등은 class chapter를 정리 한 후 진행하도록 한다.