TypeScript 初識 - 函數(shù)

ARGUS 發(fā)布于2019-08-26 11:00 / 1739人閱讀

摘要：函數(shù)類型函數(shù)返回值類型我們可以給每個參數(shù)添加類型之后再為函數(shù)本身添加返回值類型。能夠根據(jù)返回語句自動推斷出返回值類型，所以通?？梢允÷运涿瘮?shù)完整函數(shù)類型完整的函數(shù)類型包含兩部分參數(shù)類型和返回值類型。

函數(shù)是 JavaScript 的第一等公民，函數(shù)在 JavaScript 中可以實現(xiàn)抽象層、模擬類、信息隱藏和模塊等等。TypeScript 在一定基礎(chǔ)上擴(kuò)展了函數(shù)的功能。

函數(shù)類型 函數(shù)返回值類型

我們可以給每個參數(shù)添加類型之后再為函數(shù)本身添加返回值類型。TypeScript 能夠根據(jù)返回語句自動推斷出返回值類型，所以通?？梢允÷运?/p>

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

// 匿名函數(shù)
let myAdd = function(x: number, y: number): number {
    return x + y;
};

完整函數(shù)類型

完整的函數(shù)類型包含兩部分：參數(shù)類型和返回值類型。

// (x: number, y: number) => number 為函數(shù)的類型
// 其中的 x、y 只是為了增加可讀性，只要參數(shù)類型是匹配的，無需匹配參數(shù)名是否一樣
// 參數(shù)類型和返回值類型之間使用 => 符號
let myAdd: (x: number, y: number) => number = function(
    x: number,
    y: number
): number {
    return x + y;
};

返回值類型是函數(shù)類型的必要部分，函數(shù)沒有返回值的情況，也必須要指定返回值為 void。

推斷類型

函數(shù)定義的時候，如果賦值語句只有一邊指定了語句，TypeScript 編譯器會自動識別出類型：

// myAdd has the full function type
let myAdd = function(x: number, y: number): number {
    return x + y;
};

// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number = function(x, y) {
    return x + y;
};

這叫做“按上下文歸類”，是類型推論的一種。

可選參數(shù)和默認(rèn)參數(shù)

默認(rèn)情況下，TypeScript 會判斷傳入函數(shù)的參數(shù)和函數(shù)定義的參數(shù)是否一致，個數(shù)、類型都會進(jìn)行判斷。

let myAdd: (baseValue: number, increment: number) => number = function(x, y) {
    return x + y;
};

// An argument for "increment" was not provided.
myAdd(1);
myAdd(1, 2);
// 應(yīng)有 2 個參數(shù)，但獲得 3 個。
myAdd(1, 2, 3);

在 TypeScript 中，可以加上 ? 實現(xiàn)可選參數(shù)的功能，可選參數(shù)必須放在必需參數(shù)的前面：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

// Bob
let result1 = buildName("Bob");
// 應(yīng)有 1-2 個參數(shù)，但獲得 3 個。
let result2 = buildName("Bob", "Adams", "Sr.");
// Bob Adams
let result3 = buildName("Bob", "Adams");

在定義函數(shù)的時候，可以給形參進(jìn)行賦值作為默認(rèn)值，僅當(dāng)不傳值或傳入的值為 undefined 時，函數(shù)會使用這個默認(rèn)值：

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

// Bob Smith
let result1 = buildName("Bob");
// Bob Smith
let result2 = buildName("Bob", undefined);

函數(shù)的默認(rèn)值不需要放到必需參數(shù)的后面，但是，放在必需參數(shù)前面的默認(rèn)值，只有顯式地傳遞 undefined 時會生效。

剩余參數(shù)

在 JavaScript 中，可以使用 arguments 訪問傳入的所有參數(shù)；在 TypeScript 中同樣可以使用。

剩余參數(shù)將不定數(shù)量的參數(shù)當(dāng)作一個數(shù)組，表示 0 或多個參數(shù)：

// ... 后面加上一個數(shù)組，這就是剩余參數(shù)
function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

// Bob
console.log(buildName("Bob"));
// Bob Smith Steven
console.log(buildName("Bob", "Smith", "Steven"));

言下之意，剩余參數(shù)必須是最后的參數(shù)，不能夠放到其他參數(shù)的前面。

重載

重載允許一個函數(shù)接受不同數(shù)量或類型的參數(shù)時，作出不同的處理。在 JavaScript 中，一般是判斷傳入?yún)?shù)的個數(shù)或類型等等情況實現(xiàn)重載。

以 TypeScript 中聯(lián)合類型的特性，實現(xiàn) JavaScript 版本的重載：

function reverse(x: number | string): number | string {
    if (typeof x === "number") {
        return Number(
            x
                .toString()
                .split("")
                .reverse()
                .join("")
        );
    }
    return x
        .split("")
        .reverse()
        .join("");
}

// function reverse(x: string | number): string | number
console.log(reverse(123));
console.log(reverse("123"));

上面是是實現(xiàn)重載的一個方法，但是這樣實現(xiàn)重載更難懂，不能精確表達(dá)。TypeScript 提供更能精確表達(dá)的重載方法：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === "number") {
        return Number(
            x
                .toString()
                .split("")
                .reverse()
                .join("")
        );
    }
    return x
        .split("")
        .reverse()
        .join("");
}

// function reverse(x: number): number (+1 overload)
console.log(reverse(123));
// function reverse(x: string): string (+1 overload)
console.log(reverse("123"));

注意，TypeScript 會優(yōu)先從最前面的函數(shù)定義開始匹配，所以多個函數(shù)定義如果有包含關(guān)系，需要優(yōu)先把精確的定義寫在前面。

GPU云服務(wù)器云服務(wù)器 docker初識 TypeScript 初識關(guān)系數(shù)據(jù)庫 typescript javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106980.html

發(fā)表評論

登陸后可評論

0條評論

ARGUS

男|高級講師

我要關(guān)注我要私信

TA的文章

大部分程序員都記不住的注解，Idea 云筆記卻能輕松記住

閱讀 3516·2021-11-15 11:38
ForwardWeb：美國/新加坡VPS限時五折優(yōu)惠，低至$12美元/年起

閱讀 836·2021-11-08 13:27
Linux CentOS 6.8一鍵快速安裝vncserver服務(wù)配置遠(yuǎn)程桌面

閱讀 2250·2021-07-29 14:50
編碼規(guī)范-css.md

閱讀 2977·2019-08-29 13:06
CSS篇之inline-block

閱讀 848·2019-08-29 11:22
document.write知多少

閱讀 2419·2019-08-29 11:04
CSS 單位

閱讀 3510·2019-08-28 18:23
jQuery源碼解析之width()

閱讀 896·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

TypeScript 初識 - 函數(shù)

相關(guān)文章

TypeScript 初識 - 變量

TypeScript 初識 - 接口

TypeScript 初識 - 類