如何在TypeScript中配置支持字符串与布尔值的Record类型

你不需要用Record<string, string>这种过于宽泛的类型，它会强制所有字段值都是字符串，这才导致你需要额外的类型转换。正确的做法是自定义表单值的具体类型，精准匹配你的表单字段：

1. 先定义表单值的类型，明确每个字段的类型：

type FormValues = {
  firstName: string;
  lastName: string;
  emailMarketing: boolean;
  smsMarketing: boolean;
  // 如果还有其他表单字段，也在这里补充对应类型
};

2. 在handleSubmit中使用这个自定义类型，替换原来的Record<string, string>：

const handleSubmit = async (values: FormValues) => {
    const checkoutDetails = await getCheckout({ checkoutId: checkoutId });
    if (checkoutDetails.errors) {
        setSubmitError(true);
        return;
    }

    const email = checkoutDetails.data.checkoutById.customer?.email;
    const customer = await addCustomer({
        firstName: values.firstName,
        lastName: values.lastName,
        checkoutId: checkoutId as string,
        customerId: null,
        email: email,
        ochId: null,
        // 这里无需任何类型转换，TypeScript会自动识别类型匹配
        emailMarketingConsent: values.emailMarketing,
        smsMarketingConsent: values.smsMarketing,
    });
};

3. 同步更新Formik的初始值，确保和自定义类型一致：

<Formik
  initialValues={{
    firstName: '',
    lastName: '',
    emailMarketing: false,
    smsMarketing: false,
  }}
  onSubmit={handleSubmit}
  // 其他Formik配置
>
  {/* 表单组件内容 */}
</Formik>

这种方式的优势在于，TypeScript能准确校验每个字段的类型，既避免了冗余的类型转换，也能在你写错字段名或类型不匹配时及时报错，提升代码安全性。

内容的提问来源于stack exchange，提问作者Zack Amin