TypeScript: Migrate packages/list-reusable-blocks package to TypeScript
#70518
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
packages/list-reusable-blocks package to TypeScriptpackages/list-reusable-blocks package to TypeScript
|
Can we update this branch from trunk and then we can review it? |
There was a problem hiding this comment.
Pull request overview
This PR migrates the packages/list-reusable-blocks package from JavaScript to TypeScript, adding type annotations and creating type definitions to improve type safety.
Changes:
- Added TypeScript configuration files for the package and root project
- Created type definitions for components and data structures
- Migrated all source files (.js to .tsx/.ts) with type annotations
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Added reference to the list-reusable-blocks package |
| packages/list-reusable-blocks/tsconfig.json | Created TypeScript configuration for the package |
| packages/list-reusable-blocks/src/utils/types.ts | Added type definitions for components and data structures |
| packages/list-reusable-blocks/src/utils/import.ts | Migrated to TypeScript with type annotations |
| packages/list-reusable-blocks/src/utils/file.ts | Migrated to TypeScript with type annotations |
| packages/list-reusable-blocks/src/utils/export.ts | Migrated to TypeScript with type annotations |
| packages/list-reusable-blocks/src/index.tsx | Migrated to TypeScript with proper event typing |
| packages/list-reusable-blocks/src/components/import-form/index.tsx | Migrated to TypeScript with React event types |
| packages/list-reusable-blocks/src/components/import-dropdown/index.tsx | Migrated to TypeScript with proper prop typing |
Comments suppressed due to low confidence (2)
packages/list-reusable-blocks/src/components/import-form/index.tsx:35
- Using
anytype for the parameter defeats the purpose of TypeScript migration. The parameter should be typed asReusableBlockbased on the return type ofimportReusableBlock.
packages/list-reusable-blocks/src/components/import-form/index.tsx:43 - Using
anytype for the errors parameter defeats the purpose of TypeScript migration. Consider defining a proper error type or usingErrortype.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| raw: string; | ||
| }; | ||
| wp_pattern_sync_status: string; | ||
| [ key: string ]: any; |
There was a problem hiding this comment.
Using index signatures [ key: string ]: any weakens type safety. Consider defining specific properties or using a more restrictive approach if these extra properties are truly needed.
| title: string; | ||
| content: string; | ||
| syncStatus?: string; | ||
| [ key: string ]: any; |
There was a problem hiding this comment.
Using index signatures [ key: string ]: any weakens type safety. Consider defining specific properties or using a more restrictive approach if these extra properties are truly needed.
| [ key: string ]: any; | |
| [ key: string ]: unknown; |
| rendered: string; | ||
| }; | ||
| status: string; | ||
| [ key: string ]: any; |
There was a problem hiding this comment.
Using index signatures [ key: string ]: any weakens type safety. Consider defining specific properties or using a more restrictive approach if these extra properties are truly needed.
| [ key: string ]: any; | |
| [ key: string ]: unknown; |
| onUpload: ( data: any ) => void; | ||
| } | ||
|
|
||
| interface ImportFormProps { | ||
| instanceId: string | number; | ||
| onUpload: ( reusableBlock: any ) => void; |
There was a problem hiding this comment.
The type definitions use any type which defeats the purpose of TypeScript migration. The onUpload callback should have a properly typed parameter instead of any.
| onUpload: ( data: any ) => void; | |
| } | |
| interface ImportFormProps { | |
| instanceId: string | number; | |
| onUpload: ( reusableBlock: any ) => void; | |
| onUpload: ( data: ReusableBlockData ) => void; | |
| } | |
| interface ImportFormProps { | |
| instanceId: string | number; | |
| onUpload: ( reusableBlock: ReusableBlockData ) => void; |
| onUpload: ( data: any ) => void; | ||
| } | ||
|
|
||
| interface ImportFormProps { | ||
| instanceId: string | number; | ||
| onUpload: ( reusableBlock: any ) => void; |
There was a problem hiding this comment.
The type definitions use any type which defeats the purpose of TypeScript migration. The onUpload callback should have a properly typed parameter instead of any.
| onUpload: ( data: any ) => void; | |
| } | |
| interface ImportFormProps { | |
| instanceId: string | number; | |
| onUpload: ( reusableBlock: any ) => void; | |
| onUpload: ( data: ReusableBlockData ) => void; | |
| } | |
| interface ImportFormProps { | |
| instanceId: string | number; | |
| onUpload: ( reusableBlock: ReusableBlockData ) => void; |
|
|
||
| interface PostType { | ||
| rest_base: string; | ||
| [ key: string ]: any; |
There was a problem hiding this comment.
Using index signatures [ key: string ]: any weakens type safety. Consider defining specific properties or using a more restrictive approach if these extra properties are truly needed.
What?
Part of: #67691
Migrating the
packages/list-reusable-blockspackage to TypeScript.Why?
Type safety.
Testing Instructions
Typecheck and unit tests.