타입스크립트 5.5 베타 요약

 

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#inferred-type-predicates

Announcing TypeScript 5.5 Beta - TypeScript

 

타입스크립트 새로운 버전이 나올때 종종 요약을 했는데 이번에도 몇가지 볼만한게 있어서 요약을 해봤다.
모든 내용을 포함하지는 않으니 상세히 알고싶다면 원문을 보는것을 추천한다.

Inferred Type Predicates

filter 등에서 control flow analysis가 가능해졌다. 필터를 거쳤음에도 배열에 접근 시 타입체크를 해야하는 것은 굉장히 불편했다. 이제는 그러지 않아도 된다.

function makeBirdCalls(countries: string[]) {
  // birds: Bird[]
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined);

  for (const bird of birds) {
    bird.sing();  // ok! <- 원래 에러임
  }
}

number에 대한 truthiness 체크는 0에대해 잘못된 결과를 돌려줄 수 있으니 명시적으로 null이나 undefined가 아님을 체크하자.

function getClassroomAverage(students: string[], allScores: Map<string, number>) {
  const studentScores = students
    .map(student => allScores.get(student))
    .filter(score => !!score);

  return studentScores.reduce((a, b) => a + b) / studentScores.length;
  //     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // error: Object is possibly 'undefined'.
}

기존 타입을 유지하고 싶다면 명시적으로 타입을 선언하자.

// Previously, nums: (number | null)[]
// Now, nums: number[]
const nums = [1, 2, 3, null, 5].filter(x => x !== null);

nums.push(null);  // ok in TS 5.4, error in TS 5.5

// 유지하고 싶은 경우
const nums: (number | null)[] = [1, 2, 3, null, 5].filter(x => x !== null);
nums.push(null);  // ok in all versions

Control Flow Narrowing for Constant Indexed Accesses

인덱스로 접근한 값에 대해 타입 내로잉이 가능하다.
obj와 index가 모두 변하지 않아야함.
아래예제에서, obj와 key의 타입이 모두 변화가 없으므로, typeof 체킹에 의해 obj[key]의 타입이 좁혀졌다.

function f1(obj: Record<string, unknown>, key: string) {
    if (typeof obj[key] === "string") {
        // Now okay, previously was error
        obj[key].toUpperCase();
    }
}

JS-Doc 타입 임포팅 개선

Type 체킹을 JS에서 써야하는 경우, JSDoc을 사용한다. 특히, NodeJS 코드를 작성하다보면 종종 사용할 일이 있다.
하지만 이 경우 타입을 import하는 것이 쉬운 일이 아니었다.
import된다고 해도 런타임 임포트가 되거나, verbose한 syntax로 인한 불편함이 있었다.
이를 해결.

// 기존 방식 (런타임을 사용하지 않는)
/**
 * @typedef {import("./some-module").SomeType} SomeType
 */

// 새로운 import 코멘트
/** @import { SomeType } from "some-module" */
//or
/** @import * as someModule from "some-module" */

Regex 타입 체킹

Regex의 확장가능한 문법으로 인해 원래는 지원을 하지 않았다.
하지만 정규식은 자주 사용되기도하고, 그래서 Regex에 대해 기본적인 문법 체크를 지원
(Regex literal에만 해당)

 

The ${configDir} Template Variable for Configuration Files

많은 프로젝트에서 BaseConfig을 두고 이를 extends하여 설정을 작성한다.
이 때, BaseConfig에서 명시된 상대경로는 항상 BaseConfig의 위치를 기준으로 설정된다.
extends 한다고해서 extends한 config 파일 기준으로 다시 상대경로를 계산하는 것이 아니다.

ex) 아래 코드에서 outDir은 /services/my-service/dist가 아닌, /dist가 된다.

// /tsconfig.base.json
{ "outDir": "./dist" }

// /services/my-service/tsconfig.json
{ "extends": "../../tsconfig.base.json", }

그럼 각 config을 기준으로 상대경로를 통해 outdir 등을 설정하고 싶은 경우는 어떻게 해야할까?

configDir을 통해 이제 설정할 수 있도록 변경되었다.
${configDir}로 extend한 config 파일에 대해 상대적으로 경로를 설정할 수 있다.

{
    "compilerOptions": {
        "typeRoots": [
            "${configDir}/node_modules/@types"
            "${configDir}/custom-types"
        ],
        "outDir": "${configDir}/dist"
    }
}

---

이전 글

https://blue-tang.tistory.com/32

타입스크립트 5.0 베타 요약

https://blue-tang.tistory.com/92

Typescript 5.3 베타 요약