[TS] 타입스크립트에서의 클래스

📌 클래스 메서드(멤버 함수)

매개변수 타입이나 기본값을 지정하지 않으면 any타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 인수가 필요, 재귀 함수가 아니라면 대부분 반환 타입 유추 가능

메서드 호출시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시

📌 클래스 속성(attribute)

클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다.

class FieldTrip {
    destination  : string; // 불필요

    constructor(destination : string){ // 여기서 이미 쓰였기 때문에 타입 추론을 해준다. 
        this.destination = destination;
        console.log(`We're going to ${destination}!`);

    this.nonexistent = destination;
    //Error: Property 'nonexistent' does not exist on type 'FieldTrip'
    }
}

만약 자바스크립트였다면 FieldTrip를 생성했을 것인데, 타입스크립트는 컴파일언어이기 때문에 이전에 오류가 생기게 된다. 

=> 사전 오류 방어 가능

📌 클래스 속성 - method

class WithMethod {
    myMethod() {}
}

new WithMethod().myMethod === new WithMethod().myMethod; // true (:prototype)

myMethod()는 함수 오브젝트에 등록이 되게 된다. 

myMethod() 메소드는 new를 하는 순간 function object에 등록이 되게 된다. => 둘의 주소가 같기 때문에 동일한 것으로 인식되게 된다. 

📌 클래스 속성 - 초기화 검사

undefined타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인한다. 

class WithValue {
    immediate = 0; // OK
    later : number; // OK (constructor에서 할당)
    mayBeUndefined : number | undefined; // OK (undefined가 되는 것이 허용됨)
    unused : number;  // strictPropertyInitialization: true  (tsconfig.json)
    // Error : Property 'unused' has no initializer and is not definitely assigned in the constructor.

    constructor(){
        this.later = 1;
    }
}

만약 위에 정의가 안되어 있다면 constructor에 초기화하면 되고, 만약 둘다 초기화를 안할 경우 !를 통해 정의만 해주면 된다. 
=> not-null assertion , 하지 않을 경우 런타임 시에 오류가 나게 된다. , 제일 좋은 건 !를 아예 쓰지 않는 것이 좋다. ( 쓸 경우 주석 달아주기 ! ) 

옵셔널(?) 가 아닐 경우 타입스크립트에서는 모두 필수값이다. 

 

이러한 엄격한 초기화 검사를 통해 클래스 속성에 값을 할당하지 않는 실수를 예방할 수 있어 유용하다.

 

📌 선택적 속성 (?)

선언된 속성 이름 뒤에 ?를 추가해서 속성을 옵션으로 설정한다. 

 

📌 읽기 전용 속성 (readonly)

readonly 키워드는 초기화 할때 값을 설정할 수 있는 속성을 정의할 때 사용한다. 

생성자에서만 할당 가능하고, 그 외에는 수정이 불가능하다. 주로 상수 처럼 변하지 않아야 하는 값에 사용한다. 

TypeScript ➡️ JavaScript 변환된 모습

TypeScript의 readonly는 런타임에 사라진다. JavaScript로 변환되면 아무런 장치가 없어지게 된다. 
실제로 const처럼 완전한 보호는 되지 않고, 개발 중 타입  검사에서만 오류가 뜨는 용도이다.

📌 readonly + Literal

const와 유사하다고 생각하면 편하다.

readonly explicit: string = 'Hello, Typescript';
readonly implicit = 'Hello, Typescript';

• 여기서 explicit은 타입을 명시적으로 string이라고 줌으로써 다른 string도 허용된다. 물론 readonly이기 때문에 변하진 않지만 !
• implicit은 타입을 명시적으로 주지 않았기 때문에 리터럴 타입인 "Hello, Typescript" 로 추론을 하게된다.
  ➡️ 즉, 값 자체가 타입이 된다., "Hello, Typescript" 이외의 다른 문자열은 넣으면 오류가 생기게 된다. 

타입스크립트는 타입이 명시가 되지 않았을 경우, 타입을 최대한  좁은(Narrowing)으로 추론하려 한다. 

const도 할당을 하면 이후에 변경을 할 수 없기 때문에 readonly대신 const를 쓰더라도 유사하게 "Hello, Typescript" 라는 리터럴 타입으로 추론되게 된다. 

