接口

定义接口

interface lable {
  label: string;
}
function printLabel(obj: lable) {
  console.log(obj);
}
let obj = {
  size: 10,
  label: 'hello',
};
// 有多余属性，不报错，因为obj已经是字面量声明了
printLabel(obj);
// 类型“{ size: number; label: string; }”的参数不能赋给类型“lable”的参数。
printLabel({
  size: 10,
  label: 'hello',
});

额外参数检查

interface Square {
  color: string;
  area: number;
}
function crateSquare(config: SquareConfig): Square {
  let newSquare = {
    color: 'red',
    area: 100,
  };
  if (config.color) {
    newSquare.color = config.color;
  }
  newSquare.area = config.width * config.width;
  return newSquare;
}
// error:对象文字可以只指定已知属性，并且“xxx”不在类型“SquareConfig”中。
crateSquare({
  color: '#ccc',
  width: 10,
  // xxx:false
});

解决方法:

• 方式一：参数先用一个对象字面量声明一下

  const config = {
  color: '#ccc',
  width: 10,
  xxx: false,
  };
  crateSquare(config);

• 方式二：修改接口，添加任意属性 [propName:string]:any ```typescript interface SquareConfig { color?: string; width: number; // 任意属性

}

-  方式三：使用类型断言 as 
```typescript
crateSquare({
  color: '#ccc',
  width: 10,
  xxx: false,
} as SquareConfig);

• 方式 4：修改接口，添加额外的参数定义（推荐）

可选属性

interface Animal {
  sex?: string;
}

只读属性

readonly

interface Animal {
  readonly sex: string;
  age: number;
}
var animal: Animal = {
  sex: 'male',
  age: 20,
};
// error：只读属性不能修改
// animal.sex = 'famale'

只读数组

var arr: ReadonlyArray<number> = [1, 3, 4];
// arr.push(23) 报错，不能修改

用接口定义函数

interface Search {
  // 注意不是=> 是冒号:
  (source: string, subStr: string): boolean;
}
const searchStr: Search = function (src, subStr) {
  return src.search(subStr) > -1;
};

函数的其他定义方式

• 方式一

  function test(a: string): string {
  return a;
  }

• 方式二

  type TestFun = (a: string) => string;
  const test2: TestFun = function (a) {
  return a;
  };

索引签名

TypeScript 支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number 来索引时，JavaScript 会将它转换成 string 然后再去索引对象。 也就是说用 100（一个 number）去索引等同于使用’100’（一个 string ）去索引，因此两者需要保持一致。

• 数字索引签名

 interface numArr {
    [index:number]:string
  }
  let numberArr:numArr = ['string1','string2']

• 字符串索引签名,描述为字典模式
  索引签名的名称（如：{ [index: string]: { message: string } } 里的 index ）除了可读性外，并没有任何意义。例如：如果有一个用户名，你可以使用 { username: string}: { message: string }，这有利于下一个开发者理解你的代码。

interface stringObj {
  [age: string]: number;
}
let stringO: stringObj = {
  key: 111,
};

只读索引签名

interface ReadOnlyStringDictionary {
  readonly [x: string]: number | string;
}
var StrDic: ReadOnlyStringDictionary = {
  a: 20,
};
// 类型“ReadOnlyStringDictionary”中的索引签名仅允许读取
// StrDic.a = 30 // 不允许d

类实现接口

• 实例接口

interface IClock {
  time: Date;
  setTime(date: string): void;
}

• 构造器接口：
  不能直接使用类实现，可作为一个参数传入

  interface IClockConstructor {
  new (year: string, month: string): IClock;
  }

  
  使用构造器接口：

接口继承

interface Shape {
  color: string;
}
interface Polygon {
  area: string;
  fill(color: string): void;
}
// 接口继承
interface Circle extends Shape {
  width: number;
}

可同时继承多个接口，用,隔开

interface Square extends Shape, Polygon {
  width: number;
}

混合类型接口

因为 JavaScript 其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型，比如：一个对象可以同时做为函数和对象使用

interface Counter {
  (start: number): string;
  inteval: number;
  reset(): void;
}
function getCounter(): Counter {
  let counter = function (start: number) {
    console.log(start);
  } as Counter;
  counter.inteval = 100;
  counter.reset = function () {};
  return counter;
}
const c = getCounter();
c(10);
c.reset();

接口继承类

class Animal {
  private type: any;
}
// 接口继承类，会继承类的所有属性，包括私有属性
interface IDog extends Animal {
  run(): void;
}
class Hashiqi extends Animal implements IDog {
  run() {
    console.log('run');
  }
}
class Jinmao extends Animal {
  run() {}
}

实现继承类的接口 IDog，需要实现类 Animal 的属性，但是 Taidi 不是 Animal 的子类，所以实现不了。
需要像类 Hashiqi 一样继承类+实现接口。

// error:类型 "Taidi" 中缺少属性 "type"，但类型 "IDog" 中需要该属性
class Taidi implements IDog {
  // private type:any 写也报错，不写也报错
  run() {}
}