https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-rc/
6월 6일 Typescript release candidate 5.5 버전이 발표 되었다.
최근 업데이트 중 가장 유용한 업데이트들이 있는 것 같다고 생각되어, 정리를 해 보았다.
interface Bird {
commonName: string;
scientificName: string;
sing(): void;
}
// Maps country names -> national bird.
// Not all nations have official birds (looking at you, Canada!)
declare const nationalBirds: Map<string, Bird>;
// 5.4 에서는 filter method로 필요하지 않은 부분을 없애도 typescript에서 type을 제대로 업데이트 해 주지 않았다.
// 이를 해결하기 위해서 @total-typescript/ts-reset 같은 패키지를 사용했어야 했다.
function makeBirdCalls(countries: string[]) {
// birds: (Bird | undefined)[]
const birds = countries
.map(country => nationalBirds.get(country))
.filter(bird => bird !== undefined);
for (const bird of birds) {
bird.sing(); // error: 'bird' is possibly 'undefined'.
}
}
// 5.5에서는 이 문제가 해결되었다.
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!
}
}2. Regular Expression Syntax Checking
이제 타입스크립트로 정규표현식도 syntax checking이 가능해 졌다!
3. ${configDir} Template Variable
monorepo 에서 tsconfig extend 할때 매우 유용하다.
Turborepo같은 monorepo를 사용할때, 모노레포 안의 여러 프로젝트에서 tsconfig를 extend해서 모두 같은 설정으로 사용할 수 있도록 한다.
예시)
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "./dist"
}
}이 base가 되는 tsconfig.json에서 compilerOption의 outDir을 사용할 경우, 빌드시에 컴파일된 typescript코드가 현재의 디렉토리 기준이 아닌, base tsconfig.json의 디렉토리 기준으로 폴더를 생성하게 되어, outDir 같은 경우 각각 따로 설정해 줘야 하는 불편함이 있었다.
이 이슈는 ts5.5의 configDir을 사용하면 해결된다.
// tsconfig.base.json
{
"compilerOptions": {
"typeRoots": [
"${configDir}/node_modules/@types"
"${configDir}/custom-types"
],
"outDir": "${configDir}/dist"
}
}4. isolatedDeclarations
이 기능은 큰 규모의 monorepo에서 typescript를 사용하고 있을때 유용한 옵션이 될 예정이다.
export let one = "1";
export let two = "2";
// add.ts
import { one, two } from "./util";
export function add() { return one + two; }위의 예시에서 add.ts의 return type을 추론하기 위해서는 utils.ts에 접근해서 one과 two의 type을 추론해 가져와야 한다.
또 다른 예시로는
모노레포의 백엔드 모듈과 프론트엔드 모듈이 같은 core 모듈의 type에 의존하고 있다면, core 모듈이 빌드가 되고 type declaration 파일이 생성되기전까지 프론트엔드와 백엔드 모듈은 계속 기다리고 있어야 하는 병목 현상 문제가 발생한다.
이런 경우에 tsconfig의 compilerOption에 isolatedDeclarations 플래그를 추가하면,
export function foo() {
// ~~~
// error! Function must have an explicit
// return type annotation with --isolatedDeclarations.
return x;
}type이 명시적으로 선언되지 않은 경우 에러가 발생하게 만든다.
type이 명시적으로 선언되게 되면 추론하기 위해 여러 파일들을 거슬러 올라가지 않을 수 있어, 큰 모노레포로 구성된 프로젝트의 타입스크립트의 컴파일 시간이 크게 줄어들 것으로 예상된다. 다른 라이브러리들이 이 업데이트를 적용해야하는 문제들이 있어 지금 당장 프로덕션에 사용하기는 어렵겠지만, 나중에는 큰 도움이 될 것으로 예상되므로 눈여겨 보는 것이 좋을 것 같다.
타입스크립트 5.6.2-RC 가 공개된 시점에서 너무 늦기전에(이미 너무 늦음) 급하게 마무리 지어서 올리는 글..
