慎用！??！不要在Typescript中使用Function類型
原文鏈接：https://www.totaltypescript.com/dont-use-function-keyword-in-typescript
翻譯：一川
在Typescript中不應(yīng)該使用Function作為一個類型，因為它可以表示任何函數(shù)。通常，我們期望的是更具體的類型--例如指定參數(shù)的數(shù)量或函數(shù)返回的內(nèi)容。如果確實要表示可以接受任意數(shù)量的參數(shù)并返回任何類型的函數(shù)，請使用 (...args: any[]) => any。
1、完整的解釋
假設(shè)您正在創(chuàng)建一個匯總對象數(shù)組的函數(shù)。這是一個，取自Excalidraw代碼庫：
const sum = <T>(
array: readonly T[],
mapper: (item: T) => number
): number =>
array.reduce(
(acc, item) => acc + mapper(item),
0
);讓我們看一下類型定義。此函數(shù)包含：
- 只讀數(shù)組：readonly T[]
- 映射器函數(shù)：(item: T) => number
并返回 number類型。
在主體中，它調(diào)用array.reduce(func, 0)。這意味著在acc
對于數(shù)組的每個成員，它通過將acc和mapper(item)進行相加，最終得到數(shù)組所有成員的總和。
2、什么可以用來作為函數(shù)聲明？
mapper函數(shù)是關(guān)鍵。我們來剝離一下來看看：
type Mapper<T> = (item: T) => number;讓我們想象一個用例：
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); // 1673、關(guān)于什么是函數(shù)？
我看到很多初學(xué)者開發(fā)人員犯的一個大錯誤，聲明一個類似于 mapper和Function類型 的函數(shù)：
const sum = <T>(
array: readonly T[],
mapper: Function
): number =>
array.reduce(
(acc, item) => acc + mapper(item),
0
);這個關(guān)鍵字基本上代表“任何函數(shù)”。這意味著從技術(shù)上講可以 sum 接收任何函數(shù)。
當(dāng)在 中使用 sum 時，我們失去了很多 (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)在無法推斷應(yīng)該是什么 item ，或者我們的mapper函數(shù)應(yīng)該返回什么。
這里的教訓(xùn)是“不要使用 Function ” - 總有一個更具體的選項可用。
4、表示“任何函數(shù)”
有時，期望在typescript中表示“任何函數(shù)”，為此，讓我們看一下 TypeScript 的一些內(nè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;您會注意到這兩種實用程序類型使用相同的約束：(...args: any) => any 。
(...args: any)指定函數(shù)可以接受任意數(shù)量的參數(shù)，=> any 表示它可以返回任何內(nèi)容。
5、表示沒有參數(shù)的函數(shù)
要表達一個沒有參數(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ù)類型。當(dāng)您只想指定參數(shù)而不指定返回類型時，可以使用語法(a: string, b: number) => any。
記住，(...args: any) => any 可用于表示任何函數(shù)類型。
此處，mapper 表示從對象中提取數(shù)字的函數(shù)。該 sum 函數(shù)的強大之處在于您可以丟棄大多數(shù)此類聲明：
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事實上，我們已經(jīng)舍棄了所有類型聲明，但 video仍舊被推斷為 { name: string; views: number } 。這是可能的，因為我們的函數(shù)定義的特殊性：(item: T) => number 。
