[Typescript] 인터페이스(interface)

let user:object;

user = {
    name : 'xx',
    age : 30
}

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

object에는 특정 속성 값에 대한 정보가 없기 때문에 위 코드는 에러가 발생한다.

이처럼 프로퍼티를 정해서 객체를 표현하고자 할 때는 인터페이스를 사용한다.

 

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

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

console.log(user.age);  // 30

인터페이스를 활용해 user 객체의 age 속성에 접근하면 에러가 발생하지 않는다.

 

 

optional, readonly, index

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

interface User {
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
    [grade : number] : Score;
}

let user : User = {
    name : 'xx',
    age : 30,
    birthYear : 2000,
    1 : 'A',
    2 : 'B',
    3 : 'f'  // Error
}

user.gender = "male";
user.birthYear = 1990;  // Error

있어도 되고 없어도 되는 속성은 이름 뒤에 물음표를 붙여준다. gender은 optional한 속성이므로 User 객체에서 gender속성을 선언하지 않았지만 에러가 발생하지 않는다.

 

읽기 전용 속성 앞에 readonly를 붙여준다. birthYear은 읽기 전용 속성이므로 객체 생성 이후에 수정하면 에러가 발생한다.

 

[grade : number] : Score은 number을 key로 하고 Score을 value로 하는 프로퍼티를 여러 개 만들 수 있다는 의미이다. Score 타입을 지정해 value 값으로 'A', 'B', 'C', 'F' 만 올 수 있게 하였다.

 

 

function

인터페이스로 함수를 만들 수 있다.

interface Add{
    (num1:number, num2:number): number;
}

const add:Add = function(x, y){
    return x + y;
}

add(10, 20);   // 30

interface IsAdult{
    (age:number):boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33);   // true

 

 

class

인터페이스로 클래스를 정의할수도 있다. 클래스가 인터페이스를 상속받을 때 implements라는 키워드를 사용한다. 상속받은 클래스는 상속한 인터페이스의 모든 속성을 가져야 한다.

interface Car{
    color:string;
    wheels:number;
    start():void;
}

class Bmw implements Car{
    color;
    wheels = 4;
    
    constructor(c:string){
  	    this.color = c;
    }
    
    start(){
        console.log('go...');
    }
}

const b = new Bmw('green');

 

인터페이스끼리 상속할 때는 extends 키워드를 사용한다. 마찬가지로 상속받은 인터페이스는 상속한 인터페이스의 모든 속성을 가져야 한다.

interface Car{
    color:string;
    wheels:number;
    start():void;
}

interface Benz extends Car{
    door:number;
    stop():void;
}

const benz:Benz = {
	color:'black',
    wheels:4,
    start(){}
    door:5,
    stop(){
        console.log('stop');
    }
}

여러 인터페이스를 상속할수도 있다.

interface Car{
    color:string;
    wheels:number;
    start():void;
}

interface Toy{
    name:string;
}

interface ToyCar extends Car, Toy{
    price:number;
}