如何将 TypeScript 类型分配给参数函数？答案

【问题标题】：How to assign TypeScript type to function for parameters?如何将 TypeScript 类型分配给参数函数？
【发布时间】：2023-01-16 19:45:47
【问题描述】：

我定义了一个函数并使用 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>>;
};

现在我想将上述类型分配给函数，以便在函数定义中我不必将类型单独分配给参数。那可能吗？

【问题讨论】：

假设你真的不想改变API handleLogin 的参数将是元组;它们是位置性的，而不是对象。在这种情况下是的，有多种方式：tsplay.dev/mL56KW。

标签： typescript

【解决方案1】：

您必须采用一个对象参数。所以这应该有效，这就是通常的做法：

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>>;
};

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

【讨论】：

【解决方案2】：

您可以使用类型来描述：

一个参数。
整个函数（即它的所有参数和它的返回值）。

例如

type param1 = { foo: number };
type param2 = { bar: number };

const example = (first: param1, second: param2) => first.foo + second.bar;

或者

type ExampleFunction = (a: number, b: string) => string;
const example: ExampleFunction = (first: number, second: string) => first + second;

你无法描述只是单一类型中的多个参数。

你可以改变这个功能，所以它需要一参数是一个对象：

type  = { first: number; second: string; }
const example = ({first, second}: ExampleFunctionParams) => first + second;

【讨论】：