[TIL]Typescript Class

오늘 공부한것 & 기억할 내용

Class

• Typescript가 객체지향 코드를 안전하고 더 좋게 만들도록 도와준다.

//파라미터만 작성하면 typescript가 알아서 constructor 함수를 만들어준다.
class Plyer{
	constructor(
  		private firstname:string,
        private lastname:string,
        public nickname:string
  ){}
}

//Javascript에서 보이는모습
//javascript는 private, public으로 보호해주지 않는다.
class Plyer{
	constructor(firstname,lastname,nickname){
  	this.firstname = firstname;
  	this.lastname = lastname;
	this.nickname = nickname
    }
}

const nico = new Player("nico","las","니꼬");
//private가 들어가 있기에 typescript에서 에러나면서 실행되지 않는다.
//public이 들어간 nickname만 가능
nico.firstname

abstrack class

• 추상 클래스는 다른 클래스가 상속 받을 수 있는 클래스다.
• 직접 새로운 인스턴스를 만들 수 없다.(오직 다른곳에서 상속 받을 수 만 있는 클래스이다)
• 추상 메소드는 추상 클래스를 상속받는 모든것들이 구현을 해야하는 메소드이다.

abstrack class User{
	constructor(
  		private firstname:string,
        private lastname:string,
        private nickname:string
  ){}
  //추상 메소드(클래스내에서 만드는 구현되어 있지 않은 함수)
  abstrack getNickname():void   
}

class Plyer extends User{
  	//User를 extends했기에 추상메소드를 구현해야한다.
	getNickname(){
      	//User에서 nickname이 private이기에 사용하지 못한다.
      	//이를 해결하기 위해 User안의 constructor에 들어있는 private를 지우고 protected를 넣어준다
      	//그러면 User를 상속받은 Player안의 메소드에서 nickname을 불러올 수 있지만 class 바깥에선 nico.nickname을 불러올 수 없다
    	console.log(this.nickname)
    }
}

class를 활용해 단어장 만들기

type Words = {
    [key:string]:string
}

class Word{
    constructor(
  		//readonly을 넣었기때문에 외부에서 값을 수정할 수 없다.
        public readonly term:string,
        public readonly def:string
    ){}
}

class Dict {
    private words:Words
    constructor(){
        //초기화 시켜준다
        this.words = {}
    }
  	//추가하는 함수(메소드)
    add(word:Word){
      	//값이 비어있지 않다면 term에 def을 할당한다 (kimchi: "korea")
        if(this.words[word.term] === undefined){
            this.words[word.term] = word.def
        }
    }
  	//값이 있는지 확인하는 함수
    deff(term:string){
        return this.words[term]
    }
  	//값을 확인 후 중복된 값이라면 삭제
    del(term:string){
          if(this.words[term] !== undefined){
              delete this.words[term]
          }
      }
}

const kimchi = new Word("kimchi","korea")

const dict = new Dict

dict.add(kimchi)
dict.deff("kimchi")
console.log('dict',dict)

배운점 & 느낀점

class는 접해보지 않아서 이번 강의를 들으며 살짝 버겁기는 했다.
강의 하나를 들으며 계속 검색해보고 정리하며 듣느라 시간이 오래걸렸는데 완벽히 이해는 아니지만 어느정도 이해는 한거같다.
그리고 추상클래스를 Interface로 대체하여 사용가능하다.

📍class를 이번에 배워보며new Swiper() 괄호는 대체 무슨 용도인지 머리가 터질뻔했다.

1. new Swiper()를 호출하면 constructor가 실행된다.
2. constructor는 객체의 초기상태를 설정하는 역할이다.
3. ()안의 인자와 constructor안의 인자가 일치해야한다.

📍class도 function과 같이 재사용성이 좋은거같다.
처음 이해를 하지 못할때는 이걸 대체 왜 사용하나 했는데 정리하고 계속 생각해보고 나니 하나만 잘 만들어두면 이곳저곳 써먹기 좋은걸 깨닳았다.
깨닳고 나니 업무하면서 사용했던 new Swiper()가 생각났다.
등잔밑이 어둡다고 알고나니 보이고 이해가 가는게 신기하다.

class Brand {
    constructor(public brand: string, public model: string) {}
}

const myCar = new Brand("KIA", "Seltos");