我可以动态地从另一个接口生成一个接口吗?

Question

所以我试图在React中构建一个自定义useForm钩子。我想有一个函数，它给我的输入所有的道具，它包含在钩子中，目前它看起来像这样:

const getInputProps = (name: string) => {
return {
name: name,
//@ts-ignore
value: values[name],
//@ts-ignore
errorMessages: errorMessages[name],
onChange: onChange,
setValue: (value: string) => {
setValues({ ...values, [name]: value });
},
showErrorMessages: showErrorMessages,
};
};

你可能会说，目前我必须抑制value [name]的类型错误，因为Typescript实际上并不知道name参数是否是我的values对象中的一个有效的键。My Values Object使用动态接口声明，该接口在方法调用时给出:

export function useForm<InitialState>(
initialState: InitialState,
handleSubmit: (e: SyntheticEvent) => void,
validators: { [key: string]: Validator<any>[] }
) {
const [values, setValues] = useState<InitialState>(initialState);

现在我想知道是否有一种方法可以让我从InitialState接口的键生成类型或接口。例子:

interface UserFormData {
value1:string;
value2:string;
}

将被映射到

type UserFormDataEnum = "value1" | "value2"

然后我可以将其传递给getInputProps函数:

const getInputProps = (name:UserFormDataEnum) => {...}

Answer 1

您可以使用keyof类型操作符如下:

type UserFormDataEnum = keyof UserFormData