如何将TypeScript类型赋给函数的参数?

oyjwcjzk  于 2023-01-18  发布在  TypeScript
关注(0)|答案(2)|浏览(143)

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

现在我想把上面的类型赋给函数,这样在函数定义中我就不必把类型分别赋给参数了,这可能吗?

yc0p9oo0

yc0p9oo01#

可以使用类型来描述:

  • 一个参数。
  • 整个函数(即它的所有参数和返回值)。

例如:

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

owfi6suc2#

你需要一个参数,一个对象,这应该可以,这是通常的做法:

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
  
}

像这样,您还可以享受命名参数的好处:

await handleLogin({
  e: //...,
  navigate: //...,
  link: //...,
  data: //...,
  setError: //...,
  setLoading: //...,
});

相关问题