在制作自己的useState钩子时，如何使用带有工厂的Typescript泛型作为属性?

Question

我正在尝试使用泛型来DRY类似的自定义钩子。我有一些传入的工厂函数。但是我得到一个输入错误。我将代码简化为一个最小的示例:

import { useState } from 'react';
type AType = {
a: string;
};
type BType = {
b: string;
};
type AData = {
data: AType;
};
type BData = {
data: BType;
};
function useAOrB<T extends AData | BData>(factory: () => T['data']): T | undefined {
const [value, setValue] = useState<T | undefined>(undefined);
const newData = factory();
const newValue = { data: newData };
setValue(newValue);
return value;
}
const aFactory = (): AType => ({ a: 'a' });
const bFactory = (): BType => ({ b: 'b' });
export const useA = useAOrB<AData>(aFactory);
export const useB = useAOrB<BData>(bFactory);

这给了我一个类型错误:

TS2345: Argument of type '{ data: T["data"]; }' is not assignable to parameter of type 'SetStateAction<T>'.
Type '{ data: T["data"]; }' is not assignable to type '(prevState: T) => T.
Type '{ data: T["data"]; }' provides no match for the signature '(prevState: T): T'.

我不明白为什么这不能通过类型检查，所有的东西都应该匹配。我该如何解决这个问题?

Answer 1

直接输入新值T:

const newValue = { data: newData } as T;//<- as T

操场上联系

Answer 2

相关内容

• 在typescript中，工厂函数返回的类不检查类型
• TypeScript 中的函数链工厂保留输入/输出类型
• 带有泛型的 typescript工厂模式
• TypeScript泛型工厂函数返回基于实例参数的类型而不重载
• 如何为抽象工厂模式构造 TypeScript 类型
• 没有构造函数的Typescript工厂
• 在TypeScript中用createSelector创建选择器工厂
• React/Typescript - 至少需要 '3' 个参数，但 JSX 工厂'React.createElement'最多提供 '2'。TS622
• 泛型应该是工厂方法中typescript的输出类
• TypeScript类工厂期望一个交集
• 在制作自己的useState钩子时，如何使用带有工厂的Typescript泛型作为属性?
• Sequelize TypeScript在模型工厂上调用findAll()时返回错误的项目数
• Typescript通用消息工厂
• Typescript中带有接口的通用工厂方法
• Typescript工厂中的不同接口
• 在typescript中从工厂函数返回已区分的并集
• Typescript如何导出从类工厂返回的类的类型
• TypeScript从工厂函数返回条件类型
• 使用方括号属性访问在工厂函数中定义setter会导致TypeScript错误
• 有没有一种方法可以使用键名和值类型在Typescript中编写getter工厂