[TypeScript/타입스크립트] 클래스(Class)개념 이해하기(⚠내마음대로 정리했음주의⚠)

 

 

 

➜ Basic Types 기본타입 문법

➜ function 함수 문법

➜ Array&Tuple 배열과 튜플

➜ 클래스(Class) (⚠내마음대로 정리했음주의⚠)

➜ 인터페이스(interface)

➜ 인덱스 시그니처(Index Signature), Keyof Assertion

➜ 내장함수, 메서드, 접근제한자 총정리

 

 
 
자바스크립트에는 class 개념이 부재하기 때문에 처음 이해가 어려울 수 있다.흑흑ㅠ 
 
나는 코딩테스트를 공부하기위해 파이썬을 학습했었고 파이썬에는 클래스 개념이 존재하기 때문에
타입스크립트의 클래스를 쪼금(?)더 이해하기 편했다.
 
여튼 아래는 내마음대로 클래스 중구난방 이해한 과정을 남기려고한다ㅎㅎ..
글도 내 구어체로 막 쓸 예정 ㅎㅎ..
 
타입스크립트는 명시적이다!!!! 머릿속에 새기자.
(자스는 넘 자유분방햇!!!!)
 
 
 

 

class Coder {

    secondLang!: string

    constructor(
        public readonly name: string, 
        readonly music: string,
        private age: number,
        protected lang: string = 'Typescript'
    ) {
        this.name = name
        this.music = music
        this.age = age
        this.lang = lang
    }

    public getAge(){
        return `Hello, I'm ${this.age}`
    }
}

여기 부모인 Coder 클래스가 있다.

여기서 constructor는 클래스의 생성자!이다.

그리고 접근제한자는 속성 앞에 붙어서 접근권한을 지정해준다.

• public: 다 가능, 생략하면 기본값(근데 왜 있음? 타스는 명시적이라고!)
• private: 클래스 내부에서만 접근가능
• protected: 클래스 내부 및 상속된 클래스에서만 접근가능

 
 
 
 

---

 
 

반응형

 

class WebDev extends Coder{ // extends: 클래스 상속
    constructor(
        public computer: string,
        name: string,
        music: string,
        age: number,
    ){
        super(name, music, age) //super: 부모 클래스의 생성자를 호출
        this.computer = computer
    }

    public getLang(){
        return `I write ${this.lang}`
    }
}

그리고 여기 자식 WebDev 클래스가 있다.

extends로 클래스를 상속받을 수 있다.

 
 
?!엥 잠만 근데 왜 computer 하나 추가한 자식 클래스를 만드는데 

        name: string,
        music: string,
        age: number,

왜 부모한테 있는 이건 왜 또 씀? 
==> 타스는 명시적이다!!! 계속 말해주자!!!
 
그리고 보통 실무에서는

constructor(
    public computer: string,
    parentName: string,
    parentMusic: string,
    parentAge: number,
) {
    super(parentName, parentMusic, parentAge);
    this.computer = computer;
}

부모 클래스의 속성과 생성자 매개변수를 구분할 수 있도록 구별해서 쓴다고 한다!

 
 
 

---

 
 
 

super 는 또 뭐지?

슈퍼는 부모 클래스인 Coder의 생성자를 호출한다.
부모인 Coder 클래스의 생성자가 실행되어 상속된 속성들을 초기화한다.
 
이게 무신소리여ㅠㅠㅜ 
 
그니까 super(name, music, age) 이게

constructor(name: string, music: string, age: number) {
    this.name = name;
    this.music = music;
    this.age = age;
}

이거랑 똑같다는 말씀!!!
 
 
근데 여기서 

 this.name = name;

이 this.속성 = 속성; 이게 무슨 말인지 모르는 사람들이 한트럭일 것 이다. 바로 나 ~ㅋㅋㅋㅋ
 
this는 한마디로 이 클래스의 속성은 속성이다! 라고 다시한번 정확히 말해준다! 라고 생각하면 되는 것이다!
--> 이 클래스의 속성은 주어진 속성 값으로 초기화한다. (초기화라는게 걍 덮어쓴다라고 생각하기)
 
걍 클래스를 선언할때 this는 무조건 함께한다고 생각하면 된다~ 이 말씀!
글고 자식 클래스에서 this쓸때는 super 쓰면된다~ (귀찮은거 한방에 해줘서 슈퍼인가봄ㅋㅋ)