原文鏈接：https://www.totaltypescript.com/dont-use-function-keyword-in-typescript

翻譯：一川

在Typescript中不應(yīng)該使用Function作為一個(gè)類(lèi)型，因?yàn)樗梢员硎救魏魏瘮?shù)。通常，我們期望的是更具體的類(lèi)型--例如指定參數(shù)的數(shù)量或函數(shù)返回的內(nèi)容。如果確實(shí)要表示可以接受任意數(shù)量的參數(shù)并返回任何類(lèi)型的函數(shù)，請(qǐng)使用 (...args: any[]) => any。

1、完整的解釋

假設(shè)您正在創(chuàng)建一個(gè)匯總對(duì)象數(shù)組的函數(shù)。這是一個(gè)，取自Excalidraw代碼庫(kù)：

const sum = <T>(
  array: readonly T[],
  mapper: (item: T) => number
): number =>
  array.reduce(
    (acc, item) => acc + mapper(item),
    0
  );

讓我們看一下類(lèi)型定義。此函數(shù)包含：

• 只讀數(shù)組：readonly T[]
• 映射器函數(shù)：(item: T) => number

并返回 number類(lèi)型。

在主體中，它調(diào)用array.reduce(func, 0)。這意味著在acc

對(duì)于數(shù)組的每個(gè)成員，它通過(guò)將acc和mapper(item)進(jìn)行相加，最終得到數(shù)組所有成員的總和。

2、什么可以用來(lái)作為函數(shù)聲明？

mapper函數(shù)是關(guān)鍵。我們來(lái)剝離一下來(lái)看看：

type Mapper<T> = (item: T) => number;

讓我們想象一個(gè)用例：

interface YouTubeVideo {
  name: string;
  views: number;
}
 
const youTubeVideos: YouTubeVideo[] = [
  {
    name: "My favorite cheese",
    views: 100,
  },
  {
    name: "My second favorite cheese (you won't believe it)",
    views: 67,
  },
];
 
const mapper: Mapper<YouTubeVideo> = (video) => {
  return video.views;
};
 
const result = sum(youTubeVideos, mapper); // 167

3、關(guān)于什么是函數(shù)？

我看到很多初學(xué)者開(kāi)發(fā)人員犯的一個(gè)大錯(cuò)誤，聲明一個(gè)類(lèi)似于 mapper和Function類(lèi)型 的函數(shù)：

const sum = <T>(
  array: readonly T[],
  mapper: Function
): number =>
  array.reduce(
    (acc, item) => acc + mapper(item),
    0
  );

這個(gè)關(guān)鍵字基本上代表“任何函數(shù)”。這意味著從技術(shù)上講可以 sum 接收任何函數(shù)。

當(dāng)在 中使用 sum 時(shí)，我們失去了很多 (item: T) => number 提供的安全性：

const result = sum(youTubeVideos, (item) => {
 // Parameter 'item' implicitly has an 'any' type.
  // We can return anything from here, not just
  // a number!
  return item.name;
});

TypeScript 現(xiàn)在無(wú)法推斷應(yīng)該是什么 item ，或者我們的mapper函數(shù)應(yīng)該返回什么。

這里的教訓(xùn)是“不要使用 Function ” - 總有一個(gè)更具體的選項(xiàng)可用。

4、表示“任何函數(shù)”

有時(shí)，期望在typescript中表示“任何函數(shù)”，為此，讓我們看一下 TypeScript 的一些內(nèi)置類(lèi)型Parameters 以及 ReturnType。

export type Parameters<
  T extends (...args: any) => any
> = T extends (...args: infer P) => any
  ? P
  : never;
 
export type ReturnType<
  T extends (...args: any) => any
> = T extends (...args: any) => infer R ? R : any;

您會(huì)注意到這兩種實(shí)用程序類(lèi)型使用相同的約束：(...args: any) => any 。

(...args: any)指定函數(shù)可以接受任意數(shù)量的參數(shù)，=> any 表示它可以返回任何內(nèi)容。

5、表示沒(méi)有參數(shù)的函數(shù)

要表達(dá)一個(gè)沒(méi)有參數(shù)的函數(shù)（但返回任何內(nèi)容），您需要使用() => any：

const wrapFuncWithNoArgs = (func: () => any) => {
  try {
    return func();
  } catch (e) {}
};
 
wrapFuncWithNoArgs((a: string) => {});

> Argument of type '(a: string) => void' is not assignable to parameter of type '() => any'.
> Target signature provides too few arguments. Expected 1 or more, but got 0.

6、總結(jié)

Function不應(yīng)該用作表示函數(shù)類(lèi)型。當(dāng)您只想指定參數(shù)而不指定返回類(lèi)型時(shí)，可以使用語(yǔ)法(a: string, b: number) => any。

記住，(...args: any) => any 可用于表示任何函數(shù)類(lèi)型。

此處，mapper 表示從對(duì)象中提取數(shù)字的函數(shù)。該 sum 函數(shù)的強(qiáng)大之處在于您可以丟棄大多數(shù)此類(lèi)聲明：

const youTubeVideos = [
  { name: "My favorite cheese", views: 100 },
  {
    name: "My second favorite cheese (you won't believe it)",
    views: 67,
  },
];
 
const result = sum(youTubeVideos, (video) => {
  return video.views;
}); // 167

事實(shí)上，我們已經(jīng)舍棄了所有類(lèi)型聲明，但 video仍舊被推斷為 { name: string; views: number } 。這是可能的，因?yàn)槲覀兊暮瘮?shù)定義的特殊性：(item: T) => number 。