所以我試圖在 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,
};
};
正如您目前可能知道的那樣，我必須抑制 values[name] 上的型別錯誤，因為 Typescript 實際上并不知道名稱 Parameter 是否是我的 Values 物件中的有效鍵。My Values 物件是使用動態介面宣告的，該介面在方法呼叫時給出：
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) => {...}
uj5u.com熱心網友回復：
您可以keyof按如下方式使用型別運算子：
type UserFormDataEnum = keyof UserFormData
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464711.html
上一篇：React-js&Typescript&React-bootstrap型別
下一篇：通過自定義索引在表格上顯示資料