TypeScript：接口

什么是接口

TS的核心原则之一就是对值所具有的结构进行类型检查。TS里面接口的作用就是为这些类型命名 和 为你的代码 或 第三方代码定义契约。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

 

printLabel有一个参数，类型检查器会要求这个对象参数有一个名为label类型为string的属性。 注意：我们传入的对象参数可能会包含很多属性，但编译器只会检查那些必需的属性是否存在，以及其类型是否匹配。

接下来，我们用接口来约束参数的类型结构（对象的形状）：

1. 只关注值的外形， 只要传入的对象满足提到的条件，那么它就是被允许的。

2. 对象是无序的：类型检查器不会去检查属性的顺序，只要相应的属性存在且类型是对的就可以。

interface labelledVale{
    label:string;
    size:number;
    show?:boolean;
}
function printLabel(labelledObj: labelledVale) {
    console.log(labelledObj.label);
}

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

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"});

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。好处：

1. 可以对可能存在的属性进行预定义；

2. 可以捕获引用了不存在的属性（往往是无意之中敲错的代码）时的错误；

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

注：TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。

readonly vs const：做为变量使用的话用 const，若做为属性则使用readonly。

interface Box{
    color:string,
    width?:number,
    readonly positon:string,
    readonly bgc?:string
}

let b1:Box={
    color:"red",
    width:20,
    positon:"relative"
}
b1.color="blue"

*如果b1是用const修饰就不能修改

 

对象接口

interface dog{
    age:number,
    name:string,
    color?:string
}
let d1:dog;
d1={
    age:100,
    name:"hello",
    color:"red"
}
// d1={
//     age:200,
//     name:90//报错 name不能是number类型
// }