我有一个react hook,它根据用户提供的类型 prop 返回过滤器。
interface Props {
type: 'product' | 'content';
}
function useFilterSelector(props: Props) {
const { t } = useClientTranslation();
const queryClient = useQueryClient();
const [filterSelector] = useState(() => {
switch (props.type) {
case 'product':
return new ProductFilter(t, queryClient);
case 'content':
return new ContentFilter(t, queryClient);
}
});
return { filterSelector };
}
这个钩子工作得很好,但问题是我不能得到严格的类型推断。例如,如果开发人员为参数提供“product”
const { filterSelector } = useFilterSelector({ type : "product"})
推断的类型应为
type = ProductFilter
但我得到了
type = ProductFilter | ContentFilter
我试过这个
function useFilterSelector(props: Props) {
const { t } = useClientTranslation();
type FilterType = (typeof props)['type'];
type FilterSelector = FilterType extends 'product'
? ProductFilter
: FilterType extends 'content'
? ContentFilter
: unknown;
const queryClient = useQueryClient();
const [filterSelector] = useState<FilterSelector>(() => {
switch (props.type) {
case 'product':
return new ProductFilter(t, queryClient);
case 'content':
return new ContentFilter(t, queryClient);
}
});
return { filterSelector };
}
但类型被推断为未知
这个怎么解决?
2条答案
按热度按时间wwtsj6pe1#
您可以使用基于
props.type
类型的条件返回类型Playground link
bweufnob2#
如何使用类型Assert,以便typescript使用该类型而不是unknown?