泛型FormData提取遇类型错误：LoginForm不满足约束

错误原因分析 #

1. 索引签名不匹配：你定义的StringOrNumber接口带有[key: string]: string的索引签名，这要求所有字符串键对应的属性必须是string类型，且该类型支持任意字符串键。但LoginForm是显式定义的固定属性接口，没有这个索引签名，TypeScript会判定它不满足约束。
2. 类型范围不兼容：即使把LoginForm的字段改成string | number，StringOrNumber的索引值仍然是string，和string | number类型不匹配，因此报错依旧。

解决方案 #

1. 修改泛型约束，移除强制索引签名 #

将泛型约束调整为要求T的所有属性类型均为string或number，不需要强制支持任意字符串键。这样LoginForm这类固定属性的接口就能符合约束要求。

2. 修正FormData值的类型判断逻辑 #

FormData的条目值只能是string或File类型（表单提交的数值会自动转为字符串），不存在原生number类型。因此需要手动将数值格式的字符串转为number，同时过滤掉File类型的条目（如果你的场景不允许文件上传）。

修正后的代码 #

interface LoginForm {
    username: string;
    password: string;
}

// 修改泛型约束，要求T的所有属性都是string或number类型
const extractFormData = <T extends Record<keyof T, string | number>>(formData: FormData): T => {
    const data: Partial<T> = {};

    formData.forEach((value, key) => {
        // 过滤File类型的非法值
        if (value instanceof File) {
            throw new Error(`Unexpected File type for key "${key}": Expected string or number`);
        }

        let finalValue: string | number = value;
        // 将数值格式的字符串转为number类型
        const numValue = Number(value);
        if (!isNaN(numValue) && !isNaN(parseFloat(value))) {
            finalValue = numValue;
        }

        // 赋值到对应属性，确保键属于T的属性集合
        data[key as keyof T] = finalValue as T[keyof T];
        console.log(`${key}: ${finalValue} (${typeof finalValue})`);
    });

    // 校验所有必填字段是否已赋值
    const allRequiredKeys = Object.keys({} as T) as Array<keyof T>;
    for (const key of allRequiredKeys) {
        if (data[key] === undefined) {
            throw new Error(`Missing value for required field: ${key}`);
        }
    }

    return data as T;
};

// 调用示例
const formData = new FormData();
formData.append('username', 'testUser');
formData.append('password', '123456');

const loginForm = extractFormData<LoginForm>(formData);
console.log(loginForm); // { username: 'testUser', password: '123456' }

关键改动说明 #

• 泛型约束优化：使用Record<keyof T, string | number>确保T的每个属性都是string或number，无需强制索引签名，适配固定属性的接口。
• FormData值处理：增加File类型判断，避免非法值混入；同时自动识别数值格式的字符串并转为number，满足数值类型需求。
• 必填校验逻辑：通过Object.keys({} as T)获取T的所有属性，确保所有必填字段都已被正确赋值。

内容的提问来源于stack exchange，提问作者Soma Juice