TypeScript 系列:类型更安全的 antd `useForm`

🤔 问题

今天遇到一个 bug,大概是这样一个 Antd 的搜索表单,点击重置其他下拉框都可以清空,唯独"请选择用户"无法清空。

Bug 代码如下:

tsx 复制代码
const handleReset = () => {
    history.push({ search: '' });

    form.setFieldValue('modelId', undefined);
    form.setFieldValue('useId', undefined);
    form.setFieldValue('apiKeyId', undefined);

    handleSearch(form.getFieldsValue());
};

🕵️‍♂️ 调试了较长时间,发现是拼写问题 userId ✅ 而非 useId ❌!归根结底是 form.setFieldValue 类型不够安全。为了避免将来再出现类似"低级"问题,重写该函数。

🔧 解决

tsx 复制代码
// hooks/useForm.ts
import { Form, FormInstance } from 'antd';

export function useForm<Values>() {
  const [form] = Form.useForm<Values>();

  return {
    ...form,
    setFieldValue<K extends keyof Values>(name: K, value: Values[K]) {
      return form.setFieldValue(name as string, value);
    },
  };
}

useFormsetFieldValue 的入参做了强类型校验,如果传入非预期字段将报错,从而规避书写错误。

使用:

假设我们表单类型如下

ts 复制代码
type IFormValues = {
  userId?: number;
  apiKeyId?: number;
  modelId?: number;
};

调用处只需修改一行换成我们实现的 useForm 即可。

tsx 复制代码
// const [form] = Form.useForm<IFormValues>();
const form = useForm<IFormValues>();

现在我们试一试:

ts 复制代码
form.setFieldValue('useId', undefined);

类型""useId""的参数不能赋给类型"keyof IFormValues"的参数。ts(2345)

🌌 总结

修复 bug 不是终点,我们需要想着如何通过工具避免才是正道。TS 正是最好用工具之一。

相关推荐
张志鹏PHP全栈11 小时前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
Toomey12 小时前
别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势
typescript
郑板桥3013 小时前
ts学习1
学习·typescript
前端拿破轮16 小时前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手1 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈1 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇2 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈2 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚2 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
安替-AnTi2 天前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林