typescript - 将函数返回值定义为读取对象中路径的类型

标签 typescript typescript-typings typescript-generics

我想创建一个简单的辅助函数来从这样的对象读取路径:

interface Human {
  address: {
    city: {
      name: string;
    }
  }
}

const human: Human = { address: { city: { name: "Town"}}};
getIn<Human>(human, "address.city.name"); // Returns "Town"

这个助手在 JS 中很容易创建,但在 TS 中使其类型安全有点复杂。我已经走到这一步了:

type Prev = [never, 0, 1, 2, 3, 4, 5, 6, ...0[]];

type Join<K, P> = K extends string | number
  ? P extends string | number
    ? `${K}${"" extends P ? "" : "."}${P}`
    : never
  : never;

type Path<T, D extends number = 4> = [D] extends [never]
  ? never
  : T extends object
  ? {
      [K in keyof T]-?: K extends string | number
        ? `${K}` | Join<K, Path<T[K], Prev[D]>>
        : never;
    }[keyof T]
  : "";

function getIn<T extends Record<string, any>>(object: T, path: Path<T>): T {
  const parts = path.split(".");
  return parts.reduce<T>((result, key) => {
    if (result !== undefined && result[key]) {
      return result[key];
    }

    return undefined;
  }, object);
}

这是可行的,但这里的错误是 getIn 的返回类型不应该是 T,而是 T 内部的东西,具体取决于在给定的路径上。所以如果像这样调用:

getIn<Human>(human, "address.city.name"); // Returns "Town"

TypeScript 应该知道返回值是一个字符串,如 Human 接口(interface)中所定义。如果给定 "address.city",返回类型应为 City 等。

有什么办法可以保证输入安全吗?

最佳答案

我主要关心的是如何正确输入 getIn() 的调用签名。 。这将是 generic调用签名涉及recursive conditional types使用template literal types解析和操作字符串 literal types 。编译器无法验证返回值是否可分配给如此复杂的类型,因此实现将需要一个或多个 type assertions以避免错误。所有这些意味着:在实现该功能时要小心,以确保您做得正确;编译器不会发现错误,因为你会抛出 as any放弃直到编译为止。

这是基本计划:

declare function getIn<T extends object, K extends ValidatePath<T, K>>(
  object: T,
  path: K
): DeepIdx<T, K>;

我们的想法是定义两种实用程序类型:

  • ValidatePath<T, K>将采用对象类型 T和字符串类型 K代表 T 属性的点线路径。如果KT有效路径,然后ValidatePath<T, K>将相当于 K 。如果 T 的路径无效 ,然后ValidatePath<T, K>将是一些“接近”K的有效路径,对于“关闭”的某些定义。希望我们能够constrain K extends ValidatePath<T, K>这样有效的路径将被接受,无效的路径将生成一条错误消息,建议有效的路径。

  • DeepIdx<T, K>将采用对象类型 T和字符串类型 K代表 T 属性的点线路径,然后 DeepIdx<T, K>将是 T 的属性类型在路径 K .

在定义这些之前,我们必须修复调用签名。编译器几乎肯定会提示 K extends ValidatePath<T, K>是无效的循环约束。我们可以通过仅约束 K 来解决这个问题至string然后为 path 编写一个(相当丑陋的)条件类型参数将评估为所需的 ValidatePath<T, K> 。它看起来像这样:

declare function getIn<T extends object, K extends string>(
  object: T,
  path: K extends ValidatePath<T, K> ? K : ValidatePath<T, K>
): DeepIdx<T, K>;

好的,现在开始实现:

type ValidatePath<T, K extends string> =
  K extends keyof T ? K :
  K extends `${infer K0}.${infer KR}` ?
  K0 extends keyof T ? `${K0}.${ValidatePath<T[K0], KR>}` : Extract<keyof T, string>
  : Extract<keyof T, string>

type DeepIdx<T, K extends string> =
  K extends keyof T ? T[K] :
  K extends `${infer K0}.${infer KR}` ?
  K0 extends keyof T ? DeepIdx<T[K0], KR> : never
  : never

在这两种情况下,我们都会遍历 K 。如果KT 的键,那么它就是一个有效的路径,我们正在查看 T[K]属性(property)。如果K是一条虚线路径,那么我们看K0部分在第一个点之前。如果这是 T 的键,那么第一部分是有效路径,我们需要递归到 T[K0]带有零件的路径 KR第一个点之后。如果K0不是 T 的键,那么我们有一个无效的路径,所以 Extract<keyof T, string>是“关闭”有效路径(使用 the Extract<T, U> utility type 丢弃任何非字符串键)。如果 K既不是 T 的键也不是虚线路径,那么它是无效的,所以 Extract<keyof T, string>也是“关闭”有效路径。


好吧,让我们测试一下:

const human: Human = { address: { city: { name: "Town" } } };
const addr = getIn(human, "address");
// const addr: { city: { name: string; }; }
console.log(addr) // {city: {name: "Town"}}
const city = getIn(human, "address.city");
// const city: { name: string; }
console.log(city) // {name: "Town"}
const town = getIn(human, "address.city.name");
// const town: string
console.log(town) // "Town"

getIn(human, "address.city.neam"); // error!
// Argument of type '"address.city.neam"' is not 
// assignable to parameter of type '"address.city.name"'

getIn(human, ""); // error!
// Argument of type '""' is not assignable to 
// parameter of type '"address"'

getIn({ a: 1, b: 2, c: 3 }, "z") // error!
// Argument of type '"z"' is not assignable to 
// parameter of type '"a" | "b" | "c"'.

看起来不错。所有有效路径均被接受,并且输出类型正确。同时,无效路径都会生成错误,从而提出正确路径应该是什么的建议。

Playground link to code

关于typescript - 将函数返回值定义为读取对象中路径的类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74705564/

相关文章:

css - 用于 mat-input 和 mat-form-field 的 CSS 问题

javascript - ts-node 和自定义加载器

javascript - 为什么在 Typescript 中调用第三方 API 时 Axios 的 onUploadProgress 永远不会触发?

visual-studio - visual studio 2017 spa 模板 vue js 丢失

TypeScript 函数参数泛型

Angular ViewChild fileInput 注释未定义

reactjs - 如何让 TypeScript 引擎允许 JSX 中的自定义 HTML 属性?

typescript 2.0。 tsconfig.json 中的 "types"字段

Typescript - isEmpty 函数的通用类型保护

Typescript:根据预期的返回类型约束函数泛型类型