(精华2020年6月3日更新) TypeScript中接口详解

非接口约束

function printA(labelObj:{label:string}){
    console.log(labelObj);
}

printA({
    label:'你好'
})

//跳过额外字段的检测
// 第一种断言 ：

printA({
    label:'你好',
    name:'laney'
} as {label:string})

//第二种方式：添加字符串的索引签名

function printB(labelObj:{label:string,[propName:string]:any}){
    console.log(labelObj);
}
printB({
    label:'你好',
    name:'laney',
    age:20
})

//第三种：将字面量赋值给另外一个变量

var obj = {
    label:'你好',
    name:'laney'
};

printA(obj)

使用接口

//使用接口 ,一种规范
namespace INK1 {
    interface labelValue {
        label: string;
        apple: string;
        // [propName:string]:any;   //添加字符串的索引签名
        // size?:string; //可传可不传

    };

    function printB(labelObj: labelValue) {
        console.log('labelObj.label');
        console.log(labelObj);
    }

    // 第一种断言 ：
    printB({
        label: '你好',
        // size:'10',
        apple: 'ddd'
    } as { apple: string; label: string })

    //第二种方式：添加字符串的索引签名
    printB({
        label: '你好',
        size: 10,
        age: 10
    })

    //第三种：将字面量赋值给另外一个变量

    var obj = {
        label: '你好',
        size: 10,
        age: 10
    }

}

接口计算（普通计算和数组计算）

//函数类型接口：对函数的参数以及返回值进行约束
namespace FunctionA {
    //不使用接口
    var add1 = function(a:number,b:number):number{
        return a+b;
    }

    //使用函数接口
    interface CalcTwo {
        (a:number,b:number):number
    }

   var add2:CalcTwo = function(a1:number,b1:number):number {
        return a1+b1;
   }

    interface encrypt{
        (key:string,value:string):string;
    }
    var md5:encrypt=function(key:string,value:string):string{
          //模拟操作
          return key+value;
    }

    console.log(md5('name','tony'))

}
namespace MathAdd {
    interface CalcTwo {
        (a: number, b: number): number
    }

    /**
     * 计算数组被某种算法运算的结果
     * @param {number[]} arr  数组
     * @param {CalcTwo} calc  用户指定的算法函数
     * @param {number} initVal  传入初始值
     * @returns {number}  得到最终运算结果
    **/

    function calcArr(arr: number[], calc: CalcTwo, initVal: number): number {
        // var result = initVal;
        // arr.forEach((value,index)=>{
        //     result = calc(result,value)  
        // });
        // return result

        // 高阶函数
        return arr.reduce(function (a, b) {
            return calc(a, b)
        }, initVal)


    }

    var arr: number[] = [1, 3, 5, 7, 9];

    var sum = function (a1: number, b1: number): number {
        return a1 + b1;
    }
    var multipy = function (a1: number, b1: number): number {
        return a1 * b1;
    }
    //相加
    var p1 = calcArr(arr, sum, 10);
    console.log('相加:' + p1);

    //相乘
    var p2 = calcArr(arr, multipy, 10);
    console.log('相乘:' + p2);

}

接口定义，数组和对象取值

namespace ArrG {
    interface UserArr {
        [index: number]: string
    }
    //1.对数据的约束
    var arr1: UserArr = ['aaa', '111'];
    // var  arr2:UserArr = ['aaa',111]; //错误
    console.log(arr1[0])


    //2. 对对象的约束
    interface UserObj {
        [index: string]: string
    }

    var obj1: UserObj = { name: "张三" } //正确
    // var obj1:UserObj = {name:112} //错误

    console.log(obj1)
}

类继承接口

// 类类型接口用来规范一个类的内容。
// 类实现接口本质上 即类遵循接口的约束，接口里面写了多少个函数、参数，实现的类里面也要写相同的函数、参数。
namespace TT1 {
    interface FullName {  
        username: string;  
    }  

    //WebCoder 需要遵循接口FullName的约束
    class WebCoder implements FullName {
        fruit:string;
        username:string;
        constructor(fruit01:string,username:string) {
            this.fruit = fruit01;
            this.username = username;
        }
    }

    var p1 = new WebCoder('苹果','Alice');
    console.log(p1);

}

namespace TT2 {
    // 可以在接口中描述一个方法，并在类里具体实现它的功能，
    // 如同下面的setName方法一样
    interface FullName {  
        username: string;  
        setName(name:string):void;
        getName():void
    } 

    class Person implements FullName {
        username:string;
        constructor(username:string) {
            this.username = username;
        }
        setName(str:string){
            this.username = str;
        }
        getName(){
            console.log(this.username);
        }
    }

    var p1 = new Person('laney');
    p1.setName('blood');
    p1.getName();
}

多接口继承

// 6.2 接口可以继承接口

namespace PE1 {
    interface Animal {
        eat(): void;
    }
    interface Female {
        usernmae: string;
    }
    interface Male {
        age: string
    }

    //接口 Person 继承了接口Animal
    //单继承。只继承了一个接口
    interface Person extends Animal {
        work(): void;
    }

    //多接口继承
    // 接口名 extends 接口1,接口2,....接口n
    //继承多个接口用逗号分开
    interface Cat extends Animal, Female, Male {
        color: string;
    }

    class webFront implements Person {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        eat() {
            console.log(this.name + '吃西瓜')
        }
        work() {
            console.log(this.name + '写代码')
        }
    }
    var w1 = new webFront('张三');
    w1.eat();

    //类继承类并实现接口：  WebFront继承类Programmer 并实现接口Person

}

//类可以实现类， 也可以实现接口

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

    class Programer {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        codeing(code: string) {
            console.log(this.name + code);
        }
    }

    class webFront extends Programer implements Person {

        constructor(name: string) {
            super(name)
        }
        eat() {
            console.log(this.name + '吃苹果')
        }
        work() {
            console.log(this.name + '写代码')
        }
    }

    var w2 = new webFront('Tony');
    w2.eat();
}


//接口继承类
namespace PE3 {

    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
        shape() {
            console.log('原型');
        }
    }

    interface Point3D extends Point {
        z: number;
        eat(): void;
    }

    var ts: Point3D = {
        x: 1,
        y: 2,
        z: 3,
        shape() {
            console.log('kkkk');
        },
        eat() {
            console.log('喜欢吃水果');
        }
    }

    console.log(ts);
}

备注：强制转换的使用

function getLength(x: number | string): number {
    return x.toString().length;
    //  return x.length; //错误
}

// 方式一： <类型> 值 
function getLength1(x: number | string): number {
    if ((<string>x).length) {
        return (<string>x).length
    } else {
        return x.toString().length
    }
}


// 方式二： 值 as 类型

function getLength2(x: number | string): number {
    if ((x as string)) {
        return (x as string).length
    } else {
        return x.toString().length;
    }
}