TypeScript入門-聲明與結構、函數

CoyPan 發布于2019-08-20 15:30 / 1027人閱讀

摘要：聲明和結構在中，支持和這樣的聲明方式。解構就是將聲明的一組變量與相同結構的數組或者對象的元素數值一一對應，并將變量相對應元素進行賦值。

學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發 Angular 應用。

聲明和結構

在TypeScript 中，支持var、let 和 const 這樣的聲明方式。

let 聲明

let 與 var 聲明變量的寫法類似，示例代碼如下：

let hello = "Hello Angular";

不同于var， let 聲明的變量旨在塊級作用域內有效，示例代碼如下：

function f(input: boolean) {
    let a = 100;
    if(input) {
        let b = a + 1; // 運行正確
        return b;
    }
    return b; // 錯誤， b沒有被定義
}

這里定義了兩個變量 a 和 b ，a 的作用域是在f()函數體內，而b是在if這個語句塊中。塊級作用域還有幾點需要注意的：

不能在它的聲明之前被讀取或賦值

在同樣的作用域中，let 不允許變量被重復聲明

還需要注意 let 聲明在下面兩種函數入參的對比：

function funA(x) {
    let x = 100;    // 報錯，x已經在函數入參聲明
}

// 增加了判斷條件組成的新的塊級作用域
function funB(condition, x) {
    if(condition) {
        let x = 100;     // 運行正常
        return x;
    }
    return x;    
}

funB(false, 0);    // 返回 0
funB(true, 0);    // 返回 100

const 聲明

const 聲明與 let 聲明相似，它與 let 擁有相同的作用域規則，但 const 聲明的是常量，常量不能被重新賦值。但是如果定義的常量是對象，對象里的屬性值是可以被重新賦值的。示例代碼如下：

const CAT_AGE = 9;

const cat = {
    name: "kitty",
    age: CAT_AGE
}
// 錯誤
CAT_AGE = 10;
// 錯誤
cat = {
    name: "Danie",
    age: CAT_AGE
}

cat.name = "Jason";    // 正確

解構

解構是ES6中一個重要特性。解構就是將聲明的一組變量與相同結構的數組或者對象的元素數值一一對應，并將變量相對應元素進行賦值。

在 TypeScript 中支持數組解構和對象解構。

數組解構

數據結構是最簡單的解構類型，示例代碼如下：

let input = [1, 2];
let [first, second] = input;
console.log(first); // 相當于 input[0]: 1;
console.log(second); // 相當于 input[1]: 2

// 也可作用于已聲明的變量：
[first, second] = [second, first];    // 變量變換

// 或作用于函數參數
function f([first, second] = [number, number]) {
    console.log(first + second);
}
f([1, 2]);    // 輸出 3

有時，我們會看到如 let[first, ...rest] 使用 “...” 這樣的語句，“...” 三個連續小數點表示的是展開操作符，用于創建可變長的參數列表，使用起來非常方便，示例代碼如下：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first);    // 輸出 1
console.log(rest);    // 輸出 [2, 3, 4];

對象解構

對象解構讓我們的代碼更加簡潔，可讀性強，示例代碼如下：

let test = { x: 0, y: 10, z: 20 };
let {x, y, z} = test;
console.log(x, y, z);    // 輸出 0, 10, 20

函數

函數定義

在TypeScript中支持函數聲明和函數表達式的寫法，示例代碼如下：

// 函數聲明寫法
function maxA(x: number, y: number): number {
    return x > y? x : y;
}

// 函數表達式寫法
let maxB = function(x: number, y: number): number {
    return x > y? x : y;
}

在上例中，參數類型和返回值類型這兩部分都會被檢查。在調用時，只做參數類型和個數的匹配，不做參數名的校驗。

可選參數

在 TypeScript 中，被調函數的每個參數都是必傳的，也就是說傳遞給函數的參數個數必須和函數定義時的參數一致，示例代碼如下：

