[TypeScript] 4. Classes & Interfaces

📌 4.0 Classes

• js에선 constructor 함수를 만들고 그 안에 this.firstName = firstName이런 코드를 넣어줬음
• ts에선 파라미터를 써주기만 하면 ts가 알아서 constructor 함수 만들어 줌

(아래 화면 참고)

• 기본적인 class 생성

class Player { 
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) {}
}
// js엔 private, public이 작동하지 않음
const nico = new Player("nico", "las", "니꼬")

// nico.firstName // private이라서 컴파일 오류

• 추상 클래스 (abstract class) : 다른 클래스가 상속받을 수 있는 클래스 (= 부모 클래스)
  -- but 이 클래스는 직접 새로운 인스턴스 생성 불가능
• 추상 클래스 안에 추상메소드를 만들 수 있음
  -- 추상 메소드 : 추상 클래스 안에서 구현하지 말고, 메소드의 call signature만 적어둬야 함
  -- 해당 추상 클래스를 상속받는 모든 것들이 추상 메소드를 반드시 구현해야 함
  ) 메소드 : 클래스 안에 존재하는 함수
  ) 기본적으로 접근 제어자는 모두 public
  *) protected : 부모 & 자식 클래스에서만 접근 가능하게 하는 접근 제어자

abstract class User { 
    constructor(
        protected firstName: string,
        protected lastName: string,
        protected nickname: string
    ) {}
    // 추상 메서드
    abstract getNickName(): void

    // 기본 메서드 : firstName + lastName을 한 문자열로 출력해줌
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User {
    getNickName() {
        console.log(this.nickname)
    }
}
const nico = new Player("nico", "las", "니꼬");
nico.getFullName()
nico.getNickName()	// User 클래스 상속받았으므로 메소드 호출 가능
// console.log(nico.nickname) // protected라서 클래스 밖에서 접근 불가

실행 결과

📌 4.1 Classes Recap

실습) 해싱 알고리즘을 쓰는 해시맵 구현하기 : 단어 사전

• 사전에 새 단어 추가 & 단어 찾기 & 단어 삭제 메소드 구현
  public으로 값은 보여주고 싶지만 수정은 못하게 하고 싶으면
  property를 readonly로 만들어주면 됨
  다른 누군가가 데이터를 덮어쓰는 걸 방지하기 위한 방벙 : private, protected, public readonly(<- only in ts)

// Words 타입 : string만을 property로 가지는 object임
// 아래의 문법은 object의 타입을 선언할 때 사용
// object가 제한된 개수의 property 또는 key를 가지도록 정의해주는 방법
type Words = {
    [key: string]: string
}

class Dict {
    // words 프로퍼티가 생성자부터 바로 초기화되지 않고 내가 원하는 대로 수동으로 초기화시킴
    private words: Words
    constructor(){
        this.words = {}
    }
    // 새 단어 추가 메소드
    add(word: Word){// 파라미터가 어떤 클래스의 인스턴스이길 원하면, 파라미터에 클래스를 타입처럼 사용 가능함
        // 주어진 단어가 아직 사전에 존재하지 않으면
        if(this.words[word.term] === undefined){
            this.words[word.term] = word.def
        }
    }
    
    // 단어 삭제 메소드

    // 단어 업데이트 메소드


    // term을 이용해서 def를 찾는 기능
    def(term: string){
        return this.words[term]
    }
}

class Word {
    constructor(
        public readonly term: string,
        public readonly def: string
    ) {}

    // 단어의 정의 추가 메소드

    // 단어의 정의 수정 메소드

    // 단어 출력 메소드
}

const kimchi = new Word("kimchi", "한국의 음식");

const dict = new Dict()

dict.add(kimchi);
dict.def("kimchi");

📌 4.2 Interfaces

인터페이스는 타입과 비슷하지만 타입이 더 많은 용도로 쓰임

< 타입 >

• object의 모양을 정해줌
• 타입 alias 만들 수 있음
• 타입으로 concrete 타입의 특정 값을 가지게 할 수 있음

// 여기선 string 타입의 특정 값들인 "red" | "blue" | "yellow"
type Team = "red" | "blue" | "yellow"
type Health = 1 | 5 | 10

type Player = {
    nickname: string,
    team: Team
    health: Health
}

const nico: Player = {
    nickname: "nico",
    team: "red"
    health: 1
}

< 인터페이스 >
인터페이스는 오직 1가지 용도 가짐
: object의 모양을 정해줌
=> 이 용도로 쓸 땐 타입보다 인터페이스를 쓰는 걸 추천함 (OOP처럼 보여서 가독성 굿)

// 위의 Player 타입 코드와 동일한 뜻임
interface Player {
    nickname: string,
    team: Team
    health: Health
}

인터페이스는 클래스와 닮았음
예시를 통해 알아보자
동일한 내용의 코드를 위에선 인터페이스로 구현했고, 아래에선 타입으로 구현했다
인터페이스를 상속하는 건 extends로, type을 상속하는 건 & 연산자를 이용한다

interface User {
    name: string
}

interface Player extends User {
}

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

type User = {
    name: string
}

type Player = User & {
}

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

• property들을 축적시킬 수 있다
  : 동일한 이름의 인터페이스를 여러 개 만들면 ts가 알아서 하나의 인터페이스로 합쳐줌
  (타입에선 안 됨)

interface User {
    name: string
}
interface User {
    lastName: string
}
interface User {
    health: number
}

// User 인터페이스 3개가 합쳐져서 nico 객체는 nico.name, nico.lastName, nico.health 프로퍼티를 모두 가짐
const nico: User = {
    name: "nico",
    lastName: "n",
    health: 1
}