快捷導(dǎo)航

Typescript中函數(shù)類型及示例詳解

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

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

常見寫法

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

函數(shù)名賦值：

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

可選參數(shù)

在JavaScript中，函數(shù)的每一個(gè)參數(shù)都是可選參數(shù)，而在TypeScript中，默認(rèn)情況下函數(shù)的每一個(gè)參數(shù)都是必選參數(shù)。在調(diào)用函數(shù)時(shí)，編譯器會(huì)檢查傳入實(shí)際參數(shù)的個(gè)數(shù)與函數(shù)定義中形式參數(shù)的個(gè)數(shù)是否相等。如果兩者不相等，則會(huì)產(chǎn)生編譯錯(cuò)誤。如果一個(gè)參數(shù)是可選參數(shù)，那么就需要在函數(shù)類型定義中明確指定。

在函數(shù)形式參數(shù)名后面添加一個(gè)問號(hào)“?”就可以將該參數(shù)聲明為可選參數(shù)。

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

函數(shù)的可選參數(shù)必須位于函數(shù)參數(shù)列表的末尾位置。在可選參數(shù)之后不允許再出現(xiàn)必選參數(shù)，否則將產(chǎn)生編譯錯(cuò)誤。

默認(rèn)參數(shù)

如果函數(shù)定義了默認(rèn)參數(shù)，并且默認(rèn)參數(shù)處于函數(shù)參數(shù)列表末尾的位置，那么該參數(shù)將被視為可選參數(shù)，在調(diào)用該函數(shù)時(shí)可以不傳入對(duì)應(yīng)的實(shí)際參數(shù)值。

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

同一個(gè)函數(shù)參數(shù)不允許同時(shí)聲明為可選參數(shù)和默認(rèn)參數(shù)，否則將產(chǎn)生編譯錯(cuò)誤

如果默認(rèn)參數(shù)之后存在必選參數(shù)，那么該默認(rèn)參數(shù)不是可選的參數(shù)，在調(diào)用函數(shù)時(shí)必須傳入對(duì)應(yīng)的實(shí)際參數(shù)值

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

剩余參數(shù)

必選參數(shù)、可選參數(shù) 和默認(rèn)參數(shù) 處理的都是單個(gè)參數(shù)，而剩余參數(shù)處理的則是多個(gè)參數(shù)。如果函數(shù)定義中聲明了剩余參數(shù)，那么在調(diào)用函數(shù)時(shí)會(huì)將多余的實(shí)際參數(shù)收集到剩余參數(shù)列表中。因此，剩余參數(shù)的類型應(yīng)該為數(shù)組類型或元組類型。

數(shù)組類型的剩余參數(shù)

最常見的做法是將剩余參數(shù)的類型聲明為數(shù)組類型。在調(diào)用定義了剩余參數(shù)的函數(shù)時(shí)，剩余參數(shù)可以接受零個(gè)或多個(gè)實(shí)際參數(shù)

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

元組類型的剩余參數(shù)

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

常規(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[]) { }

在了解了元組類型剩余參數(shù)的展開行為后，我們也就清楚了該如何傳入對(duì)應(yīng)的實(shí)際參數(shù)，如下所示：

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');

解構(gòu)參數(shù)

解構(gòu)還可以應(yīng)用在函數(shù)參數(shù)列表中。

未給解構(gòu)參數(shù)添加類型將會(huì)報(bào)錯(cuò)，如下：

可以使用類型注解為解構(gòu)參數(shù)添加類型信息

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

重載函數(shù)

參考：

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

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

構(gòu)造函數(shù)類型字面量

如JavaScript提供了一個(gè)內(nèi)置的Error構(gòu)造函數(shù)，它接受一個(gè)可選的message作為參數(shù)并返回新創(chuàng)建的Error對(duì)象

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

我們可以使用如下構(gòu)造函數(shù)類型字面量來表示Error構(gòu)造函數(shù)的類型。該構(gòu)造函數(shù)有一個(gè)可選參數(shù)message并返回Error類型的對(duì)象

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

構(gòu)造簽名

若在對(duì)象類型中定義了構(gòu)造簽名類型成員，那么我們稱該對(duì)象類型為構(gòu)造函數(shù)類型。構(gòu)造簽名的語法如下：

{
    new (ParameterList): Type
}

在該語法中，new是運(yùn)算符關(guān)鍵字，ParameterList表示構(gòu)造函數(shù)形式參數(shù)列表類型，Type表示構(gòu)造函數(shù)返回值類型，兩者都是可選的。

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

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

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

若在對(duì)象類型中同時(shí)定義調(diào)用簽名和構(gòu)造簽名，則能夠表示既可以被直接調(diào)用，又可以作為構(gòu)造函數(shù)使用的函數(shù)類型。示例如下：（報(bào)錯(cuò)了，不知道為什么）

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

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

您可能感興趣的文章: