Frontend Weekly 2023-08-24 TypeScript 5.2

2023-08-24

Tech

Frontend weekly

/

TypeScript

https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/

Explicit Resource Management#

ECMAScript Stage 3 proposal の Explicit Resource Management が先行実装されました。

https://github.com/tc39/proposal-explicit-resource-management

Explicit Resource Management のメリット#

リソース (メモリ、I/O など）の明示的な解放
try-finally などを利用した場合と比べて、安全で実装が容易なリソース管理
リソースを扱う API のインターフェース統一
- NodeJS API では、http.Server は close、stream.Readable は destroy などリソースを解放するメソッドに統一感がない

using 宣言と Symbol.dispose メソッド#

using宣言は、何らかの理由でスコープを脱出する際に Symbol.dispose メソッドを実行します。Python の with 文や Java の try-with-resources 文、C#の using 宣言に似ています。

1
const getResource = (label: string) => {
2
  return {
3
    [Symbol.dispose]: {
4
      console.log(`Disposed ${label}!`)
5
    }
6
  }
7
}
8

9
{
10
  using resource = getResource("fish")
11
} // Disposed fish!

using 宣言のクリーンアップはスタックのように振る舞います。

1
const race = () => {
2
  using turtle = getResource("turtle");
3
  using rabbit = getResource("rabbit");
4
};
5
race();
6
// Dispose rabbit!
7
// Dispose turtle!

await using 宣言とSymbol.asyncDispose メソッド#

クリーンアップ関数が非同期の場合は、Symbol.asyncDispose を利用します。

1
const getResource = (label: string) => {
2
  return {
3
    async [Symbol.asyncDispose]: {
4
      await sleep(1000);
5
      console.log(`Disposed ${label}!`)
6
    }
7
  }
8
}
9

10
{
11
  await using resource = getResource("fish")
12
} // Disposed fish!

DisposableStack と defer()メソッド#

DisposableStack と defer を利用すれば、Symbol.dispose を登録することなくコールバックを登録することが出来ます。Go 言語などの defer をイメージしてもいいですし、Symbol.dispose の場合と同様に振る舞います。

1
using cleanup = new DisposableStack();
2
cleanup.defer(() => {
3
  console.log("Cleanup!");
4
});

非同期なクリーンアップ関数を実行する場合は、DisposableStack の代わりに AsyncDisposableStack を利用します。

1
await using stack = new AsyncDisposableStack();
2
stack.defer(async () => {
3
  await someAsyncCleanupOperaiton();
4
});

Explicit Resource Management を利用する#

利用したい場合は、“esnext.disposable”を lib に設定する必要があります。

1
{
2
  "compilerOptions": {
3
    "target": "es2022",
4
    "lib": ["es2022", "esnext.disposable", "dom"]
5
  }
6
}

名前付きタプル要素と匿名タプル要素の混合#

タプルに名前付き要素と匿名要素を混ぜることが出来るようになりました。

1
type Anonymous = [T, T];
2

3
// 名前付きタプル
4
type Named = [first: T, second: T];
5

6
// TS 5.2でサポートされた記述
7
type Merged = [...Anonymous, ...Named];
8

9
// TS 5.2でサポートされた記述
10
type TwoOrMore = [fiest: T, second: T, ...[]];

配列のユニオン型に対するメソッドの改善#

今まで filter や reduce、find などのメソッドを配列のユニオン型に対して呼ぶと、”配列の要素に互換性がないためメソッドを呼べない！”というエラーが吐かれていました。

1
const array: string[] | number[] = [];
2

3
array.filter((x) => !!x);

今後は、このようなケースでもユニオン型の要素を持つ配列にフォールバックされるためエラーが吐かれなくなります。しかしstring[] | number[] が(string | number)[] のように解釈されるようになる点には注意が必要です。

1
array.filter((x: string | number) => {
2
  return !!x;
3
});

非破壊的な配列メソッドのサポート#

ES2023 の新機能である Change Array by copy、非破壊的な配列操作を行えるメソッドのサポートがされました。

https://github.com/tc39/proposal-change-array-by-copy

1
// myArray.reverse()
2
myArray.toReversed()
3

4
// myArray.sort((a, b) => ...)
5
myArray.toSorted((a, b) => ...)
6

7
// myArray.splice(start, deleteCount, ...items)
8
myArray.toSpliced(start, deleteCount, ...items)
9

10
// myArray[index] = updatedValue
11
myArray.with(index, updatedValue)