TypeScript如何限制函数参数仅接受动态数组内的元素值

你用P extends string[]约束泛型时，TypeScript 默认会对传入的数组参数做类型拓宽，把["trends", "comments"]推断为string[]类型，而不是由具体字面量组成的元组/联合类型，这时候typeof paths[number]自然就退化成宽泛的string，起不到字面量约束的效果。

两种常用实现都能达到入参严格约束的效果：

方案1：加readonly约束阻止类型拓宽 #

把泛型约束改成extends readonly string[]，TS就会保留传入数组的字面量类型，不会拓宽成普通string数组。修改后的完整代码：

type Options<P> = {
  pathname: string;
  rootPath: string;
  paths: P;
};

// 泛型加readonly约束，保留字面量类型
export const useLayoutPaths = <P extends readonly string[]>(options: Options<P>) => {
  const { pathname, rootPath, paths } = options;

  if (paths.length === 0) {
    throw new Error("paths must be a non-empty array.");
  }

  const currentPath = pathname.substring(pathname.lastIndexOf("/") + 1);
  // 加类型断言解决includes默认类型不匹配的问题，不影响运行逻辑
  const value = (paths.includes(currentPath) ? currentPath : paths[0]) as P[number];

  // 直接取泛型P的成员类型做约束
  const getPath = (name: P[number]): string =>
    `${rootPath}/${String(name)}`;

  return { value, getPath };
};

使用时的类型效果完全符合预期：

const { value, getPath } = useLayoutPaths({
  pathname,
  rootPath: `/department/${orgId}`,
  paths: ["trends", "comments"],
});

getPath("trends") // ✅ 类型校验通过
getPath("comments") // ✅ 类型校验通过
getPath("invalid") // ❌ TS直接抛出类型错误，提示参数不在允许范围内

方案2：使用const类型参数（TS 5.0+ 支持） #

如果项目使用TypeScript 5.0及以上版本，可以直接给泛型加const修饰符阻止类型拓宽，不需要修改readonly约束：

// 给泛型加const修饰符
export const useLayoutPaths = <const P extends string[]>(options: Options<P>) => {
  // 内部逻辑和方案1完全一致，不需要额外改动
  const { pathname, rootPath, paths } = options;

  if (paths.length === 0) {
    throw new Error("paths must be a non-empty array.");
  }

  const currentPath = pathname.substring(pathname.lastIndexOf("/") + 1);
  const value = (paths.includes(currentPath) ? currentPath : paths[0]) as P[number];

  const getPath = (name: P[number]): string =>
    `${rootPath}/${String(name)}`;

  return { value, getPath };
};

注意：如果不给value加类型断言，TS会默认把value推断为宽泛的string类型，加断言后value也会被推断为和paths成员一致的字面量联合类型，使用时类型提示更精准。

内容的提问来源于stack exchange，提问作者Moussa Harajli