开发工具静态分析代码质量【免费下载链接】flowAdds static typing to JavaScript to improve developer productivity and code quality.项目地址https://gitcode.com/gh_mirrors/flow30/flow点击查看免费下载导读本文以 Flow 仓库中 AI 评测任务 hook_002_readonly_return 为骨架完整解析如何用 Flow 的hook 语法hook关键字声明的 React Hook实现一个泛型useMap它内部用Map承载状态、每次变更生成新Map触发重渲染并对外暴露get / set / delete / has / size / entries六个操作其中entries以只读数组形式返回。读完本文你将掌握 hook 声明的写法、ReadonlyArray与不可变更新在 Flow 类型系统下的正确表达方式以及该任务如何通过flow check零错误验证并被评测系统自动评分。任务背景这份文档在评测什么prompt.md是一份 SWE-bench 风格的任务描述它只描述行为做什么刻意不规定 Flow 语法怎么做。原文要求如下在main.js中编写一个 Flow hookuseMap用 React state 管理一个键值 Map。hook 对键值类型是泛型的接受一个可选的初始键值对列表只读的元组数组。返回包含这些操作的对象……对应的 config.json 记录了该任务的元数据与评分器{ metadata: { name: hook_002_readonly_return, category: unique_features, tags: [flow, hook, readonly, type_checking], difficulty: hard }, grading: { graders: [ { type: contains_ast_node_type, query: HookDeclaration }, { type: ast_query, selector: .type \ObjectTypeProperty\ and .key.name \entries\ and .value.type \GenericTypeAnnotation\ and .value.id.name \ReadonlyArray\ } ] } }两个评分器透露了本题的两个核心考点必须使用 hook 语法——答案的 AST 中必须出现HookDeclaration节点对应hook useMap...{}声明普通function定义不算通过entries必须是只读数组——返回对象类型中entries属性的类型必须是ReadonlyArray泛型而不是可变的Array。也就是说这是一道同时考核「hook 声明语法」与「只读类型表达」的硬核任务。需求逐条拆解六个操作的类型签名任务要求返回一个对象包含五个方法与一个属性。先按需求建立完整的类型契约成员签名语义get(key)(key: K) V \| void返回 key 对应的值找不到返回undefinedset(key, value)(key: K, value: V) void新增或更新条目delete(key)(key: K) void删除条目has(key)(key: K) boolean判断 key 是否存在sizenumber当前条目数量entriesReadonlyArray[K, V]全部[key, value]对的只读数组这里有两个值得注意的 Flow 类型细节get的返回类型写成V | void与 JS 运行时语义Map.prototype.get找不到时返回undefined完全对齐避免把undefined误声明成V | nullentries用ReadonlyArray[K, V]而非Array[K, V]调用方只能读取不能 push、splice 修改从类型层面防止外部绕过set/delete直接篡改状态视图。参考实现逐行解析仓库中的参考解法位于 ideal/main.js起始文件input/main.js只是一个带// TODO: Implement的空壳。完整实现如下import {useCallback, useState} from react; export default hook useMapK, V(initial?: ReadonlyArray[K, V]): { get: (key: K) V | void, set: (key: K, value: V) void, delete: (key: K) void, has: (key: K) boolean, size: number, entries: ReadonlyArray[K, V], } { const [map, setMap] useStateMapK, V( () new Map(initial ?? []), ); const get useCallback((key: K): V | void map.get(key), [map]); const set useCallback( (key: K, value: V): void { setMap((prev) { const next new Map(prev); next.set(key, value); return next; }); }, [], ); const del useCallback( (key: K): void { setMap((prev) { const next new Map(prev); next.delete(key); return next; }); }, [], ); const has useCallback((key: K): boolean map.has(key), [map]); return { get, set, delete: del, has, size: map.size, entries: Array.from(map.entries()), }; }下面按知识点拆解这段代码。1. hook 声明语法export default hook useMapK, V(...)Flow 的hook 语法对应测试目录 tests/hook_syntax 所覆盖的特性用关键字hook声明一个遵循 React Rules of Hooks 的函数形如hook 名称类型参数(参数): 返回类型 { ... }与普通函数的三处关键差异编译器将这类函数识别为HookDeclaration节点见解析器侧的实现证据 estree_translator.rs 与节点定义 node_kinds.rs从而可以针对 Hook 施加专门的规则检查它天然与 Flow 的component 语法配合hook只能在component或其他 hook 内部被调用同一评测集的 hook_005_conditional_call 展示了组件内调用多个 hook 的常规形态返回类型必须显式标注通常为元组或对象类型。本任务还要求export default使useMap成为模块默认导出方便其他组件直接引用。2. 泛型与可选初始值initial?: ReadonlyArray[K, V]useMapK, V对键、值类型全泛型化。参数initial是可选的类型为ReadonlyArray[K, V]——只读的二元组数组正好对应题目「read-only array of tuples」的措辞。初始化通过useState的函数式初始化器完成const [map, setMap] useStateMapK, V( () new Map(initial ?? []), );useStateMapK, V(...)显式声明状态类型杜绝类型被推断成Mapempty或丢失泛型惰性初始化器() new Map(...)只在首次渲染执行避免每次渲染都构造Mapinitial ?? []正确处理「未传初始值」的情形undefined回退为空数组new Map([])得到空 Mapnew Map(initial)能直接接收ReadonlyArray[K, V]因为Map构造器接受Iterable[K, V]只读数组是可迭代的——这正是把初始值声明为只读仍然可用的原因。3. 不可变更新每个变更都生成新 Map任务明确要求「Each mutating operation should create a newMapto trigger re-renders」。参考实现用函数式更新模式贯彻这一点const set useCallback( (key: K, value: V): void { setMap((prev) { const next new Map(prev); next.set(key, value); return next; }); }, [], );要点先拷贝、后修改new Map(prev)浅拷贝现有状态在拷贝上执行next.set(...)/next.delete(...)再返回新 Map。因为每次返回的都是新的对象引用React 才能可靠地感知状态变化并触发重渲染函数式更新setMap(prev ...)基于最新状态计算配合[]空依赖数组set/del回调即使被useCallback缓存也永远读到最新状态天然规避闭包过期问题命名技巧内部回调命名为del在返回对象时通过delete: del重命名映射到外部 API。这是因为delete是 JS 保留字不能直接作为变量名但可以作为对象属性名。4. 只读的entriesArray.from(map.entries())entries属性有两个层面的「只读」size: map.size, entries: Array.from(map.entries()),运行时层面Array.from(map.entries())每次渲染生成一个全新的普通数组快照外部修改它不会污染内部Map状态类型层面返回类型标注为ReadonlyArray[K, V]Flow 会拒绝任何对entries数组的写操作如entries.push(...)保证调用方只能消费这份快照。这正对应评分器中entries属性类型必须为ReadonlyArray的 AST 断言。另一个值得注意的对比是size: map.sizeMap实例本身是可变对象直接暴露map.size在类型上是安全的只读属性因此无需额外拷贝。5.get/has的依赖优化get与has都是纯读操作直接读取闭包中的map因此useCallback依赖数组写[map]set/del通过函数式更新不依赖map依赖数组为空[]。这样的依赖设计让稳定回调可以被安全地传给子组件、放进useEffect依赖列表且不会造成多余的重新创建。为何必须通过flow check零错误任务结尾要求「The code must passflow checkwith zero errors」。这是该评测集所有任务包括 hook_001_basic 等共有的基线评分器详见 evals/README.md 对flow_checkgrader 的说明——「the solution must type-check with zero Flow errors」。在本地复现验证的方式如下无需构建 Flow 源码npm install即可拿到预编译的flow二进制npm install node_modules/.bin/flow check若实现中引入类型瑕疵Flow 会在以下位置报错例如返回类型与实现不一致如entries返回Array但声明ReadonlyArrayget返回V | undefined却标注V | void不匹配两者在 Flow 中等价但需保持一致忘写flowpragma导致文件被视为未检查在 hook 内部调用其他 hook 违反规则本文实现未涉及。借助评测框架还可以用 dry-run 模式一键验证参考解是否通过全部评分器make validate ARGS--eval hook_002_readonly_return该命令会应用黄金补丁gold patch并运行flow_check、AST 断言等评分器确认评测本身是良构的机制说明同样见 evals/README.md。从评测任务到生产实践的启示虽然useMap是一个教学性任务但它完整示范了 Flow 类型系统与 React 状态管理结合时的四条工程准则用 hook 语法承载自定义逻辑 Hookhook声明让「这是 React Hook、必须遵守调用规则」成为类型系统可见的契约配合 component 语法如 hook_004_mutation_prevention 中的component FilterPanel可以写出完全类型化的组件树对外暴露只读视图ReadonlyArray、$ReadOnly对象等只读类型是 Flow 控制可变性的核心工具能防止状态管理库的内部数据被外部意外改写不可变更新要显式拷贝-修改-返回的模式虽然多写几行但配合useCallback依赖数组可以精确控制重渲染范围这比依赖可变对象的隐式变更更可预测显式标注状态泛型useStateMapK, V让复杂容器类型的泛型参数不被推断削弱是大型项目保持类型精度的基本习惯。结语通过剖析hook_002_readonly_return这个评测任务我们完整走通了「需求描述 → hook 语法实现 → 泛型设计 → 只读类型表达 → 零错误类型检查 → 自动评分」的闭环。参考实现 ideal/main.js 是可直接复用的模板把Map换成任意容器把entries换成任意只读视图这套「泛型 hook 不可变更新 只读返回」的组合拳即可迁移到你的真实业务 Hook 中。赞分享开发工具静态分析代码质量【免费下载链接】flowAdds static typing to JavaScript to improve developer productivity and code quality.项目地址https://gitcode.com/gh_mirrors/flow30/flow点击查看免费下载相关推荐Flow 泛型受约束组件实战用 component 语法与 T extends 编写类型安全的 DataTableFlow 泛型受约束组件实战用 component 语法与 T extends 编写类型安全的 DataTable 本文以 Flow 仓库内置的 AI 评测用开发工具静态分析代码质量V语言泛型编程实战编译时类型安全的完整指南V语言泛型编程实战编译时类型安全的完整指南 你是否曾在开发中遇到因类型不匹配导致的运行时错误是否希望在编译阶段就能捕获这些问题同时保持代码的灵活性和复用性编程语言编译器语言运行时标准库Flow Hook 类型注解实战用 hook 语法与 __DEV__ 特性开关编写类型安全的 Counter 组件Flow Hook 类型注解实战用 hook 语法与 __DEV__ 特性开关编写类型安全的 Counter 组件 Flow 的 Hook Syntax h开发工具静态分析代码质量上一篇gh_mirrors/es/es6features项目详解模块导出的多种方式下一篇Direct-memory-access-CS2-DMA开发者指南内存同步与网络数据传输实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Flow 中编写类型安全的 useMap Hook：hook 语法、泛型与只读返回类型的完整实战
开发工具静态分析代码质量【免费下载链接】flowAdds static typing to JavaScript to improve developer productivity and code quality.项目地址https://gitcode.com/gh_mirrors/flow30/flow点击查看免费下载导读本文以 Flow 仓库中 AI 评测任务 hook_002_readonly_return 为骨架完整解析如何用 Flow 的hook 语法hook关键字声明的 React Hook实现一个泛型useMap它内部用Map承载状态、每次变更生成新Map触发重渲染并对外暴露get / set / delete / has / size / entries六个操作其中entries以只读数组形式返回。读完本文你将掌握 hook 声明的写法、ReadonlyArray与不可变更新在 Flow 类型系统下的正确表达方式以及该任务如何通过flow check零错误验证并被评测系统自动评分。任务背景这份文档在评测什么prompt.md是一份 SWE-bench 风格的任务描述它只描述行为做什么刻意不规定 Flow 语法怎么做。原文要求如下在main.js中编写一个 Flow hookuseMap用 React state 管理一个键值 Map。hook 对键值类型是泛型的接受一个可选的初始键值对列表只读的元组数组。返回包含这些操作的对象……对应的 config.json 记录了该任务的元数据与评分器{ metadata: { name: hook_002_readonly_return, category: unique_features, tags: [flow, hook, readonly, type_checking], difficulty: hard }, grading: { graders: [ { type: contains_ast_node_type, query: HookDeclaration }, { type: ast_query, selector: .type \ObjectTypeProperty\ and .key.name \entries\ and .value.type \GenericTypeAnnotation\ and .value.id.name \ReadonlyArray\ } ] } }两个评分器透露了本题的两个核心考点必须使用 hook 语法——答案的 AST 中必须出现HookDeclaration节点对应hook useMap...{}声明普通function定义不算通过entries必须是只读数组——返回对象类型中entries属性的类型必须是ReadonlyArray泛型而不是可变的Array。也就是说这是一道同时考核「hook 声明语法」与「只读类型表达」的硬核任务。需求逐条拆解六个操作的类型签名任务要求返回一个对象包含五个方法与一个属性。先按需求建立完整的类型契约成员签名语义get(key)(key: K) V \| void返回 key 对应的值找不到返回undefinedset(key, value)(key: K, value: V) void新增或更新条目delete(key)(key: K) void删除条目has(key)(key: K) boolean判断 key 是否存在sizenumber当前条目数量entriesReadonlyArray[K, V]全部[key, value]对的只读数组这里有两个值得注意的 Flow 类型细节get的返回类型写成V | void与 JS 运行时语义Map.prototype.get找不到时返回undefined完全对齐避免把undefined误声明成V | nullentries用ReadonlyArray[K, V]而非Array[K, V]调用方只能读取不能 push、splice 修改从类型层面防止外部绕过set/delete直接篡改状态视图。参考实现逐行解析仓库中的参考解法位于 ideal/main.js起始文件input/main.js只是一个带// TODO: Implement的空壳。完整实现如下import {useCallback, useState} from react; export default hook useMapK, V(initial?: ReadonlyArray[K, V]): { get: (key: K) V | void, set: (key: K, value: V) void, delete: (key: K) void, has: (key: K) boolean, size: number, entries: ReadonlyArray[K, V], } { const [map, setMap] useStateMapK, V( () new Map(initial ?? []), ); const get useCallback((key: K): V | void map.get(key), [map]); const set useCallback( (key: K, value: V): void { setMap((prev) { const next new Map(prev); next.set(key, value); return next; }); }, [], ); const del useCallback( (key: K): void { setMap((prev) { const next new Map(prev); next.delete(key); return next; }); }, [], ); const has useCallback((key: K): boolean map.has(key), [map]); return { get, set, delete: del, has, size: map.size, entries: Array.from(map.entries()), }; }下面按知识点拆解这段代码。1. hook 声明语法export default hook useMapK, V(...)Flow 的hook 语法对应测试目录 tests/hook_syntax 所覆盖的特性用关键字hook声明一个遵循 React Rules of Hooks 的函数形如hook 名称类型参数(参数): 返回类型 { ... }与普通函数的三处关键差异编译器将这类函数识别为HookDeclaration节点见解析器侧的实现证据 estree_translator.rs 与节点定义 node_kinds.rs从而可以针对 Hook 施加专门的规则检查它天然与 Flow 的component 语法配合hook只能在component或其他 hook 内部被调用同一评测集的 hook_005_conditional_call 展示了组件内调用多个 hook 的常规形态返回类型必须显式标注通常为元组或对象类型。本任务还要求export default使useMap成为模块默认导出方便其他组件直接引用。2. 泛型与可选初始值initial?: ReadonlyArray[K, V]useMapK, V对键、值类型全泛型化。参数initial是可选的类型为ReadonlyArray[K, V]——只读的二元组数组正好对应题目「read-only array of tuples」的措辞。初始化通过useState的函数式初始化器完成const [map, setMap] useStateMapK, V( () new Map(initial ?? []), );useStateMapK, V(...)显式声明状态类型杜绝类型被推断成Mapempty或丢失泛型惰性初始化器() new Map(...)只在首次渲染执行避免每次渲染都构造Mapinitial ?? []正确处理「未传初始值」的情形undefined回退为空数组new Map([])得到空 Mapnew Map(initial)能直接接收ReadonlyArray[K, V]因为Map构造器接受Iterable[K, V]只读数组是可迭代的——这正是把初始值声明为只读仍然可用的原因。3. 不可变更新每个变更都生成新 Map任务明确要求「Each mutating operation should create a newMapto trigger re-renders」。参考实现用函数式更新模式贯彻这一点const set useCallback( (key: K, value: V): void { setMap((prev) { const next new Map(prev); next.set(key, value); return next; }); }, [], );要点先拷贝、后修改new Map(prev)浅拷贝现有状态在拷贝上执行next.set(...)/next.delete(...)再返回新 Map。因为每次返回的都是新的对象引用React 才能可靠地感知状态变化并触发重渲染函数式更新setMap(prev ...)基于最新状态计算配合[]空依赖数组set/del回调即使被useCallback缓存也永远读到最新状态天然规避闭包过期问题命名技巧内部回调命名为del在返回对象时通过delete: del重命名映射到外部 API。这是因为delete是 JS 保留字不能直接作为变量名但可以作为对象属性名。4. 只读的entriesArray.from(map.entries())entries属性有两个层面的「只读」size: map.size, entries: Array.from(map.entries()),运行时层面Array.from(map.entries())每次渲染生成一个全新的普通数组快照外部修改它不会污染内部Map状态类型层面返回类型标注为ReadonlyArray[K, V]Flow 会拒绝任何对entries数组的写操作如entries.push(...)保证调用方只能消费这份快照。这正对应评分器中entries属性类型必须为ReadonlyArray的 AST 断言。另一个值得注意的对比是size: map.sizeMap实例本身是可变对象直接暴露map.size在类型上是安全的只读属性因此无需额外拷贝。5.get/has的依赖优化get与has都是纯读操作直接读取闭包中的map因此useCallback依赖数组写[map]set/del通过函数式更新不依赖map依赖数组为空[]。这样的依赖设计让稳定回调可以被安全地传给子组件、放进useEffect依赖列表且不会造成多余的重新创建。为何必须通过flow check零错误任务结尾要求「The code must passflow checkwith zero errors」。这是该评测集所有任务包括 hook_001_basic 等共有的基线评分器详见 evals/README.md 对flow_checkgrader 的说明——「the solution must type-check with zero Flow errors」。在本地复现验证的方式如下无需构建 Flow 源码npm install即可拿到预编译的flow二进制npm install node_modules/.bin/flow check若实现中引入类型瑕疵Flow 会在以下位置报错例如返回类型与实现不一致如entries返回Array但声明ReadonlyArrayget返回V | undefined却标注V | void不匹配两者在 Flow 中等价但需保持一致忘写flowpragma导致文件被视为未检查在 hook 内部调用其他 hook 违反规则本文实现未涉及。借助评测框架还可以用 dry-run 模式一键验证参考解是否通过全部评分器make validate ARGS--eval hook_002_readonly_return该命令会应用黄金补丁gold patch并运行flow_check、AST 断言等评分器确认评测本身是良构的机制说明同样见 evals/README.md。从评测任务到生产实践的启示虽然useMap是一个教学性任务但它完整示范了 Flow 类型系统与 React 状态管理结合时的四条工程准则用 hook 语法承载自定义逻辑 Hookhook声明让「这是 React Hook、必须遵守调用规则」成为类型系统可见的契约配合 component 语法如 hook_004_mutation_prevention 中的component FilterPanel可以写出完全类型化的组件树对外暴露只读视图ReadonlyArray、$ReadOnly对象等只读类型是 Flow 控制可变性的核心工具能防止状态管理库的内部数据被外部意外改写不可变更新要显式拷贝-修改-返回的模式虽然多写几行但配合useCallback依赖数组可以精确控制重渲染范围这比依赖可变对象的隐式变更更可预测显式标注状态泛型useStateMapK, V让复杂容器类型的泛型参数不被推断削弱是大型项目保持类型精度的基本习惯。结语通过剖析hook_002_readonly_return这个评测任务我们完整走通了「需求描述 → hook 语法实现 → 泛型设计 → 只读类型表达 → 零错误类型检查 → 自动评分」的闭环。参考实现 ideal/main.js 是可直接复用的模板把Map换成任意容器把entries换成任意只读视图这套「泛型 hook 不可变更新 只读返回」的组合拳即可迁移到你的真实业务 Hook 中。赞分享开发工具静态分析代码质量【免费下载链接】flowAdds static typing to JavaScript to improve developer productivity and code quality.项目地址https://gitcode.com/gh_mirrors/flow30/flow点击查看免费下载相关推荐Flow 泛型受约束组件实战用 component 语法与 T extends 编写类型安全的 DataTableFlow 泛型受约束组件实战用 component 语法与 T extends 编写类型安全的 DataTable 本文以 Flow 仓库内置的 AI 评测用开发工具静态分析代码质量V语言泛型编程实战编译时类型安全的完整指南V语言泛型编程实战编译时类型安全的完整指南 你是否曾在开发中遇到因类型不匹配导致的运行时错误是否希望在编译阶段就能捕获这些问题同时保持代码的灵活性和复用性编程语言编译器语言运行时标准库Flow Hook 类型注解实战用 hook 语法与 __DEV__ 特性开关编写类型安全的 Counter 组件Flow Hook 类型注解实战用 hook 语法与 __DEV__ 特性开关编写类型安全的 Counter 组件 Flow 的 Hook Syntax h开发工具静态分析代码质量上一篇gh_mirrors/es/es6features项目详解模块导出的多种方式下一篇Direct-memory-access-CS2-DMA开发者指南内存同步与网络数据传输实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考