TypeScript經常使用知識之--接口和泛型

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

由於Typescript的持續火爆，分享下TS的經常使用知識點，咱們一塊兒學習交流，一塊兒加油！

接口

接口和type相似都是對 函數和變量的一種約束

1.約束變量

interface Type1 {
    name: string;
    age: number;
}

let type1: Type1 = {
    name: "Tom",
    age: 11,
};
複製代碼

2.約束函數

interface Type2 {
    (a: string, b: number): any;
}

let type2: Type2 = (a: string, b: number): any => {};
複製代碼

3.約束構造函數

interface Type3 {
    new (name: string): any;
}
function createAnimal(clazz: Type3) {
    return new clazz("1");
}
// 建立一個類
class Dog {
    constructor(public namt: string) {}
}
//使用這個類
createAnimal(Dog);

複製代碼

4.能夠定義任意的屬性

interface Type4 {
    [index: number]: string;
}
let type4: Type4 = {
    1: "1",
};
複製代碼

5.能夠索引屬性 規定key的類型

interface Type5 {
    [index: number]: string;
}
let arr:Type5=['1','2']

複製代碼

6.能夠實現多個接口

class TypeMulti implements Type1, Type4 {
    [xxx: number]: string;
    name: string;
    age: number;
}

複製代碼

7.若是一個函數的類型 擁有了其餘屬性

interface Type7 {
    (name: string, age: number): void;
    gender: string;
}

let t1: any = (a: string, b: number): void => {};
t1.age = 16;

let t2: Type7 = t1;
複製代碼

泛型

軟件工程中，咱們不只要建立一致的定義良好的API，同時也要考慮可重用性。 組件不只可以支持當前的數據類型，同時也能支持將來的數據類型，

這在建立大型系統時爲你提供了十分靈活的功能。

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

1.泛型的使用

function createObj<T>(obj: T): T {
    return obj;
}
let time = createObj<string>("today");
複製代碼

2.類的泛型 *

class Person<T> {
    constructor(public age: T) {
        this.age = age;
    }
    getAge(): T {
        return this.age;
    }
}

let person = new Person<number>(11);
複製代碼

3.構造函數泛型

function factory<T>(typeClass: { new (): T }): T {
    return new typeClass();
}
class Animal {}
let animal = factory<Animal>(Animal);
複製代碼

4.默認泛型

function fn2<T = string>(a: T) {}
// 取默認的泛型string
fn2("1");

複製代碼

5.泛型的約束

可使用extends對泛型進行約束

function fn3<T extends number>(val: T): void {}
fn3<number>(1);
// fn3<string>('1');// 報錯

class C1 {
    name: string;
}

class C2 {
    age: number;
}

class CC {
    name: string;
    age: number;
    gender: string;
}

// 這裏的T 只能是一個包含C1屬性的一個實例
function print<T extends C1>(c: T) {}

print<C1>(new C1());
// print<C2>(C2);//報錯 由於C2的屬性沒有包括C1
print<CC>(new CC());
複製代碼

6.泛型的使用

interface G<U> {
    <T>(a: T): U;
}

// 使用泛型接口 定義U
let fn4: G<string> = function <T>(a: T): string {
    return "1";
};

// 使用函數 定義T
fn4<number>(1);
複製代碼

相關資料

• TypeScript 官網

你們喜歡的能夠看看個人專欄 (TypeScript經常使用知識) 我會盡可能保持天天晚上更新，若是喜歡的麻煩幫我點個贊，十分感謝

你們若是喜歡「算法」的話，能夠看看我分享的另一個專欄（前端搞算法）裏面有更多關於算法的題目的分享,但願能幫助你們更深的理解算法

文章內容目的在於學習討論與分享學習算法過程當中的心得體會，文中部分素材來源網絡，若有侵權，請聯繫刪除，郵箱 182450609@qq.com