如何为TypeScript函数参数统一分配自定义类型？

我已经给一个函数的每个参数单独指定了TypeScript类型：

const handleLogin = async (
    e: React.FormEvent<EventTarget>,
    navigate: NavigateFunction,
    link: string,
    data: LoginDataType,
    setError: React.Dispatch<React.SetStateAction<string>>,
    setLoading: React.Dispatch<React.SetStateAction<boolean>>
) => {
 
    // function code
  
}

现在我定义了这个TypeScript类型：

export type HandleLoginParamTypes = {
    e: React.FormEvent<EventTarget>;
    navigate: NavigateFunction;
    link: string;
    data: LoginDataType;
    setError: React.Dispatch<React.SetStateAction<string>>;
    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
};

我希望把这个类型直接分配给函数，不用再逐个给参数指定类型，这是否可行？

当然可以做到，这里提供两种常用的实现方案：

方案一：改用对象解构参数匹配类型 #

把原来的独立参数改成一个对象参数，直接用HandleLoginParamTypes标注这个对象的类型，就能一次性完成所有参数的类型绑定：

const handleLogin = async ({ e, navigate, link, data, setError, setLoading }: HandleLoginParamTypes) => {
    // function code
};

这种方式的好处是直接复用你已经定义好的对象类型，代码结构更简洁，也方便后续维护参数类型。

方案二：定义函数签名类型指定整体函数 #

如果想保留原有的独立参数写法，可以先定义一个包含完整函数签名的类型，再把handleLogin指定为这个类型：

方式1：直接定义函数签名 #

export type HandleLoginFunction = (
    e: React.FormEvent<EventTarget>,
    navigate: NavigateFunction,
    link: string,
    data: LoginDataType,
    setError: React.Dispatch<React.SetStateAction<string>>,
    setLoading: React.Dispatch<React.SetStateAction<boolean>>
) => Promise<void>;

方式2：利用已有类型简化定义 #

借助TypeScript的工具类型，基于你已有的HandleLoginParamTypes来生成参数列表，避免重复编写：

// 从对象类型中提取参数元组
type HandleLoginParams = [
    HandleLoginParamTypes['e'],
    HandleLoginParamTypes['navigate'],
    HandleLoginParamTypes['link'],
    HandleLoginParamTypes['data'],
    HandleLoginParamTypes['setError'],
    HandleLoginParamTypes['setLoading']
];
export type HandleLoginFunction = (...args: HandleLoginParams) => Promise<void>;

然后给函数指定类型：

const handleLogin: HandleLoginFunction = async (e, navigate, link, data, setError, setLoading) => {
    // function code
};

这种方案适合需要保留原参数顺序和独立传参习惯的场景，同样能避免重复定义参数类型。

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