types: 为useVbenVxeGrid添加泛型声明,使grid实例上能正确获取到行数据的类型 #5653
Conversation
RanMaoting
requested review from
anncwb,
vince292007 and
mynetfan
as code owners
|
WalkthroughThe changes introduce generic type parameters to enhance type safety and flexibility in the grid API, interfaces, and hook functions. Updates include modifying class signatures, property types, method signatures, and interface definitions to accept customizable types. Additionally, a new adapter wrapper is provided to re-export the grid hook with improved type inference, and playground examples are updated to explicitly specify type parameters. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
playground/src/views/examples/vxe-table/basic.vue (1)
47-55: Helpful commented code example for form schemaThe commented form configuration serves as a useful reference for developers who might need to implement form functionality in the future. Consider adding a brief documentation comment explaining when this form configuration would be useful.
- // 放开注释查看表单组件的类型 + // 放开注释启用表单组件并查看其类型。适用于需要在表格上方添加搜索或筛选表单的场景。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/effects/plugins/src/vxe-table/api.ts(2 hunks)packages/effects/plugins/src/vxe-table/types.ts(3 hunks)packages/effects/plugins/src/vxe-table/use-vxe-grid.ts(2 hunks)playground/src/adapter/vxe-table.ts(2 hunks)playground/src/views/examples/vxe-table/basic.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (19)
playground/src/views/examples/vxe-table/basic.vue (2)
46-58: Great addition of generic type parameter for improved type safety!The use of the generic type parameter
<RowType>withuseVbenVxeGridnow provides proper type inference for grid row data. This enhancement ensures that operations on grid rows will have proper type checking, making the code safer and enabling better IDE auto-completion.
60-61: Useful debugging comment for type inspectionThis comment provides valuable guidance for developers who need to inspect the table instance's type structure. This is particularly helpful for understanding the available properties and methods on the grid instance when working with TypeScript.
playground/src/adapter/vxe-table.ts (3)
3-3: Good addition of ComponentType importAdding the
ComponentTypeimport is necessary for the generic type implementation that follows. This creates a clean separation between component types and data types in the grid implementation.
9-12: Clean import renaming for implementation clarityRenaming the imported function to
useGridwhile exporting a wrapper asuseVbenVxeGridcreates a clear distinction between the core implementation and the adapter. This is a good practice for maintaining a clean API surface.
237-239: Well-implemented generic wrapper functionThis type-safe wrapper implementation is excellent:
- It correctly constrains
TtoRecord<string, any>which is appropriate for row data- It uses
Parameters<typeof useGrid<T, ComponentType>>to ensure parameter compatibility- It correctly forwards all parameters to the underlying function
This pattern allows consumers to specify row types while maintaining a consistent form component type.
packages/effects/plugins/src/vxe-table/use-vxe-grid.ts (4)
1-2: Good import of BaseFormComponentTypeAdding the import for
BaseFormComponentTypeis necessary for the generic implementation. This type will be used as a constraint and default for the form component type parameter.
12-15: Well-structured generic type parametersThe implementation of generic type parameters is well done:
T extends Record<string, any> = anyprovides proper constraint with backward compatibilityD extends BaseFormComponentType = BaseFormComponentTypeoffers flexibility for form component types- The parameter
options: VxeGridProps<T, D>correctly uses both type parametersThis structure allows for flexible typing while maintaining backward compatibility.
18-18: Properly typed extendedApiThe
extendedApiis correctly typed asExtendedVxeGridApi<T, D>, ensuring that the generic parameters are properly propagated through the API chain. This maintains type safety throughout the codebase.
24-24: Correct typing for props parameterThe
propsparameter in thedefineComponentfunction is properly typed asVxeGridProps<T>, ensuring that the component receives correctly typed props. This completes the type safety chain from function call to component rendering.packages/effects/plugins/src/vxe-table/api.ts (3)
29-29: Good implementation of generic type parameter for VxeGridApiAdding the generic type parameter
<T extends Record<string, any> = any>to theVxeGridApiclass is a key enhancement that enables proper type inference throughout the grid API. The constraint and default value ensure backward compatibility.
33-36: Proper typing of class propertiesThe updates to class property types are correct:
gridasVxeGridInstance<T>stateasnull | VxeGridProps<T>storeasStore<VxeGridProps<T>>These changes ensure that the row data type information flows through all aspects of the grid instance.
101-104: Correctly updated setState method parameter typeThe
setStatemethod's parameter type has been properly updated to use the generic type parameter:((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>) | Partial<VxeGridProps<T>>This ensures type consistency when updating grid state, preventing potential type errors.
packages/effects/plugins/src/vxe-table/types.ts (7)
12-12: Updated import to include BaseFormComponentType.The import now correctly includes
BaseFormComponentType, which is necessary for the generic type constraints being added to the interfaces.
34-37: Good enhancement - generic type parameters improve type safety.Adding generic parameters to
VxeGridPropsis a good improvement that allows consumers to specify the row data type (T) and form component type (D). The constraints are appropriate - row data extendsRecord<string, any>and form components extendBaseFormComponentType.
57-57: Correctly updated gridOptions to use generic type.The
gridOptionsproperty now correctly uses the generic type parameterT, which will allow for proper type inference when accessing grid data.
61-61: Correctly updated gridEvents to use generic type.The
gridEventsproperty now correctly uses the generic type parameterT, ensuring event handlers receive properly typed data.
65-65: Correctly updated formOptions to use generic type.The
formOptionsproperty now properly uses the generic type parameterD, which improves type safety for form components.
29-32:✅ Verification successful
Verify all uses of VxeTableGridOptions are updated consistently.
The
VxeTableGridOptionsinterface is now using a generic parameter<T = any>. Since you're updating theVxeGridPropsinterface to use this generic, ensure that all other places usingVxeTableGridOptionsare consistently updated throughout the codebase.
🏁 Script executed:
#!/bin/bash # Search for all uses of VxeTableGridOptions to ensure consistent generic usage echo "Searching for VxeTableGridOptions usage..." rg -t ts "VxeTableGridOptions" -A 1 -B 1Length of output: 1754
Generic Parameter Usage Verified
After verifying the codebase, all references to
VxeTableGridOptionsnow consistently use the generic parameter as defined inpackages/effects/plugins/src/vxe-table/types.ts. In particular:
- The interface in
packages/effects/plugins/src/vxe-table/types.tsis updated with<T = any>.- The re-export in
packages/effects/plugins/src/vxe-table/index.tscorrectly reflects this change.- Usages in
playground/src/views/system/dept/data.tsandplayground/src/views/system/menu/data.tsexplicitly pass the expected generic, ensuring consistency.No further changes are required.
72-78:❓ Verification inconclusive
Verify that NoInfer utility type is defined.
The
ExtendedVxeGridApinow uses generic parameters to provide better type inference. However, the code uses aNoInfer<T>utility type that doesn't appear to be imported in this file. This could lead to TypeScript errors if the type isn't defined elsewhere.Also, in the useStore function, you've used
VxeGridProps<any, any>for the state parameter but more specific typesVxeGridProps<D, F>for the return type inference. Consider using consistent typing:- useStore: <T = NoInfer<VxeGridProps<D, F>>>( - selector?: (state: NoInfer<VxeGridProps<any, any>>) => T, + useStore: <T = NoInfer<VxeGridProps<D, F>>>( + selector?: (state: NoInfer<VxeGridProps<D, F>>) => T,
🏁 Script executed:
#!/bin/bash # Search for NoInfer type definition in the codebase echo "Searching for NoInfer type definition..." rg -t ts "type\s+NoInfer" --no-filename rg -t ts "interface\s+NoInfer" --no-filenameLength of output: 179
Action Required: Verify inclusion of
NoInferand align typing inuseStore
- The search for the
NoInferutility type yielded no results. Please double-check whetherNoInferis defined in a global declaration file (such as in aglobal.d.ts), imported from an external library, or if it needs to be added.- In the
useStorefunction, the parameter forselectorcurrently usesNoInfer<VxeGridProps<any, any>>while the default generic is based onNoInfer<VxeGridProps<D, F>>. For consistency and better type safety, update theselectorfunction’s parameter type accordingly.- useStore: <T = NoInfer<VxeGridProps<D, F>>>( - selector?: (state: NoInfer<VxeGridProps<any, any>>) => T, + useStore: <T = NoInfer<VxeGridProps<D, F>>>( + selector?: (state: NoInfer<VxeGridProps<D, F>>) => T,
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Refactor