지난 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' 순으로 자원 해제

typescript

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 }

typescript

데코레이터 메타데이터 예제

익명, 이름을 가진 튜플 혼합 지원

기존 타입스크립트에는 튜플 요소에 이름을 지을 수 있었습니다. 하지만, “무조건” 모든 요소에 이름을 지어야지만 사용이 가능했습니다. 이번 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[]];

typescript

튜플 라벨링 혼합 지원

더 쉬운 배열에 대한 유니온 타입의 메소드 사용

기존 타입스크립트에서 배열에 대한 타입을 여러가지 방식으로 구현이 가능했습니다. 하지만, 배열을 유니온으로 하는 타입에서는 배열 메소드 사용이 불가능 했습니다.


// ✅ 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.

typescript

배열 유니온 타입 오류 예제

기존에는 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]);

typescript

배열 복사 메서드

WeakMap, WeakSet에서 심볼 키 허용

ES2023에서 적용된 내용으로, WeakMap, WeakSet 의 키 값으로 심볼을 사용할 수 있도록 변경된 내용입니다.


const myWeakMap = new WeakMap();

const key = Symbol();
const someObject = { /*...*/ };

// Works! ✅
myWeakMap.set(key, someObject);
myWeakMap.has(key);

typescript

`.ts` 확장자에 대해 타입 임포트 허용

타입만 임포트하는 import type { ... } from 'file.d.ts' 구문을 통해 불러오는 파일의 확장자는 기본적으로 .d.ts 로 타입 구현 파일입니다. 하지만 allowImportingTsExtensions 옵션을 사용하면 .ts, .mts, .cts, .tsx 에 대해 허용할 수 있지만, 이는 이 옵션의 원래 의미와는 상관없는 내용입니다. 따라서 이제 5.2에서부터는 해당 옵션과 무관하게 허용하도록 변경되었습니다.

그 밖에 VSCode에서 매개변수 힌트에 대해 이름을 클릭하면 구현체로 넘어갈 수 있도록 하는 변경 사항이 있습니다. 관련 내용은 타입스크립트 블로그의 내용을 확인하시면 되고, 관련되어 5.3 버전에 대한 배포 계획도 새롭게 올라왔으니 확인해보시면 좋을거 같습니다. 😃

지난 8월 24일 TypeScript 5.2가 출시했습니다. 주요 변경사항은 using 키워드 지원, 데코레이터에 메타데이터 추가, 배열 복사 메서드 추가 등이 있습니다.

`using` 키워드 추가


{
  using resource = getResource();
	using reader = resource.getReader();
  const { value, done } = reader.read();
} // 블록을 벗어날 때 'reader' => 'resource' 순으로 자원 해제

typescript

데코레이터에 메타데이터 추가

지난 5.0에서 tc39 제안 내용에 맞춰 데코레이터가 새롭게 만들어 졌습니다. 이에 대한 후속 제안으로 메타데이터가 추가되었습니다.


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 }

typescript

데코레이터 메타데이터 예제

익명, 이름을 가진 튜플 혼합 지원


// 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[]];

typescript

튜플 라벨링 혼합 지원

더 쉬운 배열에 대한 유니온 타입의 메소드 사용


// ✅ 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.

typescript

배열 유니온 타입 오류 예제

배열 복사 메서드 추가 지원

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]);

typescript

배열 복사 메서드

WeakMap, WeakSet에서 심볼 키 허용

ES2023에서 적용된 내용으로, WeakMap, WeakSet 의 키 값으로 심볼을 사용할 수 있도록 변경된 내용입니다.


const myWeakMap = new WeakMap();

const key = Symbol();
const someObject = { /*...*/ };

// Works! ✅
myWeakMap.set(key, someObject);
myWeakMap.has(key);

typescript