TS中的接口

本文目录：

• 1.接口的概念
• 2.可选属性和只读属性
• 3.任意属性
• 4.函数类型
• 5.可索引属性
• 6.类接口
• 8.接口继承接口
• 9.接口继承类
• 10.类实现（implements）接口

1.接口的概念

• 是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）
• 在TypeScript中，我们使用接口（Interfaces）来定义对象的类型。除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述
  • TypeScript`的核心原则之一是对值所具有的结构进行类型检查， 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

interface Animal {
   color: string;
   height: number;
}

赋值的时候，变量的形状必须和接口的形状保持一致

const labelVal: Animal = {
   color:'灰色';
   height: 56
};

2.可选属性和只读属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性

interface Person {
  name: string;
  age: number;
  car?: string;
}
let Lucy: Person = {
  name: 'Lucy Lucy',
  age: 18,
  // car: '宝马'
  // house: '别野'
};

可选属性的含义是该属性可以不存在 例如我们的car属性.但仍然不允许添加未定义的属性 例如上面的house属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性
使用场景：const作为变量使用和readonly作为属性使用

interface Point {
  readonly x: number;
  readonly y: number;
}
let p1: Point = { x: 10, y: 20 };

p1.x = 5; 这样就会报错， 说不能分配一个X值，因为它是只读属性
关于这里的 let和const的写法 最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly

3.任意属性

一个接口可能需要它除了具有我们需要的属性以为，还可以包含任意的其他属性，这时就要用到任意属性
只要使用了任意属性，就要保证确定属性和可选属性的类型都必须是它的类型的子集

interface Person {
  name: string;
  age?: number;
  // 这种方式也叫 字符串索引签名
  // [propName: string]: any;
  [propName: string]: number | string;
}
let tom: Person = {
  name: 'Tommy',
  // age: 20,
  addr: '北京'
};
console.log(tom);

上例中 任意属性的值允许的是string， 但可选属性age的值确实number， number不是string类型的子属性，所以编译报错。应该将上例的任意属性 变换为 [propName: string]: any; 或者是 number|string，这样的话addr也都不会报错。

4.函数类型

• 接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。
• 函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的(通俗的讲就是函数调用和函数接口定义的参数位置和都必须一一对应)

之前我们在学习函数的时候给大家提过一点，函数也是一种数据类型，我们也可以通过接口的形式定义一个函数类型
函数表达式的方式定义add，add在此时是通过类型推断的方式被动的被定义为函数类型

let add = function(x: number, y: number): number {
  return x + y;
};
add(1, 2);

接下来通过手动的方式将add1定义为函数类型：

let add1: (x: number, y: number) => number = function(x: number, y: number): number {
  return x + y;
};
add1(1, 2);

上面代码的最大缺点是不方便进行复用
现在使用函数类型接口进行更优雅和更易复用的定义：

interface MyTypeFn {
  (x: number, y: number): number;
}
let add2:MyTypeFn; 
add2= function(x: number, y: number): number {
  return x + y;
};
add2(1, 2);

5.可索引属性

• 与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap["daniel"]
• 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型

下面接口里的代码表示索引是数字， 通过索引访问对象里面的值返回数字类型

interface MyIndex {
  [index: number]: number;
}
let arr1: MyIndex;
arr1 = {
  0: 1,
  1: 2
};
let arr2: MyIndex;
arr2 = [2, 3];

arr1和arr2都是正常的，这代表MyIndex接口类型，定义的数据有两种方式实现，一个是对象一个是数组
下面接口里的索引是字符串， 通过索引访问对象里面的值返回字符串类型

interface MyIndex1 {
  [index: string]: string;
}
let arr2: MyIndex1;
arr2 = {
  '0': 'red',
  '1': 'blue'
};

TypeScript支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是要注意：
数字索引的返回值必须是字符串索引返回值类型的子类型或者相同；因为obj[100]等同于obj['100']（obj[100]会被自动转换为obj['100']）

class Animal {
  name: string;
}
class Dog extends Animal {
  breed: string;
}
let c1 = new Dog();
let c2 = new Animal();
// 错误：使用数值型的字符串索引的返回值Animal不是 使用字符串索引y的返回值Dog  的派生类类， 而是基类
interface NotOkay {
   // [Index: number]: Animal;  //number索引的返回值  一定要是 string索引返回值得 派生类或者相同类
   [Index: number]: Dog; 
   [Index: string]: Animal; // 这里写Dog也可以， 相同或者基类都是可以的，另外把这里的Index改为x其他字符都是可以的，这里的Index只是起到一个标识的作用
}
let a1: NotOkay = {
  2: c1,
  age: c2
};

6.类接口

类定义会创建两个东西：类的实例类型和一个构造函数。 因为类可以创建出类型，所以你能够在允许使用接口的地方使用类

class Point {
    x: number;
    y: number;
}
interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};

7.泛型接口

使用泛型接口， 可复用的支持任意传入参数
和我们之前学过的函数类型接口有点相似

let fn3 = function(x: string, y: string): string[] {
     return [x, y];
};

上面的fn3函数的类型我们没有定义，是利用的 类型推论自动获取的，现在使用接口来定义一个符合我们这个函数需要的形状。并且声明一个带类型的函数fn3

interface MyFn {
     (x: string, y:string): string[]
}
let fn3:MyFn;

这个类型再修改一下，增加接口的复用性，将参数string换成动态的，由使用者决定；那么我们就需要使用泛型

interface MyFn {
     <T>(x: T, y: T):T[]
}
let fn3:MyFn;

到这里我们的这个函数接口形状就已经完成，还可以将泛型参数提升到我们的接口名称上

interface MyFn<T> {
     (x: T, y:T): T[]
}
let fn3:MyFn;

到这里我们的函数类型就可以传入任意类型的值，这个接口形状可复用性就更高了

8.接口继承接口

和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里

interface Animal {
  color: string;
}
interface Dog extends Animal {
  bodyLength: number;
}
let mydog: Dog = <Dog>{};
mydog.color = 'blue';
mydog.bodyLength = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口

interface Animal {
  color: string;
}
interface Dog {
  bodyLength: number;
}
// angular里面大量的使用类继承自多个内置类
interface GreyDog extends Animal, Dog {
  only: string;
}
let mydog: GreyDog = <GreyDog>{};
mydog.color = 'blue';
mydog.bodyLength = 10;
mydog.only = '我的阿黄';

9.接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现；就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样

class Animal {
   name: string;
   // move: (x: string, y: number) => string;
   move() {
       console.log(123);
   }
}
interface Dog extends Animal {
  eat(): void;
}
let d1: Dog = {
  name: '阿黄',
  move() {
    console.log(456);
   },
   // move(x: string, y: number) {
   //   console.log(123);
   //   return x;
   // },
   eat() {
     console.log(123);
   }
 };

10.类实现（implements）接口

TypeScript能够用它来明确的强制一个类去符合某种契约
实现（implements）
是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性; 这个implements在angular里面也有大量的使用

interface Alarm {
   // 定义一个公用的方法，具体的实现在实现的类里面去实现
   warning():void;
}
class Door implements Alarm {
   warning() {
     console.log('门报警器');
   }
}
class Car implements Alarm {
   warning() {
     console.log('车报警器');
   }
}
class Baoma extends Car implements Alarm {
   warning() {
     console.log('宝马车报警器');
   }
}

这个案例里面 车和门都有报警功能，所以将这个公共的功能抽离出来封装为一个接口
需要这个功能的类比如Car Door Baoma 等去实现这个接口 implements即可
要注意的是在接口里面是方法的签名，在类里面进行方法体的实现

let d1 = new Door();
let c1 = new Car();
let b1 = new Baoma();
d1.warning();
b1.warning();

这个打印只有两个属性； warning这个方法是绑定在构造函数Baoma的原型对象prototype上面的，可以在浏览器里面查看

console.log(b1);