Typescript - type, interface 차이점에 대하여 알아보자.

변수, 상수, 함수, 객체, 배열등 모든 정보의 데이터 타입이 무엇이고 리턴이 있다면 리턴타입은 무엇인지, 객체라면 어떤 정보로 이루어져 있는지 타입스크립트에선 모두 설명을 해주어야하고 그래야 타입스크립트로부터 데이터를 보호받고 자동완성 등의 혜택을 받을 수 있다.

 

type사용하기

const test: string = "hello";

type Message = string;
const test2: Message = "hi";

직접 자료형을 바로 적어줘도 되고, type에 정의해서 별칭을 정해주거나, 함수의 경우 call signature형태로 정의해서 직접 선언하는 함수는 깔끔 명료하게도 표현할수 있다.

 

 

call signature

//const add = (a:number, b:number) => a+b;

type Add = (a: number, b: number) => number;
const add: Add = (a, b) => a + b;

 

 

type, interface 차이점

여기서 자주 사용되는게 type키워드와 interface이다.

둘의 생김새는 매우 비슷하지만 약간의 차이점이 있다.

- type

//type으로 특정 값만 사용하도록 제한하기
type Team = "red" | "blue" | "yellow";
type Health = 1 | 5 | 10;

type Player = {
    nickname: string;
    team: Team; // 3가지의 값만 사용가능
    health: Health; // 3가지의 값만 사용가능
};

const nico: Player = {
    nickname: "nico",
    health: 10,
    team: "blue",
};

 

- interface

type Team = "red" | "blue" | "yellow";
type Health = 1 | 5 | 10;

interface IPlayer {
    nickname: string;
    team: Team; // 3가지의 값만 사용가능
    health: Health; // 3가지의 값만 사용가능
};

const shin: IPlayer = {
    nickname: "shin",
    health: 10,
    team: "blue",
};

일단 키워드명이 달라질 것이고, '=' 기호의 차이가 있다.

그리고 가장 큰차이는 interface의 경우 object, class의 모양을 특정하는데만 사용된다.

주로 react에서 자주 봤던 이유이다.(api등이나 그리려는 props들의 정보를 object형태로 자주 담아서 사용했다.

 

즉, 바로 아래 표현한거처럼 interface는 간단한 자료형 정의와 같은 행위는 불가능하다.

interface Hello = string; //Error

 

 

상속 표현 차이점

- type

type User = {
    name: string
}

type Player = User & {

}

const nico: Player = {
    name: "nico"
}

 

- interface

interface User {
    name: string
}

interface Player extends User {

}

const shin: Player = {
    name: "shin"
}

부모 속성으로 부터의 상속도 가능한데 아래와 같은 차이가 있다.

1. type은 &(and) 기호를 통해 가능하다.

2. interface는 extends 키워드로 상속을 받아서 사용한다.

 

같은 이름의 interface가 존재하면?

또한 interface에서만 가능한 기술로 같은 파일시스템 내에서 같은 이름의 interface를 중복으로 선언하면, 하나의 인터페이스로 합쳐준다.

interface User {
    nickname: string,
}

interface User {
    hp: number,

}

interface User {
    mp: number,
}

const warrior: User = {
    nickname: "shin",
    hp: 100,
    mp: 40
}

알아서 3가지의 타입을 합쳐서 가지고 있다. 이런 표현방식은 interface에서만 가능하다.

 

 

interface를 class에 상속하기

abstract을 통해 상속받는 class모습을 추상적으로 그려주고 필수적으로 작성해야하는 함수를 지정하거나 할수 있는데, 이런 형태를 interface를 통해서도 가능하다.

interface User {
    nickname: string,
    level: number,
    myInfo(): string,
    sayHi(name: string): string,
}

interface Human{
    health: number
}

class Player implements User,Human {
    constructor(
        public nickname: string,
        public level: number,
        public health: number
    ) { };

    myInfo() {
        return `${this.nickname}이며,  ${this.health}의 체력을 가지고 있습니다.`;
    }

    sayHi(name: string) {
        return `hello ${name}`;
    }
}

다만 상속받는 class의 생성자부분에서 접근제한자는 public으로만 생성 가능하게 됩니다.

자바스크립트로 변환될때의 이점으로 interface로 정의한 User, Human의 정보의 추적이 불가능합니다. interface라는 형태는 typescript에서만 존재하기 때문에 좀 더 가벼운 소스를 만들수 있고, extends는 하나의 추상클래스만 상속가능하지만 implments는 여러개의 interface를 상속받을수 있습니다.