TypeScript 연습 <1> -12-

________________________________________________________________________

 

TypeScript 로 객체 지향 프로그래밍 -3-  class, interface 복습

 

 

< 타입스크립트로 객체 지향 프로그래밍 하기. 클래스와 인터페이스 - 클래스와 인터페이스 복습하기 >

 

 

 

인터페이스는 내가 원하는 메소드와 프로퍼티를 클래스가 가지도록 지시한다.

허나 자바스크립트에서는 인터페이스가 트랜스파일 되지 않아. 추상 클래스와는 다르게.

즉 추상 클래스와 인터페이스가 같은 역할을 한다면 (= 다른 클래스들이 특정 모양을 따르도록 하기 위한 용도)

인터페이스를 사용하는 편이 나아. 프로젝트가 더 가벼워 지거든.

 

 

기억해야 할 것.

첫 번째. 타입을 쓰고 싶다면 type 키워드를 사용.

 

 

 

 

 

1.

________________________________

< 인터페이스와 타입의 차이 상기 >

 

——

type PlayerA = {

    name: string

}

const playerA : PlayerA = {

    name: "minsoo"

}

 

interface PlayerB {

    name:string

}

const playerB : PlayerB = {

    name: "minsoo"

}

——

=> const 로 선언된 변수만 봐서는 PlayerA, PlayerB 가 타입인지 인터페이스인지 알 수 없어.

이 경우 타입은 객체의 형태를 지정해주고 있고, 그런 점에서는 타입과 인터페이스의 역할이 완벽히 일치한다고 볼 수 있어.

 

 

허나 타입과 인터페이스는 할 수 있는 것이 좀 달라.

우선 타입을 상속시키려면 어떻게 해야 할까?

——

type PlayerA = {

    name: string

}

type PlayerAA = PlayerA & {

    lastName: string;

}

const playerA : PlayerAA = {

    name: "minsoo",

    lastName: "kim"

}

——

=> 타입이 다른 타입에게서 상속 받는다?

“ & “ 키워드를 사용해서 타입을 합쳐야 해.

 

 

반대로, 인터페이스는 어떻게 상속시킬 수 있을까.

——

interface PlayerB {

    name:string

}

interface PlayerBB extends PlayerB {

    lastName: string

}

interface PlayerBB {

    health: number

}

const playerB : PlayerBB = {

    name: "minsoo",

    lastName: "kim",

    health: 10

}

——

=> interface 끼리도 extends 를 통해서 상속을 받을 수 있어. 이 경우에는 클래스 마냥 생성자함수에서 선언을 해주지 않아도 돼.

그리고 PlayerBB 라는 동일한 인터페이스를 따로 정의하더라도, 타입스크립트가 알아서 하나의 인터페이스로 합쳐줘.

즉, 아예 그냥 위의 3개의 인터페이스를 전부 다 PlayerB 라는 동일한 이름으로 지정하고 extends 키워드를 제외시켜도 문제 없다는 뜻.

——

interface PlayerB { name:string }

interface PlayerB { lastName:string }

interface PlayerB { health: number }

——

이런 식으로 해도 문제가 없단 뜻. 반대로 타입은 계속해서 & 로 꼬리에 꼬리를 물어야 하고.

 

 

 

 

 

 

2.

________________________________

< 인터페이스와 타입으로 추상 클래스를 대체 >

 

 

내가 원한다면, 인터페이스와 타입 모두 추상 클래스를 대체해서 사용할 수 있어.

추상 클래스의 경우 extends 이지만, 타입과 인터페이스는 implements 로 해결 가능.

——

type PlayerC = {

    firstName:string

}

interface PlayerD {

    firstName:string

}

 

class User7 implements PlayerC, PlayerD {

    constructor (

        public firstName: string

    ) {}

}

——

=> 일반 class 는  타입도 인터페이스도 둘 다 implements 로 상속 받을 수 있어.

위 코드에서는 예시를 보여주기 위해 타입, 인터페이스 둘 다 상속 받았지만 어차피 상속받을 프로퍼티가 firstName:string 뿐이니

둘 중 하나만 상속받아도 좋고, 둘 다 상속 받아도 좋아. 

PlayerC 와 PlayerD 둘 다 같은 이름의 프로퍼티를 지니고 있어서 곂치지 않을까 걱정할 수 있겠지만, 별 문제 없어.

User7 에서 그냥 firstName 프로퍼티 하나만 생성자 함수에서 설정해 주면 돼.

 

왜 추상 클래스가 아닌 인터페이스와 타입을 사용하는가?

단순해, 인터페이스와 타입은 트랜스파일하면 사라지거든. 그래서 가벼워.

 

물론, 추상 클레스를 전혀 사용하지 않는 것은 아니겠지. 

추상 클래스의 경우 내부의 프로퍼티와 메소드들이 추상 프로퍼티, 추상 메소드가 아니라면

추상 클래스를 상속받는 클래스는 추상 클래스의 프로퍼티와 메소드들을 사용할 수도 있고, 사용하지 않을 수도 있으니까.

 

즉 용도에 맞춰서 나누는 것이 중요. 무작정 편하다고 추상 클래스만 사용하면 프로젝트가 무거워 져.

 

 

 

자아 정리.

타입스크립트 커뮤니티에서는 클래스나 오브젝트의 모양을 정의하고 싶다면 interface 를, 그 외의 경우에는 타입을 사용하라고 말하고 있어.

객체 지향적인 의미에서는 인터페이스가 조금 더 적합하고 (애당초 그러라고 만들어진 기능이니) 생긴 것도 객체 지향성에 적합하고 직관적이야.

그 외에 타입 알리아스나, 특정 값으로 타입을 제한하는 경우에는 그냥 타입을 사용하면 되는 거구.

 

그리고 ‘아, 이건 implements 보다는 추상 클래스로 extends 하는 편이 훨씬 더 간결하고 편하겠구나…’ 라는 순간에만 추상 클래스 사용하구.