TypeScript 5.7 实战：5 个新特性让你代码更优雅

问题场景：在 ESM 项目中，Node.js 要求导入路径使用 .js 扩展名，但 TypeScript 源码使用 .ts。过去你需要手动维护两套扩展名，或在构建时编写复杂脚本。

TypeScript 5.7 引入 rewriteRelativeImportExtensions 配置项，自动将相对导入路径从 .ts 重写为 .js。

配置方法

// tsconfig.json
{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "rewriteRelativeImportExtensions": true
  }
}

效果对比

// 源代码 (src/utils/helper.ts)
import { config } from "./config.ts";
import { types } from "../types/index.ts";

export function helper() {
  return config;
}

// 编译输出 (dist/utils/helper.js)
import { config } from "./config.js";
import { types } from "../types/index.js";

export function helper() {
  return config;
}

注意事项

• 模块模式要求：必须设置 module: "NodeNext" 或 "nodenext"
• 运行时兼容性：目标运行时需支持导入属性或自动扩展名解析
• 工具链支持：Vite、esbuild 完全支持；tsup 仍在适配中（可使用临时解决方案）

// tsup.config.ts - 临时解决方案
export default {
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  outExtension: ({ format }) => ({
    js: format === 'esm' ? '.mjs' : '.cjs',
  }),
};

TypeScript 5.7 改进了 const 变量和 as const 断言的类型推断行为，使字面量类型推导更加精确和一致。

基础推断改进

// TypeScript 5.7 之前
const str = 'abc';
type T = typeof str; // string ❌

// TypeScript 5.7
const str = 'abc';
type T = typeof str; // 'abc' ✅ 字面量类型

as const 断言增强

const obj = { prop: 123 };
type T1 = typeof obj; // { prop: number }

const constObj = { prop: 123 } as const;
type T2 = typeof constObj; // { readonly prop: 123 }

as const 产生两个效果：

• 使非原始类型变为只读（对象属性、数组元素）
• 推断为字面量类型（123 而非 number）

实战场景：配置对象

const CONFIG = {
  api: {
    baseUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3
  }
} as const;

// CONFIG.api.baseUrl 的类型是 "https://api.example.com"
// 所有属性都是 readonly，类型都是字面量

实战场景：联合类型推导

const STATUS = {
  PENDING: 'pending',
  SUCCESS: 'success',
  ERROR: 'error'
} as const;

type Status = typeof STATUS[keyof typeof STATUS];
// "pending" | "success" | "error" ✅

type Wrap<T extends Array<unknown>> = Promise<T>;

const arr = ['a', 'b'] as const;
// @ts-expect-error: 类型 'readonly ["a", "b"]' 不满足约束 'unknown[]'
type Result = Wrap<typeof arr>;

TypeScript 5.7 增强了变量初始化检查，现在可以检测到在嵌套函数中访问未初始化变量的情况，帮助早期发现潜在 bug。

5.6 及之前：逃逸检查

// TypeScript 5.6 - 无错误（但实际有 bug）
function foo() {
  let result: number;

  if (someCondition()) {
    result = doSomeWork();
  } else {
    let temporaryWork = doSomeWork();
    temporaryWork *= 2;
    // 忘记赋值给 result ❌
  }

  printResult();

  function printResult() {
    console.log(result); // 没有错误 ❌
  }
}

5.7：严格检查

// TypeScript 5.7
function foo() {
  let result: number;

  if (someCondition()) {
    result = doSomeWork();
  } else {
    let temporaryWork = doSomeWork();
    temporaryWork *= 2;
  }

  printResult();

  function printResult() {
    console.log(result);
    // Error: Variable 'result' is used before being assigned. ✅
  }
}

正确写法

function foo(condition: boolean) {
  let value: string;

  if (condition) {
    value = 'initialized';
  } else {
    value = 'default';
  }

  console.log(value); // OK ✅
}

实战场景：订单处理

function processOrder(order: Order) {
  let total: number;
  let tax: number;

  if (order.items.length > 0) {
    total = calculateTotal(order.items);
    tax = calculateTax(total, order.region);
  }
  // 忘记处理空订单情况 ❌

  return { total, tax };
  // Error: 'total' and 'tax' are used before being assigned ✅
}

TypeScript 5.7 通过 --target es2024 和 --lib es2024 提供对 ECMAScript 2024 新特性的完整类型支持。

Promise.withResolvers()

简化 Promise 创建，无需手动维护 resolve/reject 回调：

// ES2024 原生 API
const { promise, resolve, reject } = Promise.withResolvers<string>();

// 等价于传统写法：
let resolve!: (value: string) => void;
let reject!: (reason: unknown) => void;
const promise = new Promise<string>((res, rej) => {
  resolve = res;
  reject = rej;
});

实战场景：等待事件

function waitForEvent(eventTarget: EventTarget, eventName: string) {
  const { promise, resolve } = Promise.withResolvers<Event>();
  eventTarget.addEventListener(eventName, resolve, { once: true });
  return promise;
}

// 使用
const clickEvent = await waitForEvent(button, 'click');

Object.groupBy() 和 Map.groupBy()

数组分组操作的原生支持：

const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'fruit', name: 'banana' },
  { type: 'vegetable', name: 'carrot' }
];

const grouped = Object.groupBy(items, item => item.type);
/*
{
  fruit: [
    { type: 'fruit', name: 'apple' },
    { type: 'fruit', name: 'banana' }
  ],
  vegetable: [{ type: 'vegetable', name: 'carrot' }]
}
*/

配置方法

{
  "compilerOptions": {
    "target": "ES2024",
    "lib": ["ES2024"]
  }
}

TypedArray 泛型化

TypeScript 5.7 使 TypedArray 支持泛型参数，允许指定底层 ArrayBufferLike 类型：

// 新的泛型语法
interface Uint8Array<TArrayBuffer extends ArrayBufferLike = ArrayBufferLike>

// 使用示例
function processBuffer(buffer: Uint8Array<ArrayBuffer>): void {
  // ...
}

// SharedArrayBuffer 支持
const shared: Int32Array<SharedArrayBuffer> = new Int32Array(
  new SharedArrayBuffer(12)
);

JSON 导入验证

使用 --module nodenext 导入 JSON 文件时，需要 with { type: "json" } 导入属性：

// ❌ 错误
import myConfig from './myConfig.json';
// Error: Importing a JSON file into an ECMAScript module
// requires a 'type: "json"' import attribute

// ✅ 正确
import myConfig from './myConfig.json' with { type: 'json' };

// ✅ 也正确
import * as myConfig from './myConfig.json' with { type: 'json' };

使用场景

import config from './config.json' with { type: 'json' };

// 访问 JSON 内容
const port = config.port;
const { host, timeout } = config;