如何解决TypeScript & React:可重用的通用操作/组件
我将 TypeScript 与 React 和 useReducer 结合使用,我想以类型安全的方式定义 reducer 操作。
最简单的 Action 近似是:
type Action = {name : string,payload : any}
更精确的版本需要联合类型:
type Action =
| {name : "setColumns",payload: string[]}
| {name : "toggleColumn",payload: string}
...
到目前为止一切顺利。然后我想定义依赖于 Action 或其派生 React.Dispatch<Action>
的组件。有两种方法可以做到这一点:
- 接受(多个)泛型
- 定义更广泛的类型
方法 1) 在理论上更加类型安全,但在实践中更加冗长和复杂。 方法 2) 可以很好地平衡安全性和复杂性。
两种样式的 Pager
组件 props 示例:
// 1)
export type PagerProps1 <Page extends number,Limit extends number> = {
page : Page // -- narrower types
limit : Limit
pagesTotal : number
}
// 2)
export type PagerProps2 = {
page : number // -- wider types
limit : number
pagesTotal : number
}
^ 现在可以定义 Pager2
并将其移动到库中,而不依赖于特定于应用程序的 Page
和 Limit
。并且没有泛型。这是提供必要上下文的介绍。
问题来自于 React.Dispatch
。这是在存在更精确版本的地方模拟通用调度重用的测试用例:
type Action =
| {name : "setColumn"}
| {name : "toggleColumn"}
type OpaqueAction1 = {name : any} // will work
type OpaqueAction2 = {name : string} // will not work
type Dispatch = React.Dispatch<Action>
type OpaqueDispatch1 = React.Dispatch<OpaqueAction1> // will work
type OpaqueDispatch2 = React.Dispatch<OpaqueAction2> // will not work
export const DemoComponent = () => {
const dispatch = React.useReducer(() => null,null)[1]
const d0 : Dispatch = dispatch
const d1 : OpaqueDispatch1 = d0 // ok
const d2 : OpaqueDispatch2 = d0 // type error
}
错误如下:
TS2322: Type 'Dispatch<Action>' is not assignable to type 'Dispatch<OpaqueAction2>'.
Type 'OpaqueAction2' is not assignable to type 'Action'.
Type 'OpaqueAction2' is not assignable to type '{ name: "toggleColumn"; }'.
Types of property 'name' are incompatible.
Type 'string' is not assignable to type '"toggleColumn"'.
^ 但在上面的代码中,我们实际上将 "toggleColumn"
分配给了 string
。出了点问题。
这是沙箱:https://codesandbox.io/s/crazy-butterfly-yldoq?file=/src/App.tsx:504-544
解决方法
您不是将 "toggleColumn"
分配给 string
,而是将 Dispatch<Action>
分配给 Dispatch<OpaqueAction2>
。
问题在于,Dispatch<Action>
是一个函数,它只能处理带有 name
属性的参数"toggleColumn"
,而 Dispatch<OpaqueAction2>
是一个可以处理带有属性的参数的函数任何 name
类型的 string
属性。该赋值意味着 Dispatch<Action>
也应该能够处理任何 string
类型,但它不能。
函数 (...args: T) => R
可分配给 (...args: U) => R
当且仅当 U
可分配给 T
。这就是错误消息的前两行颠倒类型顺序的原因:
Type 'Dispatch<Action>' is not assignable to type 'Dispatch<OpaqueAction2>'.
Type 'OpaqueAction2' is not assignable to type 'Action'.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。