TypeScript 5.3〜5.4：新しいナローイングとNoInfer

TypeScript 5.3 の概要

// npm install typescript@5.3

Switch/Case の型の絞り込みの改善

type Result = { status: "ok"; data: string } | { status: "err"; code: number };

function handle(r: Result) {
  switch (r.status) {
    case "ok":
      console.log(r.data);   // r: { status: "ok"; data: string } — narrowed
      break;
    case "err":
      console.log(r.code);   // r: { status: "err"; code: number } — narrowed
      break;
  }
}

JSDoc の import type

/** @import { User } from "./types.js" */

/** @param {User} user */
function greet(user) {
  console.log(user.name);
}

import type の resolution-mode

import type { User } from "some-library" with { "resolution-mode": "require" };

TypeScript 5.4 の概要

// npm install typescript@5.4

NoInfer<T> ユーティリティ型

function createStore<T>(initial: T, onChange: (val: NoInfer<T>) => void) {
  // T inferred from initial, not from onChange callback
}

createStore({ count: 0 }, (val) => {
  // val: { count: number } — inferred from initial only
});

NoInfer が重要な理由

// Before NoInfer: T may be widened by the callback
function createStore<T>(initial: T, onChange: (val: T) => void) {}
createStore({ count: 0 }, (val: { count: number; extra: string }) => {});
// T widened to include extra — not what we want

クロージャー後も維持される型の絞り込み

function process(val: string | null) {
  if (!val) return;
  // val: string
  setTimeout(() => {
    console.log(val.toUpperCase()); // TS 5.4: still string — not widened
  }, 100);
}

Object.groupBy の型定義

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
];
const grouped = Object.groupBy(users, (u) => u.role);
// grouped: { [role: string]: { name: string; role: string }[] }

宣言ファイル出力の改善

// Fewer "Type ... is not assignable to type ..." errors
// in generated declaration files from TS 5.4 onward

まとめ: TS 5.3-5.4

理解度チェック

学んだこと