TypeScript#3 인터페이스

• 인터페이스는 Object 형태로 사용하지 못하는 속성을 참고할 경우에 사용한다. 아래의 코드를 보자.

let user:Object = {
    name : 'kim',
    age : 30
};

// error 
console.log(user.name);

Object에는 특정한 속성을 참조할 수 있는 기능이 없다.

 

• 이럴경우 interface를 사용할 수 있다.

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

let user:User = {
    name : 'kim',
    age : 30
}

console.log(user.name);

user.age = 30;

interface를 선언할 때에도 각 타입을 지정하고 해당 인터페이스 타입으로 변수를 선언하여 get, set 하여 사용할 수 있다.

 

• 만약 name과 같은 string 형 타입을 100개 사용한다고 하면 어떨까? 물론 interface 부분에 100개를 선언해줘도 정상적으로 동작한다. 하지만 아래와 같은 방법을 사용할 수 있다.

type Score = 'A' | 'B' | 'C' | 'D';

interface User {
    name : string;
    age : number;
    [grade:number] : Score;
}

let user:User = {
    name : 'kim',
    age : 30,
    1 : 'A',
    2 : 'C',
    3 : 'D'
}

 

[grade:number] : Score의 grade에는 아무런 문자나 들어가도 상관없다. key number, 값 string의 형식만 맞다면 무한대로 값을 입력할 수 있다. Score라는 타입을 만들고 해당 타입으로 [grade:number]을 설정한다면 Score에 설정된 값만 입력될 수 있다.

 

• interface로 함수를 작성하는 방법이다.

interface minus {
    (numb1:number, numb2:number):number;
}

const minus2 : minus = function(num1, num2) {
    return num1 - num2;
}

위와 같이 작성된다면 minus로 만들어진 변수는 무조건 number 형태의 파라메터 2개를 가져야 하고 return 값이 number이어야지만 정상적으로 동작하는 함수이다.

 

interface isMan {
    (gender:string):boolean;
}

const isMan2:isMan = (gender) => {
    return gender === 'Man';
}

위와 같이 사용한다면 문자열 파라메터를 받아서 문자열 비교 후 true, false 값으로 return하는 함수를 만들 수 있다.

 

 

• interface를 사용하여 class를 만들어서 사용할 수도있다.

interface phone {
    type : string;
    color : string;
    price : number;
}

class myPhone implements phone {
    type;
    color;
    price;

    constructor(type:string, color:string, price:number) {
        this.type = type;
        this.color = color;
        this.price = price;
    }
}

const myphone = new myPhone('iphone', 'white', 30000);

 

phone라는 인터페이스를 만들고 myPhone에서 상속받아 생성자로 사용하는 부분이다.