接口

定義方法中參數(shù)的約束

function printLabel(label: string): void {
    console.log("")
}

printLabel("sss");

自定義方法傳入?yún)?shù)對(duì)json的約束

function printLabel(labelInfo: { label: string }): void {
    console.log("")
}

printLabel({ label: "ssss" });

接口：行為和動(dòng)作的規(guī)范，對(duì)批量方法進(jìn)行約束

// 定義接口
interface FullName {
    firstName: string;
    secondName: string;
}
// 實(shí)現(xiàn)接口
function printName(name: FullName) {
    // 必須傳入對(duì)象包含關(guān)鍵字
}

可選屬性接口

interface FullName {
    firstName: string;
    secondName: string;
    age?: number; // 可選屬性
}
function printName(name: FullName) {
    // 必須傳入對(duì)象包含關(guān)鍵字
}

函數(shù)類型接口

加密的函數(shù)類型接口

interface encrypt {
    (key: string, value: string): string;
}

var md5:encrypt = function(key: string, value: string): string {
    return key + value;
}

md5("name", "zhangsan");

可索引接口

對(duì)數(shù)組的約束

interface UserArray {
    [index: number]: string
}

var arr: UserArray = ["111", "222"]

對(duì)對(duì)象的約束

interface UserObj {
    [index: string]: string
}

var arr: UserObj = {name: "20"}

對(duì)類的約束

interface Animal {
    name: string;
    eat(str: string): void;
}

class Dog implements Animal{
    name: string;
    constructor(name: string){
        this.name = name;
    }
    eat() {
        console.log("");
    }
}

var dog = new Dog("小黑")
dog.eat();

class Cat implements Animal{
    name: string;
    constructor(name: string){
        this.name = name;
    }
    eat(food: string) {
        console.log("");
    }
}

var cat = new Cat("小花")
cat.eat("貓糧");

接口的繼承與拓展

interface Animal {
    eat(): void;
}

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

class Programmer {
  public name: string;
    constructor(name: string) {
        this.name = name;
    }
    coding(code: string) {
    console.log(this.name);
  }
}

//  Web類繼承Programmer類并且實(shí)現(xiàn)Person接口
class Web extends Programmer implements Person {
    public name: string;
    constructor(name: string) {
        super(name);
    }
    eat() {
        console.log(this.name);
    }
    work() {
        console.log("work");
    }
}

泛型

接受string類型的參數(shù)，并且返回string類型

function getData(value: string): string{
    return value;
}

但是要同時(shí)返回時(shí)string和number，就造成了代碼冗余

使用any類型解決

function getData(value: any): any{
    return value;
}

但是any放棄了類型檢查，會(huì)丟失掉參數(shù)類型。實(shí)際的需求時(shí)，傳入什么類型的數(shù)據(jù)，就要返回什么類型的數(shù)據(jù)。

泛型：可以支持不確定的數(shù)據(jù)類型，要求：傳入的參數(shù)和返回的類型一致

function getData<T>(value: T): T{
    return value;
}

getData<number>(123);
getData<string>(123); // error

T表示泛型，具體什么類型是調(diào)用這個(gè)方法的時(shí)候決定的

你可以隨意調(diào)用泛型參數(shù)，當(dāng)你使用簡(jiǎn)單的泛型時(shí)，泛型常用 T、U、V 表示。如果在你的參數(shù)里，不止擁有一個(gè)泛型，你應(yīng)該使用一個(gè)更語義化名稱，如 TKey 和 TValue （通常情況下，以 T 做為泛型前綴也在如 C++ 的其他語言里做為模版。）

泛型類

返回?cái)?shù)組中最小的值，同時(shí)支持number類型以及string類型

class MinClass<T> {
    public list: T[] = [];
    add(value: T): void {
        this.list.push(value);
    }
    min(): T {
        var minNum = this.list[0];
        for (var i = 0; i < this.list.length; i++) {
            if(minNum > this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}

var m = new MinClass<number>(); // 實(shí)例化并且指定泛型T

m.add(2);
m.add(22);
m.add(13);

console.log(m.min());

泛型接口

第一種

interface Config{
    <T>(value: T): T;
}

var getData: Config = function<T>(value: T):T{
    return value;
}

getData<string>("張三");

第二種

interface Config<T>{
    (value: T): T
}

function getData<T>(value: T):T{
    return value;
}

var myGetData: Config<sting> = getData;
myGetData('20')

類當(dāng)作參數(shù)驗(yàn)證

class MysqlDb<T> {
    add(info:T): boolean{
        console.log(info);
        return true;
    }
}

class ArticleCate {
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
    
    constructor(params: {
            title: string | undefined,
      desc: string | undefined,
      status: number | undefined
    }) {
        this.title = params.title;
        this.desc = params.desc;
        this.status = params.status;
    }
}

var a = new ArticleCate({
    title: "genli",
    desc: "111",
    status: 1,
})

var Db = new MysqlDb<ArticleCate>();
Db.add(a);

參考資料

• 6小時(shí)快速上手typescript