腳本之家服務器常用軟件

快捷導航

Typescript中函數類型及示例詳解

更新時間：2023年01月05日 09:19:11 作者：疆~

這篇文章主要介紹了Typescript中函數類型,主要包括常見寫法、可選參數，默認參數及剩余參數，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

常見寫法

function add1(x: number, y: number) {
  return x + y;
}
 
function add1_1(x: number, y: number): number {
  return x + y;
}
 
const add2 = function (x: number, y: number): number {
  return x + y;
};
 
const add3 = (x: number, y: number): number => x + y;
const add3_1 = (x: number, y: number) => x + y;
 
 
const add4: { (x: number, y: number): number } = (x: number, y: number): number => x + y;
 
type TAdd = {
  (x: number, y: number): number
}
const add5: TAdd = (x: number, y: number): number => x + y;
const add5_1: TAdd = function (x: number, y: number): number {
  return x + y;
};
 
interface IAdd {
  (x: number, y: number): number
}
const add6: IAdd = (x: number, y: number): number => x + y;
const add6_1: TAdd = function (x: number, y: number): number {
  return x + y;
};

函數名賦值：

const abs0: (x: number) => number = Math.abs;
 
const abs1: { (x: number): number } = Math.abs;
 
type TAbs = {
  (x: number): number
}
const abs3: TAbs = Math.abs;
 
interface IAbs {
  (x: number): number
}
const abs4: IAbs = Math.abs;
 
console.log(abs0(23) === abs1(23));  // true
console.log(abs0(23) === abs3(23));  // true
console.log(abs0(23) === abs4(23));  // true

可選參數

在JavaScript中，函數的每一個參數都是可選參數，而在TypeScript中，默認情況下函數的每一個參數都是必選參數。在調用函數時，編譯器會檢查傳入實際參數的個數與函數定義中形式參數的個數是否相等。如果兩者不相等，則會產生編譯錯誤。如果一個參數是可選參數，那么就需要在函數類型定義中明確指定。

在函數形式參數名后面添加一個問號“?”就可以將該參數聲明為可選參數。

function add(x: number, y?: number, z?: number) {
  return x + (y ?? 0);
}

函數的可選參數必須位于函數參數列表的末尾位置。在可選參數之后不允許再出現必選參數，否則將產生編譯錯誤。

默認參數

如果函數定義了默認參數，并且默認參數處于函數參數列表末尾的位置，那么該參數將被視為可選參數，在調用該函數時可以不傳入對應的實際參數值。

function add(x: number, y: number = 0) {
  return x + y;
}
 
console.log(add(1));    // 1
console.log(add(1, 2));    // 3

同一個函數參數不允許同時聲明為可選參數和默認參數，否則將產生編譯錯誤

如果默認參數之后存在必選參數，那么該默認參數不是可選的參數，在調用函數時必須傳入對應的實際參數值

function add(x: number = 0, y: number) {
  return x + y;
}
 
add(1);            // 編譯錯誤
add(1, 2);         // 正確
add(undefined, 2); // 正確

剩余參數

必選參數、可選參數和默認參數處理的都是單個參數，而剩余參數處理的則是多個參數。如果函數定義中聲明了剩余參數，那么在調用函數時會將多余的實際參數收集到剩余參數列表中。因此，剩余參數的類型應該為數組類型或元組類型。

數組類型的剩余參數

最常見的做法是將剩余參數的類型聲明為數組類型。在調用定義了剩余參數的函數時，剩余參數可以接受零個或多個實際參數

function f(...args: number[]) {
  console.log("args:", args)
}
 
f();
f(0);
f(0, 1);

元組類型的剩余參數

如果剩余參數的類型為元組類型，那么編譯器會將剩余參數展開為獨立的形式參數聲明，主要包括以下幾種情況：

常規(guī)元組類型：

function f0(...args: [boolean, number]) { }
 
// 等同于：
function f1(args_0: boolean, args_1: number) { }

帶有可選元素的元組類型：

function f0(...args: [boolean, number]) { }
 
// 等同于：
function f1(args_0: boolean, args_1: number) { }

帶有剩余元素的元組類型：

function f0(...args: [boolean, ...string[]]) { }
 
// 等同于：
function f1(args_0: boolean, ...args_1: string[]) { }

在了解了元組類型剩余參數的展開行為后，我們也就清楚了該如何傳入對應的實際參數，如下所示：

function f0(...args: [boolean, number, string]) { }
f0(true, 0, '');
 
function f1(...args: [boolean, number, string?]) { }
f1(true, 0, '');
f1(true, 0);
 
function f2(...args: [boolean, number, ...string[]]) { }
f2(true, 0);
f2(true, 0, '');
f2(true, 0, '', 'coolcou');
 
function f3(...args: [boolean, number?, ...string[]]) { }
f3(true);
f3(true, 0);
f3(true, 0, '');
f3(true, 0, '', 'coolcou');

解構參數

解構還可以應用在函數參數列表中。

未給解構參數添加類型將會報錯，如下：

可以使用類型注解為解構參數添加類型信息

function f0([x, y]: [number, number]) { }
f0([0, 1]);
 
function f1({ x, y }: { x: number; y: number }) { }
f1({ x: 0, y: 1 });

重載函數

參考：

TypeScript重載函數，重載函數是指一個函數同時擁有多個同類的函數簽名。例如，一個函數擁有兩個及以上的調用簽名，或者一個構造函數擁有兩個及以上的構造簽名。當使用不同數量和類型的參數調用重載函數時，可以執(zhí)行不同的函數實現代碼。 TypeScript中的重載函數與其他編程語言中的重載函數略有不同。下例中定義了一個重載函數add。它接受兩個參數，若兩個參數的類型為number，則返回它們的和；若兩個參數的類型為數組，則返

http://www.dbjr.com.cn/article/231642.htm

構造函數類型字面量

如JavaScript提供了一個內置的Error構造函數，它接受一個可選的message作為參數并返回新創(chuàng)建的Error對象

const a = new Error();
const b = new Error('Error message.');

我們可以使用如下構造函數類型字面量來表示Error構造函數的類型。該構造函數有一個可選參數message并返回Error類型的對象

let ErrorConstructor: new (message?: string) => Error;

構造簽名

若在對象類型中定義了構造簽名類型成員，那么我們稱該對象類型為構造函數類型。構造簽名的語法如下：

{
    new (ParameterList): Type
}

在該語法中，new是運算符關鍵字，ParameterList表示構造函數形式參數列表類型，Type表示構造函數返回值類型，兩者都是可選的。

let Dog: { new(name: string): object };
 
Dog = class {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
};
 
let dog = new Dog('coolcou');

有一些函數被設計為既可以作為普通函數使用，同時又可以作為構造函數來使用。例如，JavaScript內置的“Number()”函數和“String()”函數等都屬于這類函數。示例如下：

const a: number = Number(1);
 
const b: Number = new Number(1);

若在對象類型中同時定義調用簽名和構造簽名，則能夠表示既可以被直接調用，又可以作為構造函數使用的函數類型。示例如下：（報錯了，不知道為什么）

declare const F: {
  new(x: number): Number;  // <- 構造簽名
  (x: number): number;      // <- 調用簽名
};
 
// 作為普通函數調用
const a: number = F(1);
 
// 作為構造函數調用
const b: Number = new F(1);

到此這篇關于Typescript中函數類型的文章就介紹到這了,更多相關Typescript中函數類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: