TypeScript如何实现字符串数组按索引映射为泛型类型实例

核心前提 #

TypeScript 的所有类型信息仅存在于编译阶段，运行时会被完全抹除，因此不可能直接通过泛型T在运行时获取键名和排序，这是该需求的核心限制，不存在不额外传入键顺序的实现方案。

实现代码 #

我们通过显式传入键顺序数组的方式满足需求，同时保证类型完全安全：

function parse<T extends Record<string, any>>(keys: Array<keyof T>, values: Array<string | undefined | null>): T {
  const result = {} as T;
  // 取键数组和值数组的最小长度作为遍历上限
  const validLength = Math.min(keys.length, values.length);
  // 给前validLength个属性赋值
  for (let i = 0; i < validLength; i++) {
    result[keys[i]] = values[i] ?? undefined;
  }
  // 剩余键显式赋值为undefined，可按需改为null
  for (let i = validLength; i < keys.length; i++) {
    result[keys[i]] = undefined;
  }
  return result;
}

如果需要复用同一个泛型的解析逻辑，也可以用工厂函数提前绑定键顺序：

function createParser<T extends Record<string, any>>(keys: Array<keyof T>) {
  return (values: Array<string | undefined | null>) => parse(keys, values);
}

使用示例 #

基础用法 #

interface Person {
  lastName: string;
  firstName: string;
}

// 传入键顺序和值数组，直接得到类型正确的结果
const result = parse<Person>(['lastName', 'firstName'], ['foo', 'bar']);
// 输出：{ lastName: 'foo', firstName: 'bar' }

边界场景测试 #

// 值长度小于键长度，剩余属性设为undefined
const result1 = parse<Person>(['lastName', 'firstName'], ['foo']);
// 输出：{ lastName: 'foo', firstName: undefined }

// 值长度大于键长度，自动忽略多余的值
const result2 = parse<Person>(['lastName', 'firstName'], ['foo', 'bar', 'extra']);
// 输出：{ lastName: 'foo', firstName: 'bar' }

// 值包含null/undefined，自动处理
const result3 = parse<Person>(['lastName', 'firstName'], [null, undefined]);
// 输出：{ lastName: undefined, firstName: undefined }

工厂函数复用 #

// 提前绑定Person的键顺序
const parsePerson = createParser<Person>(['lastName', 'firstName']);
// 后续直接传值数组即可
const result = parsePerson(['foo', 'bar']);

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