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

資訊專欄INFORMATION COLUMN

TypeScript入門-接口

sewerganger / 3507人閱讀

摘要：接口類型檢查不會去檢查屬性順序，但是屬性的必須存在且類型匹配。函數(shù)的返回值函數(shù)的返回值類型必須與接口定義的返回值保持一致。示例代碼如下張三李四張三輸出張三輸出張三索引簽名支持字符串和數(shù)字兩種數(shù)據(jù)類型。

學(xué)習(xí)Angular 2 ， 《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構(gòu)建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發(fā) Angular 應(yīng)用。

接口

接口在面向?qū)ο笤O(shè)計(jì)中具有極其重要的作用，TypeScript 接口的使用方式類似于 Java，同時還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等類型。

屬性類型接口

在 TypeScript 中，使用 interface 關(guān)鍵字來定義接口。示例代碼如下：

interface FullName {
    firstName: string;
    secondName: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {age: 10, firstName: "Wu", secondName: "Weisen"};
printLabel(myObj);

上例中接口 FullName 包含兩個屬性：firstName 和 secondName,且都是字符串類型，這里有兩點(diǎn)需要注意：

傳給 printLabel() 方法的對象只要“形式上”滿足接口的要求即可，例如上例中對象 myObj 必須包含 firstName 和 secondName 屬性，且類型都是 string，即使有多出的屬性也不會報(bào)錯。

接口類型檢查不會去檢查屬性順序，但是屬性的必須存在且類型匹配。

TypeScript 還提供了可選屬性，可選屬性的接口定義與普通接口的定義方式差不多，我們只需在可選屬性變量名后面加一個?符號，示例代碼如下：

interface FullName {
    firstName: string;
    secondName?: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {firstName: "Wu"};    // secondName 是可選屬性，可以不傳
printLabel(myObj);
函數(shù)類型接口

接口除了描述帶有屬性的普通對象外，也能描述函數(shù)類型。定義函數(shù)類型接口時，需要明確定義函數(shù)的 參數(shù)列表 和 返回值類型，且參數(shù)列表的每個參數(shù)都要有 參數(shù)名 和 類型。示例代碼如下：

interface encrypt {
    (val: string, salt: string): string
}

上邊已經(jīng)定義好了一個函數(shù)類型接口 encrypt，現(xiàn)在，我們來看看如何使用函數(shù)類型接口。

let md5: encrypt;
md5 = function(val: string, salt: string){
    console.log("orgin value:" + val);
    let encryptValue = /** 代碼略 **/;
    console.log("encryptvalue:" + encryptValue);
    return encryptValue;
}
let pwd = md5("password", "Angular");

對于函數(shù)類型的接口要注意以下兩點(diǎn)：

函數(shù)的參數(shù)名：使用時參數(shù)個數(shù)與對應(yīng)位置變量的數(shù)據(jù)類型都必須保持一致，參數(shù)名可以不一樣。

函數(shù)的返回值：函數(shù)的返回值類型必須與接口定義的返回值保持一致。

可索引類型接口

可索引類型接口用來描述那些可以通過索引得到的類型，例如 userArray[1]、user、Object["name"]等。它包含一個索引簽名，即通過特定的索引來得到指定類型的返回值。示例代碼如下：

interface UserArray {
    [index: number]: string;
}

interface UserObject {
    [index: string]: string;
}

let userArray: UserArray;
let userObject: UserObject;

userArray = ["張三", "李四"];
userObject = {"name": "張三"};

console.log(userArray[0]);    // 輸出：張三
console.log(userObject["name"]);    // 輸出：張三

索引簽名支持字符串和數(shù)字兩種數(shù)據(jù)類型。而當(dāng)使用數(shù)字類型來索引時，JavaScript 最終也會將它裝換成 字符串類型 后再去索引對象，如上例中，以下寫法都是一樣的：

console.log(userArray[0]);    // 輸出：張三
console.log(userArray["0"]);    // 輸出：張三
類類型接口

類類型接口用來規(guī)范一個類的內(nèi)容，示例代碼如下：

interface Animal {
    name: string;
}

class Dog implements Animal {
    name: string;
    constructor(n: string) {}
}

我們可以在接口中描述一個方法，并在類里去具體實(shí)現(xiàn)它的功能，示例代碼如下：

interface Animal {
    name: string;
    setName(n: string): void;
}

class Dog implements Animal {
    name: string;
    setName(n: string) {
        this.name = n;
    }
    constructor(n: string) {}
}
接口擴(kuò)展

和類一樣，接口也可以實(shí)現(xiàn)相互擴(kuò)展，即能將成員從一個接口復(fù)制到另一個里面，這樣可以更靈活地將拆分到可復(fù)用的模塊里面，示例代碼如下:

interface Animal {
    eat(): void;
}

interface Person extends Animal {
    talk(): void;
}

class Programmer {
    coding(): void {
        console.log("wow~")
    }
}

class ITGirl extends Programmer implements Person {
    eat(){
        console.log("animal eat");
    }
    
