TypeScript 5.7 新特性实战：使用 const 参数类型与类型级编程提升代码安全性

基础用法：保留字面量类型

首先看一个对比示例，展示 const 参数如何保留字面量类型：

// 没有 const 修饰 - 类型会被泛化
function identity(input: T): T {
  return input;
}
const result1 = identity({ foo: "bar" });
// result1 的类型：{ foo: string }

// 使用 const 修饰 - 保留精确的字面量类型
function identityConst(input: T): T {
  return input;
}
const result2 = identityConst({ foo: "bar" });
// result2 的类型：{ readonly foo: "bar" }

注意两点关键差异：

• result2 的 foo 属性类型是精确的字面量 "bar" 而非 string
• 属性自动添加了 readonly 修饰符，增强不可变性

条件类型与 const 参数组合

const 参数与条件类型结合，可以实现更复杂的类型逻辑：

function optionalIfFoo<
  K extends string,
  const U extends (K extends "foo" ? readonly [] : readonly [unknown])
>(foo: K, ...rest: U): U[0] {
  return rest[0];
}

// 当 foo 为 "foo" 时，rest 参数是可选的
const val1 = optionalIfFoo('foo');

// 当 foo 不是 "foo" 时，rest 参数必须提供
const val2 = optionalIfFoo('notFoo', { a: 42 });
// val2 的类型：{ readonly a: 42 }

这个例子展示了类型级编程的核心思想：在编译期通过类型系统编码业务规则，将错误拦截在编译阶段。

实战案例：API 响应类型推断

在实际项目中，我们经常需要处理不同端点的 API 响应。使用 const 参数可以精确推断响应类型：

// 定义端点配置
const endpoints = {
  users: { url: '/api/users', method: 'GET' as const },
  posts: { url: '/api/posts', method: 'POST' as const }
} as const;

// 使用 const 参数的 API 调用函数
async function fetchApi(
  endpoint: T,
  options?: RequestInit
): Promise> {
  const config = endpoints[endpoint];
  const response = await fetch(config.url, {
    ...options,
    method: config.method
  });
  return response.json();
}

// 调用时精确推断返回类型
const users = await fetchApi('users');
// users 的类型根据 ResponseType 精确推断

使用 readonly 元组增强类型安全

const 参数与 readonly 元组结合，可以确保函数参数的不可变性：

// 定义接受 readonly 元组的函数
function createConfig(
  ...settings: T
): Readonly {
  return settings as Readonly;
}

const config = createConfig('production', 42, { debug: true });
// config 的类型：readonly ["production", 42, { readonly debug: true }]

// 尝试修改会触发类型错误
// config[0] = 'development'; // 编译错误

这种模式特别适合配置管理场景，确保配置值在整个应用生命周期中保持不变。

类型级编程：编译期验证器

利用条件类型和模板字面量类型，我们可以在编译期验证字符串格式：

// 定义类型级别的正则验证
type IsValidEmail = T extends `${string}@${string}.${string}`
  ? true
  : false;

// 使用 const 参数的验证函数
function validateEmail(email: T): {
  valid: IsValidEmail;
  email: T;
} {
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  return { valid: isValid as unknown as IsValidEmail, email };
}

const result = validateEmail('user@example.com');
// result.valid 的类型为 true（编译期已知）

实战：类型安全的状态管理

在状态管理场景中，const 参数可以帮助精确推断 action 类型：

// 定义 action 类型
type Action = {
  type: T;
  payload: P;
};

// 创建 reducer 工具函数
function createReducer(
  initialState: S,
  handlers: {
    [K in A['type']]: (
      state: S,
      action: Extract
    ) => S;
  }
) {
  return function reducer(state = initialState, action: A): S {
    const handler = handlers[action.type as keyof typeof handlers];
    return handler ? handler(state, action) : state;
  };
}

// 使用示例
const counterReducer = createReducer(0, {
  increment: (state) => state + 1,
  decrement: (state) => state - 1
});

常见问题与解决方案

在使用 const 参数时，可能会遇到以下问题：