我正在尝试键入我正在使用的 getter 组件 API。这个想法很简单,你给它一个fetcher
(promise返回函数)和一个params
数组(代表位置参数)作为props,它会把结果提供给渲染 Prop 。
type FunctionType<A extends any[] = any[], R = any> = (...args: A) => R
type Arguments<T> = T extends FunctionType<infer R, any> ? R : never
type PromiseReturnType<T> = T extends (...args: any[]) => Promise<infer R>
? R
: never
type ChildrenProps<F> = {
data: PromiseReturnType<F>
}
type Props<F> = {
fetcher: F
params: Arguments<F>
children: (props: ChildrenProps<F>) => React.ReactNode
}
class Fetch<F> extends React.Component<Props<F>> {
render() {
return null
}
}
const usage = (
<div>
<Fetch fetcher={getUser} params={[{ id: 5 }]}>
{({ data: user }) => (
<div>
{user.name} {user.email}
</div>
)}
</Fetch>
<Fetch fetcher={getCurrentUser} params={[]}> // <-- Redundant since getCurrentUser doesn't have any params
{({ data: user }) => (
<div>
{user.name} {user.email}
</div>
)}
</Fetch>
</div>
)
我想知道是否有一种方法可以说明如果 fetcher 函数不接受参数,则 params
属性不应该出现甚至是可选的?
我尝试按如下方式修改 Prop ,如果 fetcher
有 > 0 个参数,则只添加 params
字段
type Props<F> = {
fetcher: F
children: (props: ChildrenProps<F>) => React.ReactNode
} & (Arguments<F> extends [] // no arguments
? {} // no params
: { // same as before
params: Arguments<F>
})
这确实有效,但是现在在 render prop 中,data
字段不再正确输入。
<Fetch fetcher={getUser} params={[{ id: 5 }]}>
{({ data: user }) => ( // data: any, yet user: never...?
<div>
{user.name} {user.email} // name / email does not exist on type never
</div>
)}
</Fetch>
我不确定为什么会这样。
更新:
看起来修改后的 Props
实际上是基于以下示例工作的
type PropsWithGetUser = Props<typeof getUser>
type PropsWithGetCurrentUser = Props<typeof getCurrentUser>
const test1: PropsWithGetCurrentUser["children"] = input => input.data.email
const test2: PropsWithGetUser["children"] = input => input.data.email
可以正常工作。
PropsWithGetUser
和 PropsWithGetCurrentUser
的结果类型也推断如下,这似乎是正确的。
type PropsWithGetCurrentUser = {
fetcher: () => Promise<User>
children: (props: ChildrenProps<() => Promise<User>>) => React.ReactNode
}
type PropsWithGetUser = {
fetcher: (
{
id,
}: {
id: number
},
) => Promise<User>
children: (
props: ChildrenProps<
(
{
id,
}: {
id: number
},
) => Promise<User>
>,
) => React.ReactNode
} & {
params: [
{
id: number
}
]
}
这个问题可能与我在 React 中使用它的方式有关吗?
最佳答案
这在 TypeScript 3.0 中是可能的。
为了回答这个问题,我使用了 ArgumentTypes<F>
来自
this answer to: How to get argument types from function in Typescript .
方法如下:
Demo on TypeScript playground
type ArgumentTypes<F extends Function> =
F extends (...args: infer A) => any ? A : never;
type Props<F extends Function,
Params = ArgumentTypes<F>> =
Params extends { length: 0 } ?
{
fetcher: F;
} : {
fetcher: F;
params: Params
};
function runTest<F extends Function>(props: Props<F>) { }
function test0() { }
function test1(one: number) { }
runTest({
fetcher: test0
// , params: [] // Error
});
runTest({
fetcher: test1
// Comment it,
// or replace it with invalid args
// and see error
, params: [1]
});
关于reactjs - typescript react : Conditionally optional props based on the type of another prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52771626/