21-ts中的接口

TypeScript中的接口

TypeScript中接口的基本使用

​ 接口可以理解为一个规范，当我们需要的限制传入的参数具有什么样的值时，我们可以使用接口来规范传入的参数对象，例如下面的代码中，声明了一个AjaxOptions接口，其中有四个属性。我们要在ajax函数中限制其传入的参数必须有这四个属性的时候我们就可以让该参数继承AjaxOptions接口。然后我们再调用ajax函数时传入的参数就必须有该四个属性，否则就会报错。

// 使用interface声明AjaxOptions接口
interface AjaxOptions{
     url: string,
     type: string,
     data: object,
     success(data: object): void
}

// option参数中 需要包含 url type data success
 function ajax(options: AjaxOptions) {
    
 }

 ajax({
     url: "http://www.baidu.com",
     type: "get",
     data: {},
     success(data) {
        
    }
})

​ 我们在使用官方ajax方法的时候发现有些方法是可选的，即传入的参数可以有对应四种的属性，也可以没有其中的一些属性。那么我们如何在typescript中实现这个可选属性呢？在typescript中直接在定义接口中的可选属性名后加？就可以了。

// 使用interface声明AjaxOptions接口
interface AjaxOptions{
    url: string,
     // 给属性加上？之后，这个属性就是可选的！
     type?: string,
     data?: object,
     success(data: object): void
}

// option参数中 需要包含 url type data success
 function ajax(options: AjaxOptions) {
    
 }

 ajax({
     //此时我们不传入tyoe属性和data属性也是可以的
     url: "http://www.baidu.com",
     success(data) {
        
    }
})

TypeScript接口中的只读属性

​ 在接口定义的时候我们可以在该属性前添加readonly关键字将其设置为只读属性，该属性的值只能在初始化的时候改变，其他情况下只允许读取，不允许改变。

interface Point{
    readonly x: number,
    readonly y: number,
}

let poi: Point = {
    x: 10,
    y: 10
}

// poi.x = 100; //这样会报错，因为xs属性是只读属性，不能重新赋值

TypeScript接口中的额外类型检查

​ 上面我们讲到接口继承后需要只能传入规定好的参数，但我们开发中有时候希望我们能传入更多的参数，此时我们可以使用接口中的额外类型检查。具体的语法是 ：

interface 接口名{
	属性1：数据类型，
    属性2，数据类型，
    [额外检查属性名：数据类型]:any
}

示例代码如下：

interface Point{
    readonly x: number,
    y: number,
    [propName: string]: any
}

let poi: Point = {
    x: 10,
    y: 10
}

// poi.x = 100;

let poi1: Point = {
    x: 10,
    y: 10,
    //此时我们在写多一个z属性的时候就不会报错了
    z: 100
}