如何在React表单中无需感叹号运算符将选中项转为Payload对象？

我用React开发了一个带多个字段和「发送」按钮的表单，按钮仅在所有必填字段填写完成后才启用。点击「发送」后需要将输入信息转换为新的Payload对象发送至后端。

问题在于，输入属性在用户未输入时可能为null，但点击「发送」时我能确定这些属性已非null——因为按钮只有在输入完成后才会启用。但TypeScript不知道我已经验证过必填项，所以转换SelectedOptions为Payload时不得不使用感叹号运算符，还会触发ESLint警告。

注：原代码中validateOptions函数存在笔误，应该是options.userInfo.name而非options.name，以下示例已修正该问题：

interface SelectedOptions {
  userInfo: {
    name: string | null;
    age: number | null
  };
  address: string | null;
}

interface Payload {
  name: string;
  age: number;
  address: string | null;
}

const validateOptions = (options: SelectedOptions) => {
  return options.userInfo.name && options.userInfo.age;
}

const transformOptionsIntoPayload = (options: SelectedOptions) => {
  // 调用这个方法时，我确定options的所有必填字段都已填写
  const payload: Payload = {
    name: options.userInfo.name!, // 感叹号运算符
    age: options.userInfo.age!, // 感叹号运算符
    address: options.address
  }
  return payload;
}

是否有更好的处理方式？还是应该忽略ESLint关于感叹号运算符的警告？

1. 类型守卫函数：让TypeScript自动识别验证结果 #

把validateOptions改成类型守卫函数，这样TypeScript会在验证通过后自动将SelectedOptions的必填字段类型收窄为非null，不需要手动加感叹号：

// 类型守卫：返回true时，TypeScript认定参数的必填字段已非null
const validateOptions = (options: SelectedOptions): options is SelectedOptions & {
  userInfo: {
    name: string;
    age: number;
  }
} => {
  // 更严谨的验证：确保name是非空字符串，age是有效数字
  return typeof options.userInfo.name === 'string' && options.userInfo.name.trim() !== ''
    && typeof options.userInfo.age === 'number' && !isNaN(options.userInfo.age);
}

// 提交时先验证再转换
const handleSubmit = (options: SelectedOptions) => {
  if (!validateOptions(options)) {
    // 兜底处理：理论上按钮禁用后不会走到这里，可抛出错误或提示用户
    return;
  }
  // 此时TypeScript自动推断userInfo.name和age非null
  const payload: Payload = {
    name: options.userInfo.name,
    age: options.userInfo.age,
    address: options.address
  };
  // 发送payload到后端
};

2. 断言函数：兜底验证+类型推断 #

如果想确保transformOptionsIntoPayload被错误调用时能及时发现问题，可以用断言函数——既满足TypeScript的类型推断，又能在异常情况（比如按钮启用逻辑出错）下抛出错误：

// 断言函数：验证不通过时抛出错误，通过后TypeScript自动收窄类型
function assertValidOptions(options: SelectedOptions): asserts options is SelectedOptions & {
  userInfo: {
    name: string;
    age: number;
  }
} {
  if (typeof options.userInfo.name !== 'string' || options.userInfo.name.trim() === '' ||
      typeof options.userInfo.age !== 'number' || isNaN(options.userInfo.age)) {
    throw new Error('必填字段未填写完整');
  }
}

const transformOptionsIntoPayload = (options: SelectedOptions): Payload => {
  assertValidOptions(options);
  // 无需感叹号，TypeScript已知道必填字段非null
  return {
    name: options.userInfo.name,
    age: options.userInfo.age,
    address: options.address
  };
}

3. 重构状态类型：从源头区分「未填写」和「已完成」 #

优化类型定义，用不同的接口区分表单的初始状态和已完成状态，避免null带来的类型歧义：

// 未填写状态：必填字段为null
interface UnfilledFormState {
  userInfo: {
    name: null;
    age: null;
  };
  address: string | null;
}

// 已完成状态：必填字段为非null
interface FilledFormState {
  userInfo: {
    name: string;
    age: number;
  };
  address: string | null;
}

// 表单状态是两种类型的联合
type FormState = UnfilledFormState | FilledFormState;

// 验证函数将状态收窄为已完成类型
const isFormFilled = (state: FormState): state is FilledFormState => {
  return typeof state.userInfo.name === 'string' && state.userInfo.name.trim() !== ''
    && typeof state.userInfo.age === 'number' && !isNaN(state.userInfo.age);
}

// 转换函数只接受已完成状态，自然不需要感叹号
const transformToPayload = (state: FilledFormState): Payload => {
  return {
    name: state.userInfo.name,
    age: state.userInfo.age,
    address: state.address
  };
}

不推荐忽略ESLint警告 #

感叹号运算符会跳过TypeScript的空值检查，一旦按钮的启用逻辑出现漏洞（比如验证函数写错），就可能导致null被传入后端，引发服务端错误。上面的方案既能保证类型安全，又能避免ESLint警告，比忽略警告更可靠。

内容的提问来源于stack exchange，提问作者Gustavo Cesário