const a = "hi"; // 타입: "hi"
let b: typeof a = "hi"; // b는 "hi" 타입만 가능! 다른 string은 ❌

const obj = { status: "ok" } as const;
// obj.status는 "ok" 타입!

이 부분이 사실 글만 읽고 무슨 말인지 와닿지 않았는데 const와 유사하다고 생각하니까 쉽게 이해되는 것 같다.

📌 타입으로서의 클래스

class Hello{
// 생략
}

let hello: Hello;

클래스의 동일한 멤버를 모두 포함하는 모든 객체 타입을 클래스에 할 수 있는 것으로 간주. 
구조적 타이핑이 선언되는 방식이 아니라 객체의 형태만 고려하기 때문이다.

🤔 구조적 타이핑
타입을 판단할 때 타입의 이름으로 판단하는 것이 아니라 객체의 내부 속성들이나 값의 내부 구조, 그 속성들의 타입 구조를 파악하는 것을 의미한다. 

📌 클래스와 인터페이스

클래스는 implements 키워드를 통해 인터페이스를 구현할 수 있다., 인터페이스에 정의된 모든 속성과 메서드를 반드시 구현해야 하고, 다중 인터페이스도 구현이 가능하다.

• 클래스 ➡️ 설계도, 인터페이스의 규칙을 지키면서 실제로 구현하자( 코드 작성 )
• 인터페이스 ➡️ 규칙, 이런 속성과 메서드를 가지고 있어야 한다. 

class A implements B
=> A클래스는 B인터페이스에 정의된 모든 속성과 메서드를 반드시 구현해야 한다.
⭐️ 하나의 틀로 돌려막기 하자 ⭐️

📌 클래스 확장(상속,extends)

부모 클래스의 속성과 메서드를 자식 클래스가 상속받아 사용 하는 것이다.

class Dog extends Animal {
  constructor(name: string) {
    // ❌ super() 없이 this 사용시 오류 발생
    this.name = name;
    super(name); 
  }}

자식 클래스가 constructor을 가질 경우 반드시 자바스크립트/타입스크립트에서는 this를 사용하기 전 super()를 먼저 호출해야 한다. 

 

또한 하위 클래스는 상위 클래스 타입으로 할당 가능하다.  => 큰 타입에 작은 타입을 넣을 수 있다. => 업캐스팅

📌 재정의(override) 메서드

override : 상속받은 부모의 클래스의 메서드나 속성을 자식 클래스에서 다시 정의하는 것이다.

• 함수의 파라미터가 오히려 줄어들면 안된다. 오히려 더 많아지거나 같아야 한다. ➡️ 할당 가능성 규칙
• 속성은 구체화 되야 한다, 부모가 가진 속성을 자식이 선택적으로 가질 수 없다.
  예를 들면 string| number였던 타입이 string이 된다.

📌 추상 클래스

구현 일부만 제공하고 나머지는 자식 클래스가 반드시 채우도록 강제하는 클래스

일부 메서드를 구현하지 않고 대신 하위 클래스가 해당 메서드를 제공할 것을 예상하고 기본 클래스를 만드는 방법이 유용할 수 있다.

abstract class Animal {
  abstract makeSound(): void; // 선언만 있음 (구현 X)

  move() {
    console.log("움직이는 중...");
  }
}

class Cat extends Animal {
  override makeSound() { // override를 통해 구현이 되지않고 초기화만 된 부분을 구현한다. 
    console.log("야옹~");
  }
}

 

📌 접근 제한자

• public : 누구나 접근 가능
• protected : 해당 클래스와 상속 받은 클래스 내부만
• private : 해당 클래스 내부에서만 -> 접근 불가 ( #은 JavScript, private은 TypeScript )

📌 static , 정적 속성

• 인스턴스 생성한후 접근할 수 있는 것이 아닌 클래스 자체에 속하는 속성/메서드 이다.
• 인스턴스에서 this.count로 접근하면 안 됨 ❌
• 프로그램 실행 중 한 번만 메모리(힙)에 올라간다.

📌 Base ,

• 부모의 부모