React Router v6.14.1中Form组件action的request参数正确类型

在使用TypeScript开发应用、学习React Router v6.14.1时，用react-router-dom的<Form />组件构建表单，action函数的request参数目前只能设为any类型，现有代码如下：

export const createTruck = async ({ request }: any) => {
  const data = await request.formData()

  const submission = {
    make: data.get('make'),
    model: data.get('model'),
    plate: data.get('plate'),
    year: data.get('year'),
    km: data.get('km'),
    buy_date: data.get('buy_date'),
    last_maint: data.get('last_maint'),
    next_maint_d: data.get('next_maint_d'),
    next_maint_km: data.get('next_maint_km'),
  }

  console.log(submission)

  return redirect('/trucks')
}

正确类型定义方案 #

你可以从react-router-dom导入ActionFunctionArgs类型来约束action函数的参数：

1. 先导入所需类型：

import { ActionFunctionArgs, redirect } from 'react-router-dom';

2. 用ActionFunctionArgs替换any：

export const createTruck = async ({ request }: ActionFunctionArgs) => {
  const data = await request.formData()

  const submission = {
    make: data.get('make'),
    model: data.get('model'),
    plate: data.get('plate'),
    year: data.get('year'),
    km: data.get('km'),
    buy_date: data.get('buy_date'),
    last_maint: data.get('last_maint'),
    next_maint_d: data.get('next_maint_d'),
    next_maint_km: data.get('next_maint_km'),
  }

  console.log(submission)

  return redirect('/trucks')
}

ActionFunctionArgs类型内置了request的正确类型（与浏览器原生Request接口一致），能提供完整的类型提示，无需再用any规避类型检查。

如果想进一步明确表单数据的类型，可以给formData的返回值做类型断言：

interface TruckFormData {
  make: string;
  model: string;
  plate: string;
  year: string;
  km: string;
  buy_date: string;
  last_maint: string;
  next_maint_d: string;
  next_maint_km: string;
}

const submission = {
  make: data.get('make') as TruckFormData['make'],
  model: data.get('model') as TruckFormData['model'],
  plate: data.get('plate') as TruckFormData['plate'],
  year: data.get('year') as TruckFormData['year'],
  km: data.get('km') as TruckFormData['km'],
  buy_date: data.get('buy_date') as TruckFormData['buy_date'],
  last_maint: data.get('last_maint') as TruckFormData['last_maint'],
  next_maint_d: data.get('next_maint_d') as TruckFormData['next_maint_d'],
  next_maint_km: data.get('next_maint_km') as TruckFormData['next_maint_km'],
}

这样能让表单数据的类型更明确，避免后续使用时出现类型不确定的问题。

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