Typescript用data类型一个对象键

Question

我有这个代码如何动态类型的onHandlerData函数的数据参数?

export interface UserFormDto {
credentials: UserCredentialsDto | null;
details: UserDetailsDto | null;
address: UserAddressDto | null;
}
const [data, setData] = useState<UserFormDto>({
credentials: null,
details: null,
address: null,
});
const onHandlerData = (
type: keyof UserFormDto,
data: UserFormDto["credentials"]
) => {
setData((data) => {
return { ...data, [type]: data };
});
};

Answer 1

首先，onHandlerData(不仅仅是它的类型)的实现有一个问题，您在setData回调中使用data参数阴影data参数。你需要一个不同的名字

一旦你有了这个，你可以使用一个泛型类型参数来处理确保type和data一起工作，像这样:

const onHandlerData = <KeyType extends keyof UserFormDto,>(
//                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
type: KeyType,
//        ^^^^^^^
data: UserFormDto[KeyType]
//        ^^^^^^^^^^^^^^^^^^^^
) => {
setData((current) => {
return { ...current, [type]: data };
});
};

操场上联系

(在泛型类型参数定义之后的,是这样的，以便它与JSX一起工作。它告诉解析器<...>不是元素定义)

Answer 2

我能想到的一种实现方法是使用generic，像这样:

const onHandlerData = <T extends keyof UserFormDTo>(
type: T,
data: UserFormDto[T]
) => {
setData((oldData) => {
return { ...oldData, [type]: data };
});
};