TypeScript 初識 - 函數

ARGUS 發布于2019-08-26 11:00 / 1737人閱讀

摘要：函數類型函數返回值類型我們可以給每個參數添加類型之后再為函數本身添加返回值類型。能夠根據返回語句自動推斷出返回值類型，所以通常可以省略它匿名函數完整函數類型完整的函數類型包含兩部分參數類型和返回值類型。

函數是 JavaScript 的第一等公民，函數在 JavaScript 中可以實現抽象層、模擬類、信息隱藏和模塊等等。TypeScript 在一定基礎上擴展了函數的功能。

函數類型 函數返回值類型

我們可以給每個參數添加類型之后再為函數本身添加返回值類型。TypeScript 能夠根據返回語句自動推斷出返回值類型，所以通常可以省略它：

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

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

完整函數類型

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

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

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

推斷類型

函數定義的時候，如果賦值語句只有一邊指定了語句，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;
};

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

可選參數和默認參數

默認情況下，TypeScript 會判斷傳入函數的參數和函數定義的參數是否一致，個數、類型都會進行判斷。

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);
// 應有 2 個參數，但獲得 3 個。
myAdd(1, 2, 3);

在 TypeScript 中，可以加上 ? 實現可選參數的功能，可選參數必須放在必需參數的前面：

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

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

在定義函數的時候，可以給形參進行賦值作為默認值，僅當不傳值或傳入的值為 undefined 時，函數會使用這個默認值：

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

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

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

剩余參數

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

剩余參數將不定數量的參數當作一個數組，表示 0 或多個參數：

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

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

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

重載

重載允許一個函數接受不同數量或類型的參數時，作出不同的處理。在 JavaScript 中，一般是判斷傳入參數的個數或類型等等情況實現重載。

以 TypeScript 中聯合類型的特性，實現 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"));

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

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 會優先從最前面的函數定義開始匹配，所以多個函數定義如果有包含關系，需要優先把精確的定義寫在前面。

GPU云服務器云服務器 docker初識 TypeScript 初識關系數據庫 typescript javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106980.html

TypeScript 初識 - 變量

摘要：通常會定義為函數的返回值一個類型的變量是沒有生命用處的，因為類型的變量只能賦值為。和有一些區別的，函數沒有返回值時返回類型為的方法，即使沒有寫明語句，也會在函數執行完的時候，隱式地返回一個類型。中新增加的變量聲明方式。類型注解類型注解使用 :TypeAnnotation 語法。類型聲明空間中可用的任何內容都可以用作類型注解。 const num: number = 123; fun...

dinfer 2019-08-26 10:43 評論0 收藏0
TypeScript 初識 - 接口

摘要：接口的作用是聲明變量的結構和方法，但不做具體的實現。這兩個使用場景不同。額外的屬性檢查從字面上的意思看，其實就是對接口未定義的屬性進行檢查。上面的例子，定義了接口，它具有索引簽名。它不會幫你檢查類是否具有某些私有成員。接口的作用是聲明變量的結構和方法，但不做具體的實現。通常，接口會強制對所有成員進行類型檢查，包括數量和類型： interface Name { first: s...

gnehc 2019-08-26 10:56 評論0 收藏0
TypeScript 初識 - 類

摘要：抽象類抽象類做為其它字類的基類使用，一般不會直接被實例化。抽象類中可以包含具體實現，接口不能。抽象類在運行時是可見的，可以通過判斷。接口只能描述類的公共部分，不會檢查私有成員，而抽象類沒有這樣的限制。一個普通的類 class Greeter { greeting: string; constructor(message: string) { this....

鄒強 2019-08-26 10:57 評論0 收藏0
TypeScript 初識

摘要：當你陷在一個中大型項目中時應用日趨成為常態，沒有類型約束類型推斷，總有種牽一發而動全身的危機和束縛。總體而言，這些付出相對于代碼的健壯性和可維護性，都是值得的。目前主流的都為的開發提供了良好的支持，比如和。參考資料中文文檔文章博客地址：http://pinggod.com/2016/Typescript/ TypeScript 是 JavaScript 的超集，為 JavaScrip...

iliyaku 2019-08-19 18:47 評論0 收藏0
TypeScript 初識 - 枚舉

摘要：當滿足以下條件時，枚舉成員被當作是常數不具有初始化函數并且之前的枚舉成員是常數。在這種情況下，當前枚舉成員的值為上一個枚舉成員的值加。但第一個枚舉元素是個例外。枚舉成員使用常數枚舉表達式初始化。數字類型枚舉常規枚舉的值都是數字類型，因此被稱為數字類型枚舉： enum Color { Red, Blue, Green } console.log(Color.R...

molyzzx 2019-08-26 10:46 評論0 收藏0