TypeScript(Classes)

Pre-Knowledge

객체 지향 프로그래밍(Object Oriented Programming)

⇒ 객체의 입장에서 보는것!!!

• 사람이 세계를 보고 이해하는 방법을 흉내 낸 프로그래밍 방법론 중 하나

⇒ 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다!

• “클래스”라고 불리는 데이터 모델의 청사진을 이용해 코드 작성

⭐ 4가지 주요 개념
1. Encapsulation(캡슐화) : 데이터와 기능을 하나의 단위로 묶는 것
2. Inheritance(상속) : 기본 클래스의 특징을 파생 클래스가 상속받는다. (부모/자식)
3. Abstraction(추상화) : 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념
4. Polymorphism(다형성) : 똑같은 메서드여도 다른 방식으로 구현된다.
⇒ 객체 내에는 “데이터와 기능이 함께 있다”라는 원칙에 따라 메서드와 속성이 존재합니다.

<클래스와 인스턴스>

• class ⇒ 하나의 모델이 되는 청사진(blueprint)
• instance ⇒ 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴

ES6 class라는 키워드를 이용해서 정의한다! (이전엔 funtion을 썼었음)

//ES6//
class Car { 
	constructor (brand, name, color) {} //생성자 함수 -> return 값 없음
}

//instance 생성하기
new avante = new Car ('hyundai', 'avante', 'black'); //각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메서드를 갖습니다.
new mini = new Car ('bmw', 'mini', 'white');
new beetles = new Car ('volkswagen', 'beetles', 'red');

//이전 function을 썼을때//
function 기계 (구멍) {
	this.q = 구멍;
	this.w = 'snowball';
}

//instance생성하기
var nunu = new 기계('consume');
var garen = new 기계('strike');

❓ 클래스와 함수의 차이
BOTH = 기능은 같다! 하나의 부모 개념인 클라스를 만들어, 이로 인해 생성된 자식 객체들을 동일한 클래스 내에서 다르게 구현하게끔 만들어준다.

DIFF
1. funciton은 ES6이전 문법으로 class키워드와 다르게 생성자함수인 constructor을 따로 생성해주지 않는다.
2. hoisting - 함수 선언은 호이스팅이 발생하지만, 클래스 선언은 호이스팅이 발생하지 않는다.
3. 클래스 생성자는 new와 함께 호출하지 않으면 에러가 발생한다!
4. 클래스는 항상 엄격모드로 실행된다.
5. 클래스 메서드는 열거할 수 없다. for…in으로 객체를 순환할 때, 생성자 함수는 prototype 프로퍼티에 지정된 함수 값을 반환하지만, class는 key값으로 함수를 반환하지 않는다.
따라서, class를 쓸 경우, 메서드(함수)는 다 따로 일일이 빼줘야한다.

❓ 속성과 메서드
속성 - ex) 자동차 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력 등
메서드 - 객체에 딸린 함수 ex) 연료 주입, 속력 설정, 운전 등

Contructor
⇒ 인스턴스 객체를 생성하고 초기화하는 메서드
⇒ 생성자 함수를 작성하지 않으면 기본 생성자(default constructor)가 제공된다.
⇒ 부모 클래스가 있고, 자식 클래스가 생성자 함수를 작성하지 않았다면 부모 생성자를 부른다.
⇒ 클래스 내에서 생성자 함수는 하나만 있을 수 있다.

extends

• extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class식에 사용됩니다.

class ChildClass extends ParentClass {...}

---

TypeScript (Classes)

• TS

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

const vini = new Player("vini", "An", "비니");
vini.nickName //instance 생성한 거에선 public만 호출/접근 가능!!

• JS

class Player {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.nickName = nickName;
    }
}

Abstract Class

• 다른 클래스가 상속받을 수 있는 클래스
• BUT!! 직접 새로운 인스턴스를 만들 수는 없다!!

Abstract Method

• abstract class 에선 abstract method를 가질 수 있다.
• abstract method는 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 method!
  • 단, method를 구현하면 안되고,
  • 메소드의 call signature만 적어둬야 합니다!
  • abstract method는 abstract class에서가 아니라 위 자식 class에서 구현해줘야함!
• 생성한 인스턴스나, 다른 자식 클래스에서도 abstract class 내에서 있는 private property | method는 접근 불가능!

- private ⇒ 그 해당 Class(User) 내에서만 사용 가능
- protected ⇒ abstract class(User)에서부터 생성된 다른 자식 class = extends된 class(Player)에서 이용 가능
but, instance에선(vini) 이용 불가능
- public ⇒ abstract class, 자식 class, instance에서 다 이용 가능

abstract class User {
    constructor(
        protected firstName: string, //protection level + name + type
        protected lastName: string,
        protected nickName: string
    ) {}
    
    abstract getNickName() : void //abstract method는 abstract class에서 call signature만 하고(type만 정의해주고)
    
    getFullName(){
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User{
    getNickName() { //abstract method는 하위 자식 class에서 구현해줘야함!
        console.log(this.nickName)
    }
}

const vini = new Player("vini", "An", "비니");
vini.getFullName()
vini.nickName //⛔️ 'nickName'속성은 보호된 속성이며 'User'클래스 및 해당 하위 클래스 내에서만 엑세스할 수 있습니다.

⭐️⭐️⭐️⭐️⭐️ 이 때, protection level은 JS에선 안보여!! ⭐️⭐️⭐️⭐️⭐️

---

Recap

type Words = {
    [key:string]:string //string type만을 가지는 property로 가지는 object (property의 name은 모르고 type만 먼저 알 때 쓰기 유용)
}

class Dict {
    private words : Words //1. create property
    constructor() { //2. manually initialize property
        this.words = {}
        
    }
    add(word:Word){ //3. 생성한 class를 type으로써 정의가능 = word는 Word클래스의 인스턴스
        if(this.words[word.term]===undefined){
            this.words[word.term]=word.def;
        }
    }
    def(term:string){
        return this.words[term]
    }
    remove(term:string){
		delete this.words[term]
	}
}

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

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

const dict = new Dict()
dict.add(kimchi) //{kimchi : 한국음식}
dict.def("kimchi") //"한국음식"

//이 사전을 바꾸게 하고 싶지 않아!!
kimchi.def="xxx"

//그러려면 위에 public을 유지하면서 readonly기능 추가해주기
//private이나 protected로 바꾸지 않고!
class Word {
    constructor(
        public readonly term:string, 
        public readonly def:string
    ) {}
}