    talk() {
        console.log("person talk");
    }
    
    coding(): void {
        console.log("I like coding");
    }
}

let itGirl = new ITGirl();    // 通過組合集成類來實(shí)現(xiàn)接口擴(kuò)展，可以更靈活復(fù)用模塊

itGirl.coding();

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

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

相關(guān)文章

  • 為vue3學(xué)點(diǎn)typescript, 基礎(chǔ)類型和入門高級類型

    摘要：導(dǎo)航第一課體驗(yàn)第二課基礎(chǔ)類型和入門高級類型第三課泛型第四課解讀高級類型很重要這一節(jié)很重要可以說是的最核心部分這一節(jié)學(xué)完其實(shí)就可以開始用寫代碼了想想中的再看看標(biāo)題中的類型字所以請大家務(wù)必認(rèn)真什么是入門高級類型因?yàn)楦呒夘愋偷膬?nèi)容比較多但是有些基 導(dǎo)航 第一課, 體驗(yàn)typescript 第二課, 基礎(chǔ)類型和入門高級類型 第三課, 泛型 第四課, 解讀高級類型 很重要 這一節(jié)很重要, 可以說...

    Songlcy 評論0 收藏0

  • TypeScript入門教程

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

    Dr_Noooo 評論0 收藏0

  • TypeScript快速入門

    摘要：添加了可選的靜態(tài)類型注意并不是強(qiáng)類型和基于類的面向?qū)ο缶幊?。類類型接口示例接口更注重功能的設(shè)計(jì)，抽象類更注重結(jié)構(gòu)內(nèi)容的體現(xiàn)模塊中引入了模塊的概念，在中也支持模塊的使用。 一：Typescript簡介 維基百科： TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個嚴(yán)格超集，并添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?。C#的首席架構(gòu)師以及Delp...

    moven_j 評論0 收藏0

  • TypeScript入門-模塊

    摘要：模塊模塊是自聲明的，兩個模塊之間的關(guān)系是通過在文件級別上使用和來建立的。類似地，我們必須通過導(dǎo)入其他模塊導(dǎo)出的變量函數(shù)類等。模塊使用模塊加載器去導(dǎo)入它的依賴，模塊加載器在代碼運(yùn)行時會查找并加載模塊間的所有依賴。 學(xué)習(xí)Angular 2 ， 《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構(gòu)建語音，這意味著掌握 TypeScript 語...

    econi 評論0 收藏0

  • TypeScript基本知識點(diǎn)整理（看完絕對入門---真的?。。?/b>

    摘要：因?yàn)橹?，如果函?shù)沒有返回值，則會默認(rèn)返回。抽象類在運(yùn)行時是可見的，可以通過判斷。接口只能描述類的公共部分，不會檢查私有成員，而抽象類沒有這樣的限制。本片文章主要講述了TypeScript的基礎(chǔ)知識點(diǎn)，這些是我個人的理解，如有不正確的地方請?jiān)u論斧正！ 文章以下面的順序講解： 變量類型 函數(shù) 類 接口 泛型 命名空間 在開始之前我們先裝環(huán)境： npm i typescript -g //全局...

    Yi_Zhi_Yu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<