지난 8월 24일 TypeScript 5.2가 출시했습니다. 주요 변경사항은 using
키워드 지원, 데코레이터에 메타데이터 추가, 배열 복사 메서드 추가 등이 있습니다.
using
키워드 추가지난 게시글에서 소개한 자원 관리를 위한 키워드 using
이 추가되었습니다. let
, const
대신 사용하는 변수 선언 키워드로, Symbol.dispose
, Symbol.asyncDispose
로 된 속성 값이 있는 객체를 대상으로 사용할 수 있습니다.
{ using resource = getResource(); using reader = resource.getReader(); const { value, done } = reader.read(); } // 블록을 벗어날 때 'reader' => 'resource' 순으로 자원 해제
tc39에 제안된 내용이며, 다음 ECMAScript에서 볼 수도 있는 Stage 3 후보 상태입니다. 물론 후보 상태이므로, tsconfig.json
에서 compilerOptions.lib
배열에 esnext
혹은 esnext.disposable
을 추가해야지만 사용가능합니다.
지난 5.0에서 tc39 제안 내용에 맞춰 데코레이터가 새롭게 만들어 졌습니다. 이에 대한 후속 제안으로 메타데이터가 추가되었습니다.
데코레이터의 두번째 파라미터인 context
에서 metadata
라는 빈 객체가 할당되어 있으며, 이는 자유롭게 속성에 할당이 가능하고, 외부에서의 접근은 Symbol.metadata
를 통해 하실 수 있습니다.
interface Context { name: string; metadata: Record; } function setMetadata(_target: any, context: Context) { context.metadata[context.name] = true; } class SomeClass { @setMetadata foo = 123; @setMetadata accessor bar = "hello!"; @setMetadata baz() { } } const ourMetadata = SomeClass[Symbol.metadata]; console.log(JSON.stringify(ourMetadata)); // { "bar": true, "baz": true, "foo": true }
데코레이터 메타데이터 예제
기존 타입스크립트에는 튜플 요소에 이름을 지을 수 있었습니다. 하지만, “무조건” 모든 요소에 이름을 지어야지만 사용이 가능했습니다. 이번 5.2에서는 이러한 제한이 해제됩니다.
// before 5.2, ✅ Possible type Pair = [first: string, second: number]; // before 5.2, ❌ has an error type Pair = [first: string, number]; type Args = [first: string, ...string[]]; // after 5.2, ✅ Possible type Pair = [first: string, number]; type Args = [first: string, ...string[]];
튜플 라벨링 혼합 지원
기존 타입스크립트에서 배열에 대한 타입을 여러가지 방식으로 구현이 가능했습니다. 하지만, 배열을 유니온으로 하는 타입에서는 배열 메소드 사용이 불가능 했습니다.
// ✅ Possible declare const arr: (string | number)[]; arr.map((it /* string | number */) => console.log(it)); // ✅ Possible declare const arr2: Array<string | number>; arr2.map((it /* string | number */) => console.log(it)); // ❌ TypeScript Error declare const arr3: string[] | number[]; arr3.map((it /* unknown */) => console.log(it)); // This expression is not callable.
배열 유니온 타입 오류 예제
기존에는 string[]
과 number[]
의 교집합을 통해 map
을 찾으려 하면서 타입을 찾을 수 없는 문제가 발생하였고, 이번 5.2에서는 (string | number)[]
로 변환하도록 하여, 정상적으로 작동 할 수 있도록 바뀌었습니다.
ES2023에서 새롭게 추가된 내용으로 배열을 복사하여 사용하는 메서드가 추가되었습니다. 기존 sort
, splice
, reverse
메서드는 기존의 배열을 바꾸는 객체지향 메서드지만, 이번에 추가된 메서드들은 모두 “복사” 되어 사용되는 메서드입니다.
toSorted
toSpliced
toReversed
with
toSorted
, toSpliced
, toReversed
세가지 메서드는 기존의 sort
, splice
, reverse
에 대한 복사 지원 메서드이며, with
는 arr[0] = 'some'
처럼 인덱스 대입문에 대한 복사 메서드입니다.const arr = [2, 4, 6, 1, 3, 5]; _.equal(arr.toSorted(), [1, 2, 3, 4, 5, 6]); _.equal(arr, [2, 4, 6, 1, 3, 5]); const arr2 = [1, 2, 3, 4]; _.equal(arr2.toSpliced(1, 1, 5), [1, 5, 3, 4]); _.equal(arr2, [1, 2, 3, 4]); const arr3 = [1, 2, 3]; _.equal(arr3.toReverse(), [3, 2, 1]); _.equal(arr3, [1, 2, 3]); const arr4 = [1, 2, 3, 4]; _.equal(arr4.with(1, 5), [1, 5, 3, 4]); _.equal(arr4, [1, 2, 3, 4]);
배열 복사 메서드
ES2023에서 적용된 내용으로, WeakMap
, WeakSet
의 키 값으로 심볼을 사용할 수 있도록 변경된 내용입니다.
const myWeakMap = new WeakMap(); const key = Symbol(); const someObject = { /*...*/ }; // Works! ✅ myWeakMap.set(key, someObject); myWeakMap.has(key);
.ts
확장자에 대해 타입 임포트 허용타입만 임포트하는 import type { ... } from 'file.d.ts'
구문을 통해 불러오는 파일의 확장자는 기본적으로 .d.ts
로 타입 구현 파일입니다. 하지만 allowImportingTsExtensions
옵션을 사용하면 .ts
, .mts
, .cts
, .tsx
에 대해 허용할 수 있지만, 이는 이 옵션의 원래 의미와는 상관없는 내용입니다. 따라서 이제 5.2에서부터는 해당 옵션과 무관하게 허용하도록 변경되었습니다.
그 밖에 VSCode에서 매개변수 힌트에 대해 이름을 클릭하면 구현체로 넘어갈 수 있도록 하는 변경 사항이 있습니다. 관련 내용은 타입스크립트 블로그의 내용을 확인하시면 되고, 관련되어 5.3 버전에 대한 배포 계획도 새롭게 올라왔으니 확인해보시면 좋을거 같습니다. 😃