[TS] 分享一个类型支持非常完善的 object path package

之前用过涉及到 object path 的一些 package ，但是发现这些 packages 的类型支持不是特别完善，比如 lodash, react-hook-form, formik, mongodb client 等。

这些 packages ，或多或少存在的几个问题是：

没有类型约束，不能提供代码自动完成；
生成的 path 不是标准的，大部分只支持 'a.b.c' 这种，这种 path 有一些缺点，与其他 package 不统一（例如 yup ），不能区分 object/array ，大部分都是判断如果是数字就当成数组处理，但是实际可能是 number key 的 object ；
不能通过 path 反推出对应的类型。

因为我在写 react-happy-form 这个开源项目的时候，对 object path 这块需求比较高，所以就自己单独写了 object-standard-path 这个 package：

提供了非常完善的类型支持（包括对一些特殊类型 any, Map 等的处理）；
生成的是标准的 path ；
支持使用 path 对类型进行反推。

使用起来也非常简单，没有任何依赖，1k 不到的包体积，如果有需要的话，大家可以试试 :)

Repo 地址： https://github.com/react-earth/object-standard-path

可以的话，可以小点个 star ，每个 star 都是我以后持续更新的动力，感谢！🌟

import { Path, PathValue, pathGet, pathSet } from 'object-standard-path';

type Test = {
  value: string;
  array: {
    value: string;
  }[];
};

type TestPath = Path<Test>;
// result: "value" | "array" | `array[${number}]` | `array[${number}].value`

type TestPathValue = PathValue<Test, 'array[0]'>;
// result: { value: string }

const object = {
  array: [
    {
      value: 1,
    },
  ],
};

const result = pathGet(object, 'array[0].value');
// result: 1

pathSet(object, 'array[0].value', 2);
// result: { array: [{ value: 2 }] }

codehz

2023-05-29 21:52:27 +08:00

我觉得对象深度修改还是 lens/optics 的思路好，不依赖 ts 的模版字符串，不需要运行时和编译期 parse 路径两次（然后可能实现不一致）
用 template literal 的时候，数字要先组合到字符串里，然后再 parse 回来，这在我看来是有点浪费的行为（
当然用字符串也有字符串的好处，比如说可以整个当作 key 来使用——但 lens 的组合也可以提供这种能力
----
当然最好的方法还是从源头去掉这个需求
什么情况会用到 path ，如果是为了 form 的递归，那可能有别的思路——比如 hookstate 那样直接在状态管理库上就把递归的问题处理好了，拿到的直接就是一个 State<T, Extensions>对象，T 是最终的类型，不需要考虑原始的容器，对它进行更新即可
当然我这只是个人的想法，实际应用可能也有不同的问题，hookstate 自己也有很多坑点

codehz

2023-05-30 15:00:05 +08:00

@EasilyJS 看了一眼 happy-form 的使用场景，确实有其合理性，包括其中推导参数类型的内容
但是如果像我说的用 hookstate 这样的库的话，就可以直接使用原生的.和[]语法来引用子属性，做类似<input {...bind(state.object.array[1].value)} /> 这样的写法，或者也可以直接把提取出来的子 state 传递给自定义组件，就好像它只是普通的 value 一样，hookstate 的 validator 也能在这个提取出来的子 state 上定义，从而从根源上消除了对 object path 的需求
----
此外我担心 object-path 有其局限性，比如关于特殊字符的处理，js object 里可以用任意符号做 key ，当使用了这样的 key 的时候，就很难有一个“正确的”处理方案，当然可以一开始就直接禁止，typescript 里检测到特殊符号就返回 never
现在的情况是完全没限制，然后 Path<{"a.b": number}>这样的，就会直接出错