typescript中的 接口

typescript中接口的作用： 在面向对象的编程中，接口是一种规范的定义，他定义了行为和动作的规范，在程序设计里面，接口起到批量约束和定义标准的作用

一、接口对属性的约束

interface Person {
    name: string,
    age: number
}

function male(p: Person) {
    p.name;
    console.log(p.name, p.age)
}
// 由于函数定义了Person的接口，限制属性值和属性类型，且传入的类型为对象

// 方式一：传入的参数：这种直接传入参数的方法只能传入接口中固定的属性，不能增加
male({name: "alex", age: 18})
// 方式二：在函数外定义好对象，只需保证对象有自己需要的属性即可，允许有多余属性
var personOne = {
    name: "tom",
    age: 16,
    gender: "male"
}
male(personOne) // 没报错，可正常运行

// 接口对属性的约束实例：使用接口实现ajax

/*
    $.ajax({
        type: "GET",
        url: "test.json",
        data: {username: $("#username").val()}  // ajax请求所携带的请求数据
        dataType: "json"
    });
*/

interface Config {
    type: string;
    url: string;
    data?: string;
    dataType: string;
}
import { XMLHttpRequest } from "XMLHttpRequest" // ts中无XMLHttpRequest模块，需得自己编写声明文件
function ajax (config: Config) {
    var xhr = new XMLHttpRequest();
    xhr.open(config.type, config.url, true) //这里的true表示异步
    xhr.send(config.data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200) {
            console.log("success");
            // 这里成功后判断发送数据的类型，如果是json就转为字符串
            if(config.dataType === "json") {
                JSON.parse(xhr.responseText)
            } else {
                console.log(xhr.responseText)
            }
        }
    }
}

ajax({
    type: "GET",
    data: "name = tom",
    url: "http://www.weather.com.cn/data/cityinfo/101010100.html",
    dataType: "json"
})

二、接口对函数的约束：对参数和返回值进行批量约束
定义接口，指定函数能接受的参数类型以及返回值类型

interface Function {
    (key: string, value: string): void
}

// 接口对函数的约束
    // 注意： 函数类接口不同于属性类接口，要求属性的变量相同，这里变量可以不同，只需要保证变量的类型为string就行
var func1: Function = function(key: string, name: string) {
    console.log(key, name)
}
func1("hello", "world")

三、可索引接口： 数组、对象的约束(不常用)

// 可索引接口(对对数组进行约束)
interface Arr {
    // 定义数组索引的类型，以及数组内的值类型
    [index: number]: string;
}

var array: Arr = ["hello", "wollens"];  // 正确
console.log(array[1])
var array1: Arr = [666, 777]    // 报错


// 对对象进行约束
interface Object {
    // 定义：索引值为字符串，值为字符串
    [index: string]: string;
}

// 生成的对象里的元素必须都是字符串类型
var obj: Object = {
    name: "wollens",
    gender: "male"
}

console.log(obj.name)

// 对类进行约束
interface Animal {
    // 定义类的name属性值
    name: string;
    // 定义类中的方法
    eat(name: string, gender: string): void
}

class Dog implements Animal {
    name: string;
    constructor(name: string){
        this.name = name;
    };
    // 注意接口定义的方法有参数，当你不传也不会报错
    eat() {
        console.log("defind success")
    }
}

var dog = new Dog("pika")
dog.eat()

class Cat implements Animal {
    name: string;
    constructor(name: string){
        this.name = name;
    };
    eat(name: string, gender: string) {
        console.log(`${this.name} is ${gender} cat like eat ${name}`)
    }
}
var cat = new Cat("herry")
cat.eat("fish", "male")

四、接口的拓展、继承

// 定义动物的接口
interface Animal {
    name: string;
    say(): void;
}
// 定义人的接口继承动物
interface Person extends Animal{
    gender: string;
    eat(food: string): void
}

// 创建一个类引用Person的接口
class Male implements Person {
    name: string;
    gender: string;
    constructor(name: string, gender: string) {
        this.name = name;
        this.gender = gender
    }

    say() {
        console.log(`hello ${this.name}`)
    }

    eat(food: string) {
        console.log(`${this.name} like ${food}`)
    }
}

var wollens = new Male("wollens", "male");
wollens.say();
wollens.eat("fish")

// 实现一个类继承 + 接口继承
class Child extends Male implements Person {
    age: number;
    constructor(name: string, gender: string, age:number) {
        super(name, gender);
        this.age = age;
    }

    say() {
        console.log(`hello ${this.name}`)
    }

    eat(food: string) {
        console.log(`${this.name} like ${food}`)
    }    
}

var body = new Child("Mile", "male", 12);
body.say();
body.eat("milk");