2 回答

TA貢獻1890條經驗 獲得超9個贊
我設法通過擴展T到然后定義保留傳入類型any[]的結果來弄清楚:validatedFields as T
const fieldValidator = <
T extends any[]
>(
fields: T,
): { validatedFields: T; errors: number } => {
try {
if (!fields || fields.length < 0) throw new Error("You must supply an array of fields!");
let errorCount: number = 0;
const validatedFields = fields.map(field => {
let errors = "";
const { type, value, required }: Pick<BaseFieldProps, "type" | "value" | "required"> = field;
if ((!value && required) || ((value && value.length < 0) && required)) {
errors = "Required.";
} else if (
type === "email" &&
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
) {
errors = "Invalid email.";
}
if (errors) errorCount += 1;
return { ...field, errors };
}) as T;
return { validatedFields, errors: errorCount };
} catch (err) {
throw String(err);
}
};

TA貢獻1820條經驗 獲得超2個贊
這是你要找的嗎?
type EssentialField = { type: string; value: string; required?: boolean }[];
打字稿使用鴨子打字。
type FieldProps = {
className?: string,
disabled?: boolean,
errors?: string,
placeholder?: string,
label: string,
// onChange?: (e: React.ChangeEvent<any>) => void;
name: string,
type: string,
readOnly?: boolean,
required: boolean,
value: string
styles?: object
};
const fields: FieldProps[] = [
{
type: "text",
label: "Username",
name: "username",
errors: "",
value: "",
required: true,
},
{
className: "example",
type: "password",
label:"Passowrd",
name: "password",
errors: "",
value: "",
required: true,
styles: { width: "150px" },
}
];
type EssentialField = { type: string; value: string; required?: boolean }[];
const fieldValidator = (
fields: EssentialField,
): { validatedFields: EssentialField; errors: number } => {
try {
if (!fields || fields.length < 0) throw new Error("You must supply an array of fields!");
let errorCount: number = 0;
const validatedFields = fields.map(field => {
let errors = "";
const { type, value, required } = field;
if ((!value && required) || ((value && value.length < 0) && required)) {
errors = "Required.";
} else if (
type === "email" &&
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(field.value)
) {
errors = "Invalid email.";
}
if (errors) errorCount += 1;
return { ...field, errors };
});
return { validatedFields, errors: errorCount };
} catch (err) {
throw String(err);
}
};
const { validatedFields, errors } = fieldValidator(fields)
console.log(validatedFields)
console.log(errors);
這消除了錯誤,沒有使用as any或其他技巧。
編輯:也許你想要這樣的東西:
type EssentialField = ({ type: string; value: string; required?: boolean }&{[key: string]: any})[];
// this allow you to do:
validatedFields[0].placeholder; // ...
// or
validatedFields[0].someUnknowProperty; // ...
這是將類型與關聯數組 ( {[key: string]: any})) 相交。通常這樣訪問associativeArray['someKey'],但也可以這樣使用associativeArray.someKey。
好處是您的 IDE 應該在自動完成中為您推薦type和字段。required
添加回答
舉報