如何在 TypeScript 中将 useState 变量/setter 的类型传递给子组件

Question

我有这个使用 useState 的父组件：

export type Info = {
color: 'red' | 'yellow' | 'green' | 'blue'
isActive: boolean
}
const ParentComponent: React.FC =(props: any) => {
const [tab, setTab] = useState(0)
const [info, setInfo] = useState({
color: 'red',
isActive: false,
})
return (
<ChildComponent
tab={tab}
setTab={setTab}
info={info}
setInfo={setInfo}
/>
)
}

它呈现此子组件：

interface Props {
tab: number
setTab: (p: number) => void
info: Info
setInfo: (p: Info | ((p: Info) => any)) => void
}
const ChildComponent: React.FC<Props> = ({
tab,
setTab,
info,
setInfo,
}) => (
/* some JSX */
)

现在我必须手动键入所有 props forChildComponent，即使类型已经在ParentComponent中定义。有没有办法将tab、setTab、info和setInfo的类型从ParentComponent传递到ChildComponent？

Answer 1

>ChildComponent将无法直接从ParentComponent推断出键入。但是，要获得类似的结果，您可以做的是为ParentComponent和ChildComponent定义一个通用接口。

首先，为ParentComponent状态定义一个通用接口/类型。

export interface CommonState {
tab: number;
info: Info;
}

然后，我们在 ParentComponent 中声明useState钩子时使用该接口。

const [tab, setTab] = useState<CommonState['tab']>(0)
const [info, setInfo] = useState<CommonState['info']>({
color: 'red',
isActive: false,
});

然后，在您的ChildComponent上，它不会为子项声明全新的类型，而是可以从CommonState接口扩展，以便共享键入。

interface Props extends CommonState {
setTab: (p: number) => void
setInfo: (p: Info | ((p: Info) => any)) => void
}