Frontend

TypeScript 4.9 버전 정리

mechaniccoder 2023. 2. 26. 11:48

Satisfies operator

satisfies 라는 operator가 추가됐다. 먼저 코드로 보자.

기존에는 아래와 같이 타입을 지정하면 string과 Record<name, string> 타입의 공통된 메서드만 사용할 수 있었다.

type User = {
  name: string | Record<name, string>;
}

const user: User = {
  name: 'test'
}

user.name.split('') // error!

하지만 satisfies를 활용하면 실제 값의 타입에 대한 메서드를 활용할 수 있으면서도 타입을 만족시킨다.

type User = {
  name: string | Record<name, string>;
}

const user = {
  name: 'test'
} satisfies User

user.name.split('') // working!

const user = {
  name: {
    name: 'test'
  }
} satisfies User

user.name.name // working!

Narrowing with in operator

in operator를 활용한 type narrowing 기능이 더 강력졌다. type narrowing 후의 타입을 살펴보면 Record<'name', unknown>과 인터섹션 타입을 이루고 있다.

function example(context: unknown) {
    if (context && typeof context === 'object') {
        if ('name' in context) {
            context.name // object & Record<'name', unknown>
        }
    }
}

Auto-accessors in Classes

accessor 키워드를 사용하면 getter, setter 및 private field까지 자동으로 만들어준다.

class User {
    accessor name: string;
}
class User {
    #__name: string;

  get name() {
    return this.#__name;
  }

  set name(value: string) {
    this.#__name = name;
  }
}

File-Watching Now Uses File System Events

기존에는 typescript에서 polling을 활용해 파일의 변화를 감지했다고 하는데 이제는 file system event를 활용해 감지한다고 한다. polling은 fallback으로 처리가 된다. cpu 사용량은 확실히 줄어들 것 같다.

“Remove Unused Imports” and “Sort Imports” Commands for Editors

vscode에서 organize imports 기능 활용하는 분이 많을 것이다. 이제는 sorting 기능과 remove기능이 따로 분리되어서 설정할 수 있다고 한다.

Performance Improvements

성능 개선도 있었는데 20%의 language service 성능 개선과 output 출력에 3%의 개선이 있었다고 한다.

마치며

눈여겨 볼 기능으로는 satisfies와 accessor 키워드 그리고 파일 변경에 있어 polling → file system event 업데이트 정도인 것 같다. TypeScript의 발전 속도가 엄청 빠른 것 같다. 버전 업데이트를 잘 follow up 해야겠다.

저작자표시