Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 프로토콜
- 개발자공부
- 프론트엔드 공부
- 자바스크립트
- 자바스크립트학습
- JavaScript
- JS
- 프론트엔드
- 개발자지식
- 자바스크립트 학습
- 리액트
- node.js 학습
- 정보처리산업기사
- 프론트엔드학습
- js학습
- nodejs
- node.js
- node.js학습
- 프론트엔드공부
- MongoDB
- node.js프로젝트
- react
- 자바스크립트기본
- 개발공부
- 네트워크
- 개발자학습
- js ajax
- Vue.js
- vue.js학습
- API
Archives
- Today
- Total
dada's
Typescript에서의 Class, 추상클래스 본문
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
'Typescript' 카테고리의 다른 글
Typescript 사용 이유 & 오버로딩(overloading)과 제네릭(Generic) (0) | 2023.11.10 |
---|
Comments