[TS] Typescript의 class

1. class 생성자

    class Player{
        constructor(
            private firstName: string,
            private lastName : string,
            public nickName : string
        ){}
    }
   

    'use strict'
    class Player{
        constructor(){
            this.firstName = firstName,
            this.lastName = lastName,
            this.nickName = nickName
        }
    }
   

   • 위의 TS코드가 아래의 JS코드로 작성한 것과 동일함
   • private인 요소들은 외부에서 접근 불가능함
2. class 상속
   • 추상 클래스는 인스턴스를 만들 수 없다.
   • 추상 메서드는 구현이 되어있지 않은 코드가 없는 메서드다.
   • 일반 클래스는 추상클래스를 상속받는다.
   • 추상 클래스에 추상 메서드가 있다면 일반 클래스는 추상메서드를 반드시 상속해야한다.
   • 추상메서드에 접근제어자가 private인 속성이 추상 메서드에 작성되어도 일반 클래스는 속성에 접근할 수 없다. Player 클래스에서만 접근하고 외부에서 접근 불가능하기 위해서는 protected 접근제어자를 사용한다.

    abstract  class  User{
        constructor(
            protected firstName: string,
            protected lastName : string,
            public nickName : string
        ){}
        abstract getFullName():void
    }	  
   
    class  Player  extends  User{
        getFullName(){
            return  `${this.firstName}  ${this.lastName}`
        }
    }
   
    const nico = new Player("joohee","kim","jj")
    nico.getFullName();	
   

3. class 를 타입으로 쓰기

    type Words = {
        [x:string]:string
    }
    //Words 타입은 string을 프로퍼티로 가지는 객체
    //words는 string형의 데이터 여러개가 들어가는 객체
   
    class Dictionary{
        private words: Words
        constructor(){
            this.words = {}
        }
        add(word:Word){
            //클래스를 타입으로 사용할 수 있다.
            if(this.words[word.term] === undefined){
                this.words[word.term] = word.def;
            }
        }
        def(term:string){return  this.words[term]}
    }
    // constructor 내부에 this.words = {}로 words 객체를 할당해줌
   	
    class Word{
        constructor(
            public term:string,
            public def :string
        ){}
    }
   
    const kimchi = new Word("kimchi","김치")
    const bab = new Word("bab","밥")
    const dict = new Dictionary()
   
    dict.add(kimchi);
    dict.add(bab);
   
    // dict: { "words": { "kimchi": "김치", "bab": "밥" } }
   

4. interface
   • type과 같이 객체의 틀을 잡아준다.
   • 다만 type은 데이터와 데이터 형식을, interface는 데이터 형식만 통제한다.

    type Team = "red" | "blue" | "white"
    type Height = 160 | 170 | 180
   	
    interface Player {
        name : string,
        team : Team,
        height : Height
    }
   	
    const song : Player = {
        name : "song",
        team :"blue",
        height : 160
    }
   

   • type과 인터페이스는 클래스와 마찬가지로 상속을 할 수 있다.

    //type 상속
    type User = {
        name : string
    }
    type Player = User & {
   
    }
    //interface 상속
    interface User{
        name : string
    }
   
    interface Player extends User{
   
    }
    //interface 문법 구조가 객체지향이라 더 이해하기 쉬운듯
   

   • class 처럼 interface 도 타입으로 사용할 수 있다.

    interface User{
        firstName:string,
        lastName:string
    }
   	
    function makeUser(user:User):User{
        return {
        firstName: "joohee",
        lastName:"kim"
        }
    }
   	
   	
    makeUser({
        firstName: "joohee",
        lastName:"kim"
    })
   

   • 추상클래스는 일반 클래스의 상속을 받기 위해 만들어진 청사진이며 JS로 변환된다.
   • interface는 JS에 존재하지 않는 용어이기 때문에 JS로 변환될 때 User는 노출되지않는다. 따라서 User에 해당하는 파일 사이즈를 줄일 수 있음.

    //추상클래스를 상속하는 코드
    abstract class User{
        constructor(
            protected firstName:string,
            protected lastName:string
        )
        abstract sayHi(name:string):string
        abstract fullName():string
    }
   	
    class Player extends User{
        fullName(){
            return `${this.firstName} ${this.lastName}`
        }
        sayHi(name:string){
            return `hello ${name} my name is ${this.firstName}`
        }		
    }
   	
    //interface를 상속하는 코드
    interface User{
        firstName:string,
        lastName:string,
        sayHi(name:string):string,
        fullName():string
    }
   	
    class Player implements User{
        constructor(
            public firstName:string,
            public lastName:string
        ){}
        fullName(){
            return `${this.firstName} ${this.lastName}`
        }
        sayHi(name:string){
            return `hello ${name} my name is ${this.firstName}`
        }
    }
   	
   

    //interface User를 상속한 코드가 JS로 변환된 코드
    class Player{
        constructor(firstName, lastName){
            this.firstName = firstName,
            this.lastName = lastName
        }
        fullName(){
            return `${this.firstName} ${this.lastName}`
        }
        sayHi(name:string){
            return `hello ${name} my name is ${this.firstName}`
        }
    }
   

   • type alias와 interface의 차이점은 TS 공식문서에도 잘 나와 있다. type alias와 interface의 차이점에 대한 TypeScript 공식 문서