[TS] TS Doc Handbook 1회독 - 8

Classes

Member Visibility

• public: 기본값. 전체 접근 가능.
• protected: 본인과 하위 클래스에서만 접근 가능. 기존 protected 필드를 하위 클래스에서 public으로 선언 시 public으로 사용되기 때문에 주의 필요. 형제 클래스에서 접근할 수 없음.
• private: 본인 클래스 내부에서만 접근 가능. 하지만 [](대괄호)를 사용해 접근할 수 있음. 실질적으로 값을 지키기 위해서는 클로져, WeakMaps, private 필드를 사용해야 한다.

Static Members

클래스는 static 멤버를 통해 클래스에서 직접 접글할 수 있습니다. Visibility를 모두 적용될 수 있고 상속됩니다.

 

Special Static Names

new, static, name, length, call은 속성명으로 사용할 수 없습니다.

 

Why No Static Classes?

C# 언어의 경우 static class가 있지만, TS에서는 객체를 사용하면 같은 역할을 대체할 수 있기 때문에 static class는 필요 없습니다.

static Blocks in Classes

클래스가 정의될 때 한 번 실행되어 정적 데이터를 초기화할 수 있습니다. try..catch를 함께 사용해 오류 처리를 해야 합니다.

 

ex) 외부 리소스 초기화, 정적 private 필드 계산 및 초기화, 환경에 따라 정적 필드 초기화

Generic Classes

interface처럼 제네릭 클래스를 만들 수 있습니다.

class GenericClass<Type> {
  val: Type;
  constructor(newVal: Type) {
    this.val = newVal;
  }
}

const genericClass = new GenericClass('class'); // string으로 자동 추론

 

Type Parameters in Static Members

제네릭 타입은 런타임에 존재하지 않지만 static 멤버는 런타임에도 존재하기 때문에 타입을 적용할 필요가 없습니다.

 

this at Runtime in Classes

중요한 것은 TS는 JS의 런타임에 영향을 주지 않는다는 것을 기억해야 합니다.

 

TS는 this의 이상한 결과가 나오는 에러를 예방해주려고 합니다.

 

Arrow Functions

화살표 함수를 사용하면 this가 화살표 함수를 감싸는 외부 환경을 참조하게 됩니다. 그렇기 때문에 class 내부에서 this를 사용하는 경우 화살표 함수를 활용하면 this가 다른 값을 가지는 경우를 예방할 수 있습니다.

 

하지만 메모리를 더 많이 사용하게 되고, 자식 클래스에서 super.함수를 사용할 수 없습니다. 그렇기에 적절하게 사용해야 합니다.

 

this parameters

TS에서 this를 함수나 메서드의 파라미터로 가질 수 있는데 컴파일 단계에서 지워집니다.

function func(this: any, x: string) {}

// output

function func(x: string) {}

 

이 this 파라미터를 사용하면 화살표 함수를 대신해서 사용할 수 있습니다.

 

하지만 this 파라미터를 사용하면 해당 함수는 반드시 해당 클래스의 인스턴스에서 호출되어야 합니다. this가 원하는 것을 가리키지 않기 때문에 아래 코드에서처럼 t.getName을 다른 변수에 할당할 수 없습니다.

class Test {
  name = 'nulzi';
  
  getName(this: Test) {
    return this.name;
  }
}

const t = new Test();

t.getName(); // nulzi

// 오류 발생
const temp = t.getName;
console.log(temp());

 

화살표 함수와 this 파라미터 방식은 상황에 맞게 사용하는 게 좋을 것 같습니다.

 

참고

https://www.typescriptlang.org/docs/handbook/2/classes.html#member-visibility