TypeScript：接口（interface）属性的定义

在TypeScript里，接口扮演了一个定义数据结构的角色，它在TypeScript的类型检查中起到很重要的作用。

基本用法

匿名定义

sayHello(person: {name:string}) {
    console.log(person.name + ", 您好！");
}

这是一个很简单的例子，它使用匿名的方式定义了一个只有属性名为name，类型为string的接口。

TypeScript会对传给sayHello的数据做类型检查，只接收包含了name属性的对象。

显式定义

使用关键词interface可以显式定义接口，上面的例子可以改为：

interface Person {
   name: string;
}

sayHello(person: Person) {
  console.log(person.name)
}

定义属性使用冒号(:)分割，冒号前为属性名，冒号后为属性类型。 例子里name为属性名，string为属性类型。

接口的实现与使用

隐式实现

let person = {name:"张三", age: 19}
sayHello(person);  //输出  张三，您好

TypeScript不同于Java等一些语言，接口的实现不需要显式继承于接口，它只要满足了接口定义的属性即可。

这个示例里，person没有显式继承Person接口，因为它包含了属性name，且类型为string，person变量符合Person接口的，所有它会通过TypeScript的类型检查。

显式实现

class使用implements关键词实现接口。

class Student implements Person {
  name: String;
  age: number;
}

属性

接口的属性可以是可选的，也可以是只读。

可选属性

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});

在属性名后加上问号（?）的属性为可选属性。

接口并非是所有的属性都是必需的，它允许接口里的一些属性不被赋值或接口的实现对象没有此属性。

在使用可选属性时，有些情况需要对属性进行判断，以便检测属性是否存在或是否有值。

只读属性

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

使用关键词readonly来声明只读属性。只读属性，顾名思义，属性是不允许被重新赋值，只允许读取它的值。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

注意：这里要区分一下readonly和const的使用，变量使用const，属性使用readonly。