TypeScript 5の新機能 — satisfies演算子とデコレーターの実践活用

// ❌ 従来方式の問題点
type Color = "red" | "green" | "blue";
type ColorMap = Record<string, string | number[]>;

// asアサーション：型検証あり、推論なし
const palette = {  red: [255, 0, 0],  green: "#00ff00",  blue: [0, 0, 255]
} as ColorMap;

// この時点でpalette.redはstring | number[]として推論される
// .map()を使うには型アサーションが必要
palette.red.map(x => x); // エラー！string | number[]にmapはない

// ✅ satisfies演算子
type Color = "red" | "green" | "blue";
type ColorMap = Record<Color, string | number[]>;

const palette = {  red: [255, 0, 0],  green: "#00ff00",  blue: [0, 0, 255]
} satisfies ColorMap;

// 型検証あり、リテラル推論あり
palette.red.map(x => x);  // ✅ number[]として保持
palette.green.toUpperCase();  // ✅ stringとして保持
const wrong = { purple: "purple" } satisfies ColorMap; // ❌ エラー："purple"はColorではない

interface ApiConfig {  baseUrl: string;  timeout: number;  retries: number;
}

// satisfiesで型検証 + 正確な値の推論を維持
const config = {  baseUrl: "https://api.example.com",  timeout: 5000,  retries: 3,
} satisfies ApiConfig;

// config.timeoutはnumberではなく5000（リテラル型）
type TimeoutType = typeof config.timeout; // 5000

type Route = {  path: string;  component: React.ComponentType;  auth?: boolean;
};

const routes = [  { path: "/", component: Home },  { path: "/dashboard", component: Dashboard, auth: true },
] satisfies Route[];

// routes[0].pathは"/"（リテラル）として保持され、Routeの検証も通過

type TranslationKey = "hello" | "goodbye" | "welcome";
type Translations = Record<TranslationKey, string>;

const ko = {  hello: "韓国用語",  goodbye: "韓国用語 韓国用語",  welcome: "韓国用語",
} satisfies Translations;

const en = {  hello: "Hello",  goodbye: "Goodbye",  // welcome 不足 → コンパイルエラー発生！ ✅
} satisfies Translations;

// ✅ TypeScript 5標準デコレーター
function sealed(target: typeof SealedClass) {  Object.seal(target);  Object.seal(target.prototype);
}

@sealed
class SealedClass {  greet() { return "Hello!"; }
}

function log(target: any, context: ClassMethodDecoratorContext) {  const methodName = String(context.name);  return function (this: any, ...args: any[]) {  console.log(`[${methodName}] 呼び出し、引数:`, args);  const result = target.call(this, ...args);  console.log(`[${methodName}] 戻り値:`, result);  return result;  };
}

class Calculator {  @log  add(a: number, b: number): number {  return a + b;  }
}

const calc = new Calculator();
calc.add(1, 2);
// [add] 呼び出し、引数: [1, 2]
// [add] 戻り値: 3

function readonly(target: any, context: ClassAccessorDecoratorContext) {  return {  set() {  throw new Error(`${String(context.name)}は読み取り専用です。`);  }  };
}

class Config {  @readonly  accessor version = "1.0.0";
}

const cfg = new Config();
console.log(cfg.version); // "1.0.0"
cfg.version = "2.0.0";  // ❌ エラー発生

// メタデータAPIの活用
function validate(target: any, context: ClassFieldDecoratorContext) {  context.metadata[context.name] = { required: true };
}

class UserForm {  @validate  name!: string;  @validate  email!: string;
}

// メタデータの読み取り
const metadata = UserForm[Symbol.metadata];
console.log(metadata); // { name: { required: true }, email: { required: true } }

// ❌ 従来方式
function identity<T>(value: T): T {  return value;
}

const result = identity(["a", "b", "c"]);
// result: string[]（リテラルが失われる）

// ✅ constタイプパラメータ
function identityConst<const T>(value: T): T {  return value;
}

const result2 = identityConst(["a", "b", "c"]);
// result2: readonly ["a", "b", "c"]（リテラルを維持！）

function createRoute<const Path extends string>(path: Path) {  return { path, url: () => `https://app.example.com${path}` };
}

const homeRoute = createRoute("/");
// homeRoute.path: "/"（リテラル維持）

const dashRoute = createRoute("/dashboard");
// dashRoute.path: "/dashboard"（リテラル維持）

// tsconfig.json
{  "extends": [  "@tsconfig/strictest/tsconfig.json",  "@tsconfig/node18/tsconfig.json",  "./custom.tsconfig.json"  ],  "compilerOptions": {  "outDir": "dist"  }
}

// Symbol.disposeを持つオブジェクト
class DbConnection {  constructor(public readonly id: string) {}  [Symbol.dispose]() {  console.log(`接続 ${this.id} を終了`);  }
}

function getConnection() {  return new DbConnection("conn-001");
}

// using：ブロックを抜ける際に自動でdispose()が呼ばれる
{  using conn = getConnection();  console.log(`接続 ${conn.id} を使用中`);  // ブロック終了時に自動で「接続 conn-001 を終了」が出力される
}

// await using：非同期リソースの解放
async function processFile() {  await using file = await openFile("data.txt");  // 処理完了後に自動で await file[Symbol.asyncDispose]() が呼ばれる
}

// 問題：Tがデフォルト値からも推論されて型が広がってしまう
function createState<T>(initial: T, fallback: T): T {  return initial ?? fallback;
}

// fallbackが初期値に影響を与えてはいけない場合
const state = createState("active", "inactive");
// T: "active" | "inactive"（望まない動作の可能性）

// ✅ NoInferを使用
function createStateBetter<T>(initial: T, fallback: NoInfer<T>): T {  return initial ?? fallback;
}

const state2 = createStateBetter("active", "inactive");
// T: "active"、fallbackは"active"型として検証される
// createStateBetter("active", "unknown") // エラー！

{  "compilerOptions": {  "target": "ES2022",  "lib": ["ES2022", "DOM", "DOM.Iterable"],  "module": "Node16",  "moduleResolution": "Node16",  "strict": true,  "exactOptionalPropertyTypes": true,  "noUncheckedIndexedAccess": true,  "noImplicitOverride": true,  "verbatimModuleSyntax": true  }
}