dada's

Typescript에서의 Class, 추상클래스 본문

Typescript

Typescript에서의 Class, 추상클래스

dykang 2024. 1. 24. 15:04
728x90
**이 글은 기본적인 Typescript 문법을 이해하고 복습을 위해 노마드 코더님의 typescript로 블록체인 만들기 강의를 보며 정리한 글입니다! 기본적인 문법 공부 후 읽으시는 걸 추천 드립니다.

 

 

✅ 알아둘 개념

  • private : 외부에서 접근 안되고 클래스 안에서만 접근가능, 추상 클래스로 상속받아도 사용안됨
  • protected: 외부에서 접근은 안되지만 상속받은 클래스에서 사용가능
  • public: 외부든 어디든 사용 가능
class Player {
	constructor(
		private firstName:string,
		private lastName:string,
		public nickName:string
	) {}
}

const 찰밥 = new Player("오", "찰밥", "모찌고메")

찰밥.firstName // private이기때문에 에러남 => 자바스크립트로 컴파일안됨
찰밥.nickName // 잘 작동함

 

💡 추상 클래스 : 다른 클래스가 상속받을 수 있는 클래스

추상 클래스는 직접 새로운 인스턴스를 만들 수 없다

추상 클래스 안에 추상 메소드를 만들수 있다.

💡  추상 메소드 : 추상 클래스를 상속받는 모든 인스턴스들이 정의를 해야하는 메소드

추상 클래스나 메소드를 만들고 싶으면 앞에 adstract를 붙여주면 된다.

추상 클래스를 상속받을때는 extends를 붙여준다.

// 위의 클래스를 추상클래스로 만든다면
abstract class User {
	constructor(
		// private firstName:string,
		// private lastName:string,
		// private nickName:string
		// private를 쓰면 추상클래스를 인스턴스화 할 수 없다
		// 외부로부터는 보호되지만 다른 자식클래스에서 사용하고 싶으면 private말고 protected를쓰자
		protected firstName:string,
		protected lastName:string,
		protected nickName:string
	) {}
	getFullName(){
		return `${this.firstName} ${this.lastName}`
	}
	// 추상 메소드 call signature만 적어줌
	abstract getNickName():void
}

class Player extends User {
	// 추상 메소드가 있기 때문에 정의 해줘야함
	// private 쓰면 접근 못했는데 protected쓰면 상속받는 클래스 안에서는 접근가능
	getNickName(){
		console.log(this.nickName)
	}
}

const 찰밥 = new Player("오", "찰밥", "모찌고메")

찰밥.getFullName() // 잘 작동함 메소드 앞에 private붙이면 에러남
찰밥.firstName // protected이기 때문에 에러남

 

✨ 코드 챌린지 : 사전 만들기  

type Words = {
	// 이 문법은 key, value 둘 다 string이여야 한다는 문법임
	// []안에 key이름은 중요하지 얂음 뭐든 상관없음
	// 제한된 양의 property 혹은 key를 가지는 타입을 타입을 정의해주는 방법
	// property 이름은 모르지만 타입은 알때 사용
	[key:string]: string
}

class Dict {
	private words: Words // object안에 key:value 둘다 스트링으로 들어가는 타입
	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]
	}
	del(term:string){ // 단어삭제 기능
        if(this.words[term] !== undefined){
            delete this.words[term]
        }
    }
}

class Word { // Dict클래스에서 add 함수의 property의 타입으로 들어감
	constructor(
		public term: string, // 단어
		public def: string // 설명
		// 만약 막 수정하지 못하도록 하려면 readonly추가(그럼 수정 못함)
		public readonly term: string,
		public readonly def: string
	){}
	modifyDef(def:string){ // 설명 수정 기능
		this.def = def
	}
	addDef(def:string){ // 설명 추가 기능
		this.def = `${this.def},${def}` 
 	}
}

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

const dict = new Dict()

dict.add(kimchi)
dict.def("kimchi") // "한국음식"
kimchi.addDef("존맛") // Word {term: 'kimchi', def: '한국음식,존맛'}
kimchi.modifyDef("쥰맛탱김치") //Word {term: 'kimchi', def: '쥰맛탱김치'}
728x90
Comments