Typescript 4.9

2022년 11월, Typescript 4.9 RC(Release Candidate)가 발표되었다. RC이므로 정식 릴리즈 전까지 중요한 버그 수정 외 변경사항은 없을 예정이다.

 

이번 v4.9가 담은 변경사항을 알아보자.

 

satisfies

기존에는 다음과 같이 코드를 작성할 수 없었다.

type DataType = Record<string, string | number>;

const data: DataType = {
  name: 'John',
  age: 30,
};

const upperCasedName = data.name.toUpperCase(); // error
const nextAge = data.age + 1; // error

console.log(upperCasedName, nextAge);

data.name, data.age가 각각 string인지 number인지 좁혀지지 않고 그저 string | number 타입으로만 추론되었기 때문이다.

 

const data = {
  name: 'John',
  age: 30,
};

const upperCasedName = data.name.toUpperCase();
const nextAge = data.age + 1;

console.log(upperCasedName, nextAge);

위와 같이 data의 타입을 명시하지 않음으로써 문제를 해결할 수 있지만, 이 경우 data가 특정한 유형을 따르도록 보장할 수 없고, 속성명의 오타를 캐치하지 못하게 된다.

 

satisfies는 표현식의 결과 타입을 변경하지 않으면서도 표현식이 특정 타입과 일치하는지 확인할 수 있다.

type DataType = Record<string, string | number>;

const data = {
  name: 'John',
  age: 30,
} satisfies DataType;

const upperCasedName = data.name.toUpperCase();
const nextAge = data.age + 1;

console.log(upperCasedName, nextAge);

 

in

in 은 새로운 것은 아니지만, 더 강력해졌다. 기존에는 다음과 같이 코드를 작성할 수 없었다.

function func(data: unknown) {
  if (data && typeof data === 'object') {
    if ('name' in data && typeof data.name === 'string') {
      const upperCasedName = data.name.toUpperCase();
      console.log(upperCasedName);
    }
  }
}

name 속성이 data 안에 존재함을 확인했음에도 불구하고, data의 타입은 여전히 object로 추론되기 때문에 data.name으로의 접근이 안 된다는 것이다.

 

하지만 TypeScript 4.9부터는 이제 in으로 해당 속성이 존재함을 확인했다면, data의 타입이 다음과 같이 추론된다.

unknown -> object -> object & Record<"name", unknown>

따라서 위 코드는 이제 유효하게 된다!

 

accessor

class User {
  accessor id: string;

  constructor(id: string) {
    this.id = id;
  }
}

accessor 키워드는 클래스에서 해당 속성을 private으로 변경하고 get, set을 제공하도록 한다. 따라서 위 코드는 다음과 같이 변환된다.

class User {
  #id_accessor_storage;

  get id() {
    return this.#id_accessor_storage;
  }

  set id(value) {
    this.#id_accessor_storage = value;
  }

  constructor(id) {
    this.id = id;
  }
}

 

잘못된 NaN 비교 감지

IEEE-754 부동소수점을 가지는 모든 언어는 NaN을 직접 비교해서는 안 된다. 자바스크립트에서 어떤 값이 NaN인지 확인하는 방법은 Number.isNaN을 이용하는 것이다. 하지만 많은 사람들이 실수로 == NaN 및 === NaN 을 통해 비교를 수행하는 실수를 하곤 한다. 이 비교 자체는 문법적으로 틀린 것이 없지만, NaN은 NaN을 포함한 어떤 것과 비교해도 그 결과가 false이므로 아마 의도하지 않은 결과를 마주할 것이다.

 

TypeScript 4.9부터는 NaN을 직접 비교하려는 경우에 에러를 보이도록 하고, Number.isNaN의 사용을 권유하도록 개선되었다.

 

파일 시스템 이벤트를 사용하는 파일 감시

TypeScript 4.9부터는 파일시스템 이벤트를 사용하여 파일을 감시한다. 파일시스템 이벤트를 사용하기에는 여러 주의할 점과 예외(네트워크 파일 시스템 등)가 많아 기존에는 폴링 방법을 사용했으나, 이제는 파일시스템 이벤트를 기본으로 하고 불가한 경우에 폴링을 사용하도록 개선되었다.

 

사용되지 않은 import 제거 및 import 정렬

TypeScript에는 "Organize Imports"라는 기능이 있다. 이것은 두 단계로 구성된다. 먼저 사용되지 않은 import를 지우고, 남은 것들을 정렬한다.

 

TypeScript 4.3부터는 import를 정렬만 하는 기능인 "Sort Import"가 추가되었다.

그리고 이제 TypeScript 4.9부터는 사용되지 않은 import를 지우고 순서는 그대로 두는 기능인 "Remove Unused Imports"가 추가된다.

 

return에서의 정의로 이동

VS Code 등 에디터에서 return 키워드에 대해 go-to-definition(정의로 이동)을 실행할 경우, 이제 그에 상응하는 함수의 맨 위로 이동할 수 있다. 이것은 해당 return이 어떤 함수에 속하는 것인지 쉽게 확인할 수 있게 한다.

 

그 외

성능 향상과 몇 가지 수정도 포함되어 있다.

 

참고

https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-rc

Announcing TypeScript 4.9 RC