TypeScript入門-接口

sewerganger 發布于2019-08-21 15:32 / 3483人閱讀

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

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

接口

接口在面向對象設計中具有極其重要的作用，TypeScript 接口的使用方式類似于 Java，同時還增加了更靈活的接口類型，包括屬性、函數、可索引和類等類型。

屬性類型接口

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

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,且都是字符串類型，這里有兩點需要注意：

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

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

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

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

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

let myObj = {firstName: "Wu"};    // secondName 是可選屬性，可以不傳
printLabel(myObj);

函數類型接口

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

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

上邊已經定義好了一個函數類型接口 encrypt，現在，我們來看看如何使用函數類型接口。

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

對于函數類型的接口要注意以下兩點：

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

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

可索引類型接口

可索引類型接口用來描述那些可以通過索引得到的類型，例如 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"]);    // 輸出：張三

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

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

類類型接口

類類型接口用來規范一個類的內容，示例代碼如下：

interface Animal {
    name: string;
}

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

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

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

class Dog implements Animal {
    name: string;
    setName(n: string) {
        this.name = n;
    }
    constructor(n: string) {}
}

接口擴展

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

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();    // 通過組合集成類來實現接口擴展，可以更靈活復用模塊

itGirl.coding();

GPU云服務器云服務器 TypeScript typescript javascript php開發接口入門 typescript-ionic2

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

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

為vue3學點typescript, 基礎類型和入門高級類型

摘要：導航第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型很重要這一節很重要可以說是的最核心部分這一節學完其實就可以開始用寫代碼了想想中的再看看標題中的類型字所以請大家務必認真什么是入門高級類型因為高級類型的內容比較多但是有些基導航第一課, 體驗typescript 第二課, 基礎類型和入門高級類型第三課, 泛型第四課, 解讀高級類型很重要這一節很重要, 可以說...

Songlcy 2019-08-23 18:27 評論0 收藏0
TypeScript入門教程

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

Dr_Noooo 2019-08-26 11:52 評論0 收藏0
TypeScript快速入門

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

moven_j 2019-08-22 11:11 評論0 收藏0
TypeScript入門-模塊

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

econi 2019-08-20 15:35 評論0 收藏0
TypeScript基本知識點整理（看完絕對入門---真的！！）

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

Yi_Zhi_Yu 2019-05-21 19:23 評論0 收藏0