5/4(수) - TypeScript Class

길고 꾸준하게·2022년 5월 4일

TypeScript퍼먹기

목록 보기

4/6

Class in JavaScript / TypeScript

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

//in TS
class Player{
    constructor(
        private firstName:string,
        private lastName:string,
        private readonly nickName:string
    ){}
}

TS는 생성자함수를 통해 초기화를 시켜줄필요 없이 인자에 원하는 타입 + 엑세스 수정자를 지정만해주면 알아서 초기화를 해준다.

접근 수정자 (Access Modifiers)

나는 private,public,protected등 이런것들이 뭐라고 불리는지 궁금했는데. 위와같이 불리는 거였다..

public
모든 클래스에서 접근이 가능함 (default)
private
해당클래스를 제외하고 접근이 불가능함 (상속한 자식클래스까지도 접근 불가.)
readonly속성을 쓰면 접근은 가능하지만 데이터수정은 불가능한 상태가된다.
protected
private와 마찬가지지만 상속한 자식클래스에서는 접근이 가능하다

Abstract class (추상 클래스)

추상클래스는 일반적으로 확장할 파생 클래스의 동작을 정의하는데 사용한다.

일반적으로 확장할 파생 클래스 -> 추상클래스를 상속할 클래스들
그 클래스의 동작 -> 추상메소드

이렇게 이해했다. 즉 앞으로 이 추상클래스를 상속할 클래스들은 ~~한 동작을 꼭 정의해줘야하는거야! 라고 이해했다.
그렇기때문에 일반적으로 최소 하나이상의 추상메서드가 포함되는것 같다.

추상 클래스는 직접 인스턴스화할 수 없다.

추상클래스'만' 으로 인스턴스 객체를 만들수는 없다 -> 그 추상클래스를 상속해서 새로운 클래스를 만들어야한다.

abstract class Player2{ //생성할 클래스 앞에 abstract
  constructor(
    protected name:string
  ){}
  abstract getNickName():void //추상메서드
}

const test = new Player2('foo') //err 추상클래스로 직접 인스턴스객체를 만들순 없다.

Abstract method (추상 메서드)

구현을 포함하지 않으며 파생 클래스 에서는 추상메서드를 구현'해야'한다.

구현을 포함하지 않는다 -> call signature만 적어준다로 이해했다.
파생클래스 에서는 추상메서드를 구현해야한다 -> 추상클래스를 상속한 클래스는 해당 추상메서드를 '반드시' 구현해야한다 로 이해했다.

추상클래스 코드 예시를 보면 추상메서드의 body(구현부분 -> {})가 비어있는걸 볼수있다
=>call signature만 적혀있다. 파생클래스들에게 이런 call signature을 가진 메소드를 반드시 포함해야해! 라고 말하는 느낌.

Static method(스태틱 메서드)

인스턴스객체를 만들지 않고도 클래스 내부의 인자+함수를 사용할수 있는 방법

class Exam{
	constructor(name:string){}
    
    static getName(){ //static method
    	return this.name
        }
        
 Exam.getName() // 클래스에서 접근

type선언 : obj의 key이름이 정확하게 정해지지 않았을때.

type Exam = {
	[key:string]:string //구조를 보면 느낌이 올것같다 (당연히 key는 원하는 이름으로 커스텀이 가능할거다)
}

Property 'x' has no initializer and is not definitely assigned in the constructor.

//문제의 코드
class Exam{
	private exam:Exam // 생성자함수로 exam필드를 초기화시키지 않아서 생기는 오류
}
// after
class Exam{
	private exam:Exam
}
    constructor(){
    	this.exam = {} // 초기화시켜주면 해결됨.
    }
}

에러핸들링보단 사실 왜 저렇게 클래스를 생성해줄까? 무슨차이일까? 나름대로 생각을 해봤다 왜냐면 맨위의 클래스 생성 방법과 다르기때문인데.

class Player{
    constructor(
        private nickName:string
    ){}
}
//
class Player{
	private nickName:string
	constructor(){
    this.nickName = ""
    }

나름대로 콘솔에 찍어보면서 확인한결과 전자는 인스턴스객체를 만들때 인자를 받고, 그 기반으로 필드가 생성되고.
후자는 인자가 없이 생성자함수내에 초기화시키는 코드로 만들어지는데 (어찌보면 같은말일거다)
본인 나름의 예를들어서 이해한바로는 이렇다. 캔음료 생산을 예를 들자면