TypeScript 5.1〜5.2：推論の改善

TypeScript 5.1の概要

// npm install typescript@5.1

setterとgetterの型の独立性

class Temperature {
  get celsius(): string { return this._c + "°C"; } // string
  set celsius(value: string | number) {             // string | number
    this._c = Number(value);
  }
  private _c = 0;
}

JSX の子要素としての undefined

// TS 5.1+: OK
function Widget(): undefined { return undefined; }
// Before 5.1: had to return null or JSX element

JSX 要素型の柔軟性

// Custom JSX element types supported more naturally in 5.1

TypeScript 5.2 の概要

// npm install typescript@5.2

using 宣言

// Requires lib: ["es2022", "esnext.disposable"]
function getConnection(): Disposable {
  const conn = openDb();
  return { [Symbol.dispose]() { conn.close(); } };
}

{
  using conn = getConnection();
  // conn.close() called automatically at block end
}

非同期破棄のための await using

async function run() {
  await using db = await connectDb();
  // db[Symbol.asyncDispose]() called on exit
}

デコレーターのメタデータ

function meta(value: string) {
  return (_: unknown, ctx: DecoratorContext) => {
    ctx.metadata[ctx.name] = value;
  };
}

@meta("service")
class MyService {}
console.log((MyService as any)[Symbol.metadata]); // { "MyService": "service" }

配列のコピー用メソッド

const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3] — new array, arr unchanged
const reversed = arr.toReversed(); // [2, 1, 3]

5.2 で tsconfig に Using を追加する

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "ESNext.Disposable"]
  }
}

まとめ: TS 5.1-5.2

理解度チェック

学んだこと