TypeScript----接口和泛型

接口ide

TypeScript的核心原則之一是對值所具備的結構進行類型檢查。它有時被稱作「鴨式辨型法」或「結構性子類型化」。在TypeScript裏,接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。函數

// 接口
// TypeScript的核心原則之一是對值所具備的結構進行類型檢查。
// 在TypeScript裏,接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。
interface LabelValue {
    label: string;
}

function prientLabel(labelObj: LabelValue) {
    console.log(labelObj.label);
}
let myObj = {
    'label': 'hello Interface'
};
prientLabel(myObj);

// LabelledValue 接口就比如一個名字,它表明了有一個 label 屬性且類型爲 string 的對象。
// 只要傳入的對象知足上述必要條件,那麼它就是被容許的。

// 可選屬性
// 帶有可選屬性的接口與普通的接口定義差很少,只是在可選屬性名字定義的後面加一個 ? 符號。
// 可選屬性的好處之一是能夠對可能存在的屬性進行預約義,好處之二是能夠捕獲引用了不存在的屬性時的錯誤。
interface Person {
    name?: string;
    age?: number;
}

function printInfo(info: Person) {
    console.log(info);
}

let info = {
    'name': 'cd',
    'age': 23
};
printInfo(info); // {name: "cd", age: 23}
let info2 = {
    'name': 'cd'
};
printInfo(info2); // {name: "cd"}

// 函數類型
// 接口可以描述 JavaScript 中對象擁有的各類各樣的外形。 除了描述帶有屬性的普通對象外,接口也能夠描述函數類型。
// 定義的函數類型接口就像是一個只有參數列表和返回值類型的函數定義。參數列表裏的每一個參數都須要名字和類型。
// 定義後完成後,咱們能夠像使用其它接口同樣使用這個函數類型的接口。
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string,subString: string) {
    return source.search(subString) !== -1;
};

console.log(mySearch('路飛', '')); // true
console.log(mySearch('路飛', '')); // false

// 可索引類型
// 與使用接口描述函數類型差很少,咱們也能夠描述那些可以「經過索引獲得」的類型,好比 a[10] 或 ageMap['daniel']。
// 可索引類型具備一個索引簽名,它描述了對象索引的類型,還有相應的索引返回值類型。
interface StringArray{
    [index: number]: string;
}

let MyArray: StringArray;
MyArray = ['', '' , '' , ''];
console.log(MyArray[2]); //// 類類型
// 與 C# 或 Java 裏接口的基本做用同樣,TypeScript 也可以用它來明確的強制一個類去符合某種契約。
// 咱們能夠在接口中描述一個方法,在類裏實現它,如同下面的 setTime 方法同樣:
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date){
        this.currentTime = d;
    }
    constructor(h: number, m: number) {}
}

// 繼承接口
// 和類同樣,接口也能夠相互繼承。 
// 這讓咱們可以從一個接口裏複製成員到另外一個接口裏,能夠更靈活地將接口分割到可重用的模塊裏。
// 一個接口能夠繼承多個接口,建立出多個接口的合成接口。
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let s = <Square>{};
s.color = 'blue';
s.penWidth = 100;
s.sideLength = 10;
console.log(s); // {color: "blue", penWidth: 100, sideLength: 10}

泛型this

 

軟件工程中,咱們不只要建立一致的定義良好的API,同時也要考慮可重用性。組件不只可以支持當前的數據類型,同時也能支持將來的數據類型,這在建立大型系統時爲你提供了十分靈活的功能。spa

在像C#和Java這樣的語言中,可使用泛型來建立可重用的組件,一個組件能夠支持多種類型的數據。這樣用戶就能夠以本身的數據類型來使用組件。code

 

// 泛型
// 以下代碼,咱們給 Hello 函數添加了類型變量 T ,T 幫助咱們捕獲用戶傳入的類型(好比:string)。
// 咱們把這個版本的 Hello 函數叫作泛型,由於它能夠適用於多個類型。
// 代碼中 output 和 output2 是效果是相同的,
// 第二種方法更加廣泛,利用了類型推論 —— 即編譯器會根據傳入的參數自動地幫助咱們肯定T的類型。
function Hello<T>(arg: T): T {
    return arg;
}

let outPut = Hello<string>('Hello Generic');
let output2 = Hello('Hello Generic')

console.log(outPut);
console.log(output2);

做者:longWinter666對象

相關文章
相關標籤/搜索