function max(x: number, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 報錯
let result2 = max(2, 4);    // 正常

但是，在現實開發中，我們需要根據實際情況來決定是否傳入某個參數的情況，TypeScript 也提供了可選參數語法，即在參數名旁邊加上？來使其變成可變參數，需要注意的是，可選參數必須位于必選參數的后面，示例代碼如下：

function max(x: number, y?: number): number {
    if(y) {
        return x > y? x: y;
    } else {
        return x;
    }
}
let result1 = max(2);    // 正常
let result2 = max(2, 4);    // 正常
let result3 = max(2, 4, 7);    // 報錯

默認參數

TypeScript 還支持初始化默認參數，如果函數的某個參數設置了默認值，當該函數被調用時，如果沒有給這個參數傳值或者傳的值為 undefined 時，這個參數的值就是設置的默認值，示例代碼如下：

function max(x: number, y = 4): number {
    return x > y? x: y;
}

let result1 = max(2);    // 正常
let result2 = max(2, 4);    // 正常
let result3 = max(2, undefined);    // 正常

帶默認值的參數不必放在必選參數后面，但如果默認值參數放到了必選參數前面，用戶必選顯式地傳入 undefined, 示例代碼如下：

function max(x = 2, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    // 報錯
let result2 = max(undefined, 4);    // 正常
let result3 = max(2, 4);    // 正常

剩余參數

當我們需要同時操作多個參數，或者不知道會有多少個參數傳遞進來的時候，就需要用到 TypeScript 里的剩余參數。示例代碼如下：

function sum(x:number, ...restOfNumber:number[]): number {
    // 是不是覺得...特別熟悉，就是上面說的展開操作符
    let result = x;
    for(let i = 0; i < restOfNumber.length; i++) {
        result += restOfNumber[i];    
    }
    return result;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result);    // 輸出 15

函數重載

函數重載是通過為同一個函數提供多個函數類型定義來達到實現多種功能的母的。TypeScript 可以支持函數的重載，示例代碼如下：

function css(config: {});
function css(config: string, value: string);

在上面的例子種，這個函數有2種重載方法，編譯器會根據參數類型來判斷該調用哪個函數。TypeScript 的函數重載通過查找重載列表來實現匹配，因此，在實現重載方法時，建議將最精確的定義放在最前面。

云服務器 GPU云服務器函數聲明聲明式函數提前聲明函數復雜函數聲明

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

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

TypeScript快速入門

摘要：添加了可選的靜態類型注意并不是強類型和基于類的面向對象編程。類類型接口示例接口更注重功能的設計，抽象類更注重結構內容的體現模塊中引入了模塊的概念，在中也支持模塊的使用。一：Typescript簡介維基百科： TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集，并添加了可選的靜態類型和基于類的面向對象編程。C#的首席架構師以及Delp...

moven_j 2019-08-22 11:11 評論0 收藏0
JavaScript => TypeScript 入門

摘要：為了由簡入繁，不妨將這些類型劃分為基本類型復合類型。以下將漸進式的對的這些類型進行了解。實際上，有一種屬性描述對象，是通過獲取的。但無論如何，類型檢查是可以排除大部分錯誤的。在函數的類型聲明中，繼續來鞏固這條規則的寫法。幾個月前把 ES6 的特性都過了一遍，收獲頗豐?，F在繼續來看看 TypesScript（下文簡稱為 TS）。限于經驗，本文一些總結如有不當，歡迎指正。概述官網有這...

Tonny 2019-08-21 17:27 評論0 收藏0
JavaScript => TypeScript 類入門

摘要：靜態屬性靜態方法目前支持靜態方法表示，類屬性及靜態屬性目前作為提案還未正式成為標準。在中，抽象類不能用來實例化對象，主要做為其它派生類的基類使用。不同于接口，抽象類可以包含成員的實現細節。中也是這樣規定的抽象類不允許直接被實例化。嘗試重寫在此之前，通過《JavaScript => TypeScript 入門》已經掌握了類型聲明的寫法。原以為憑著那一條無往不利的規則，就可以開開心心的...

geekidentity 2019-08-21 17:44 評論0 收藏0
TypeScript入門-基本類型

摘要：基本類型在中，提供了一下基本數據類型布爾類型數據類型字符串類型數組類型元組類型枚舉類型任意值類型和類型類型其中元組枚舉任意值類型和類型是有別與的特有類型。布爾類型布爾類型是最簡單的數據類型，只有和兩種值。學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更...

_ipo 2019-08-20 15:29 評論0 收藏0
TypeScript入門教程

摘要：現在，出現了更多本身支持或者通過插件支持語法智能提示糾錯甚至是內置編譯器的文本編輯器和。 TypeScript是什么 TypeScript是JavaScript的一個超集 TypeScript需要編譯為JavaScript才能運行（語法糖） TypeScript提供了類型系統，規范類似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用擔心TypeS...

Dr_Noooo 2019-08-26 11:52 評論0 收藏0