TypeScript - 函式型別

TypeScript 中的函式型別允許我們定義函式的型別。

函式型別描述了函式的形狀，包括引數和返回值。

函式型別包括以下內容：

函式引數的型別
函式的返回值型別

為函式新增型別

為函式新增型別是指為其引數和返回值指定型別。類似於我們為變數新增型別的方式，我們也可以為函式引數和返回值新增型別註解，就像我們為變數定義型別一樣。

讓我們看看使用一個簡單的函式如何為函式新增型別：

function add (x: number, y: number): number {
   return x + y;
} 
let addNums = function (x: number, y: number): number {
   return x + y;
}

在第一個示例中，我們為引數 x 和 y 以及函式的返回值添加了型別。TypeScript 可以使用引數的型別推斷返回值型別。這意味著我們可以選擇省略返回值型別。

在第二個示例中，我們將一個函式賦值給變數 addNums。雖然我們沒有明確定義 addNums 的型別，但 TypeScript 可以推斷其型別。

現在讓我們檢查一下 TypeScript 編譯器如何推斷賦值給函式的變數的型別。

TypeScript 推斷變數的型別

在下面的示例中，我們將一個函式賦值給變數 add：

let add = function (a: number, b: number): number {
   return a + b;
}

TypeScript 編譯器將變數 add 的型別推斷為：

(a: number, b: number) => number

檢視下面的截圖，TypeScript 編輯器推斷變數 add 的型別。

這裡，“(a: number, b: number) => number”實際上是一個函式型別表示式。

函式型別表示式是宣告儲存函式的變數的便捷方式。

TypeScript 函式型別表示式

TypeScript 中的函式型別可以使用函式型別表示式來定義。函式型別表示式在語法上類似於箭頭函式。

語法

在函式型別表示式中，我們指定引數的型別和返回值型別。語法如下：

(para1: type1, para2: type2, ...) => returnType

其中：

(para1: type1, para2: type2, ...)：這定義了函式的引數及其型別。我們可以新增多個引數，用逗號分隔。
=>：胖箭頭將引數列表與返回值型別分隔開。
returnType：這是函式返回值的型別。

演示 TypeScript 中函式型別的示例：

(name: string) => void

此函式型別描述為一個函式，它帶有一個名為 name 的字串型別引數，並且沒有返回值（由 void 指示）。

(a: number, b: number) => number

在上面的函式型別中，它接受兩個名為 a 和 b 的數字型別引數，並返回一個數字型別的值。

示例

讓我們使用函式型別表示式宣告一個名為 addFun 的函式型別變數：

let addFun: (x: number, y: number) => number = function (x:number, y: number): number {
   return x + y
}
console.log(addFun(2, 3));

在上面的示例中，我們將一個函式新增到 addFun，該函式接受兩個數字作為引數並返回它們的和。型別註解 “(x: number, y: number) => number”闡明瞭此行為。

編譯此 TypeScript 程式碼後，它將生成以下 JavaScript 程式碼。

let addFun = function (x, y) {
    return x + y;
};
console.log(addFun(2, 3));

以上示例程式碼的輸出如下：

示例

讓我們來看另一個例子：

const greet: (name: string) => string = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("Shahid"));

在下面的示例中，我們定義了一個名為 greet 的常量，其型別為 (name: string) => string。此函式接受一個字串作為引數並返回一個字串。

上面的 TypeScript 程式碼將編譯為以下 JavaScript 程式碼。

const greet = (name) => {
    return `Hello, ${name}!`;
};
console.log(greet("Shahid"));

以上示例程式碼的輸出如下：

Hello, Shahid!

宣告函式型別變數

在 TypeScript 中，我們可以使用函式型別表示式宣告具有特定函式型別的變數。

讓我們宣告一個函式型別的變數：

let add: (a: number, b: number) => number

這聲明瞭一個函式型別的變數 add。該函式接受兩個數字作為引數並返回一個數字。

示例

在下面的示例中，我們使用函式表示式宣告函式型別的變數 greet。然後用一個函式賦值給變數，該函式接受一個字串型別的引數並返回一個字串。

let greet: (name: string) => string;
greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet('John'));

編譯後，它將生成以下 JavaScript 程式碼：

let greet;
greet = (name) => {
    return `Hello, ${name}!`;
};
console.log(greet('John'));

輸出如下：

Hello, John!

將函式引數指定為函式

我們可以指定函式型別的引數。在下面的示例中，引數 fn 指定為函式型別。它接受一個字串型別的引數，並且不返回任何值。

函式 greet 接受一個名為 fn 的引數，其型別為函式。

function greet (fn: (s: string) => void) {
   fn ("Welcome to Tutorials Point!")
}
function print (str: string) {
   console.log(str);
}
greet(print);

編譯後，它將生成以下 JavaScript 程式碼。

function greet(fn) {
    fn("Welcome to Tutorials Point!");
}
function print(str) {
    console.log(str);
}
greet(print);

以上示例程式碼的輸出如下：

Welcome to Tutorials Point!

使用類型別名錶示函式型別

我們可以建立一個類型別名來表示特定的函式型別並在程式碼中使用它：

type funcType = (s: string) => void;
function greet (fn: funcType) {
   fn ("Welcome to Tutorials Point!")
}
function print (str: string) {
   console.log(str);
}
greet(print);

在這裡，我們為函式型別 “(s: string) => void”定義了一個類型別名 funcType。接下來，我們在函式 greet 的定義中使用 funcType 作為引數型別。

編譯後，它將生成以下 JavaScript 程式碼。

function greet(fn) {
    fn("Welcome to Tutorials Point!");
}
function print(str) {
    console.log(str);
}
greet(print);

以上示例的輸出如下：

Welcome to Tutorials Point!

列印頁面