这是一个创建于 538 天前的主题，其中的信息可能已经有所发展或是发生改变。
之前用过涉及到 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 }] }
 |
1
mxT52CRuqR6o5 2023-05-29 20:59:46 +08:00
typescript 的泛型实现有没有办法 benchmark ？我现在就有用到类似的东西，感觉性能不是很理想
|
 |
2
EasilyJS OP 没试过 benchmark ，要找一些有没有相关工具，不过我试了一些比较复杂的数据结构，感觉推断速度还是比较快的
|
 |
3
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 自己也有很多坑点 |
 |
4
Leviathann 2023-05-29 22:21:56 +08:00
这个和 ts toolbelt 的 AutoPath / type-fest 的 Get 有什么区别
|
|
5
EasilyJS OP @codehz 目前我 object path 使用最多的场景是 form 表单的构建，针对那些特别复杂的表单需要拆分成若干层级的子组件，每个子组件使用的整个 form 状态的部分 path ，为了保持 form 的健壮性，需要对 path 进行强约束，避免手误导致意料之外的 bug ，如果 form 状态调整了，也可以针对 ts 报错的子组件进行快速调整。
|
|
6
codehz 2023-05-30 15:00:05 +08:00  1
@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}>这样的，就会直接出错 |
|
7
EasilyJS OP @codehz 确实目前一些特殊字符不是特别好处理，只能是避免使用，比较好奇如果是 <input {...bind(state.object.array[1].value)} 这种方式，确实能比较好的设置 value ，但是 onChange 回调的时候，如何把值设置回去呢？
|
|
8
EasilyJS OP @Leviathann 我试了下你提到的 type-fest 的 Get ，目前只能通过 path 拿到 value ，并不支持生成 path ，另外没有包含 path get/set 的实现，感觉使用场景比较局限
|
Select Language