[Daily Post] 230328

[Daily Post]는 매일매일 탐구한 내용을 간략하게 기록하는 포스트입니다.
따라서 정리되지 않은 내용과 추측을 포함하고 있을 수 있습니다.
더 체계적인 형식을 갖춘 글은 해당 카테고리의 포스트를 확인해주세요 :)

Daily Study

TypeScript

• Abstract Class: 다른 클래스가 상속받을 수 있는 클래스

  • abstract class className으로 생성
  • 추상 클래스로는 인스턴스를 생성할 수 없다.
  • 추상 클래스는 상속하는 것만 가능하다.

• Abstract method vs. Method in abstract class

  • abstract method & class를 사용하는 이유: 표준화된 형태(청사진)을 바탕으로 코드를 확장하기 위해.
  • method in abstract class: 구현하지 않고 call signature만 생성해둬야 한다

• public vs. protected vs. private

  접근가능 범위	public	protected	private
  선언 클래스 내부	O	O	O
  자식 클래스 내부	O	O	X
  인스턴스	O	X	X

• Generic, interface, placeholder

interface ownStorage<T> {
  [key: string]: T;
}

class localStorage<T> {
  private storage: ownStorage<T> = {};
  set(key: string, value: T) {
    this.storage[key] = value;
  }
  remove(key: string) {
    delete this.storage[key];
  }
  get(key: string): T {
    return this.storage[key];
  }
}

const stringStorage = new localStorage<string>();
/// polymorphism, placeholder, call signature를 바탕으로
/// TS가 stringStorage 생성을 위해 코드를 재조합

• System Configuration

  • Next.js, NestJS, CRA를 사용하는 경우 TS를 직접 설정할 필요는 없다.

  • 수동 설정을 직접 진행하면서 TS 프로젝트의 구조를 이해해보자

  • npm init -y, npm install -D typescript, mkdir src 등 실행 필요

  • tsconfig.json 파일은 변경 안된다. 이름 그대로 따라야 함.

    • include: 컴파일 할 파일의 범위(경로) 설정
    • target:
    • lib: library declaration
    • ES6, DOM 등을 설정 가능. DOM을 설정해두면 document.querySelector()등을 TS가 자동완성한다
  • mpm i -D ts-node로 빌드 없이 바로 실행가능