TypeScript中如何基于属性访问字符串限制深对象属性的赋值类型？

先明确目标接口：

interface DeepObject {
    prop1: string;
    prop2: {
        prop3: string;
        prop4: boolean;
        prop5: {
            prop6: Date;
        };
    };
}

原setDeep函数依赖any类型，完全没有类型校验：

function setDeep(object: any, path: string, value: any): void {
    const tags = path.split('.');
    const length = tags.length - 1;
    for (let i = 0; i < length; i++) {
        if (object[tags[i]]) {
            object = object[tags[i]];
        } else {
            return;
        }
    }
    object[tags[length]] = value;
}

原使用示例：

const myDeepObject: DeepObject = {
    prop1: '',
    prop2: {
        prop3: '',
        prop4: false,
        prop5: {
            prop6: new Date()
        }
    }
};

setDeep(myDeepObject, 'prop2.prop5.prop6', new Date(2002));

当然可行。我们可以借助TypeScript的递归条件类型解析属性路径字符串，自动推导对应属性的类型，同时严格约束第一个参数为DeepObject类型。

实现方案 #

首先定义两个辅助类型，用于解析路径和提取对应属性的类型：

// 解析点分隔的路径字符串，生成合法属性路径的联合类型
type Path<T> = T extends object
  ? { [K in keyof T]: K extends string ? `${K}` | `${K}.${Path<T[K]>}` : never }[keyof T]
  : never;

// 根据路径字符串，提取目标属性的类型
type PathValue<T, P extends Path<T>> = P extends `${infer K}.${infer Rest}`
  ? K extends keyof T
    ? PathValue<T[K], Rest & Path<T[K]>>
    : never
  : P extends keyof T
  ? T[P]
  : never;

然后重写setDeep函数，利用辅助类型实现类型约束和自动推导：

function setDeep<T extends DeepObject, P extends Path<T>>(
  object: T,
  path: P,
  value: PathValue<T, P>
): void {
  const tags = path.split('.') as Array<keyof any>;
  let current = object;
  const length = tags.length - 1;

  for (let i = 0; i < length; i++) {
    const key = tags[i];
    current = current[key] as typeof current[key];
    if (!current) return;
  }

  const finalKey = tags[length] as keyof typeof current;
  current[finalKey] = value as typeof current[typeof finalKey];
}

效果验证 #

• 传入合法路径与对应类型值，完全正常：

  setDeep(myDeepObject, 'prop2.prop5.prop6', new Date(2002)); // 合法
  setDeep(myDeepObject, 'prop1', 'hello world'); // 合法
  setDeep(myDeepObject, 'prop2.prop4', true); // 合法
  

• 传入错误类型值，TypeScript直接报错：

  setDeep(myDeepObject, 'prop2.prop5.prop6', 'not a date'); // 报错：类型"string"不能赋值给类型"Date"
  setDeep(myDeepObject, 'prop1', 123); // 报错：类型"number"不能赋值给类型"string"
  

• 传入不存在的路径，同样报错：

  setDeep(myDeepObject, 'prop2.prop7', 'test'); // 报错：类型"prop2.prop7"不符合Path<DeepObject>类型
  

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