6.接口

TypeScript 中的接口是用来描述对象的形状（shape）的一种方式。通过接口，可以定义对象应该具有的属性和方法，并在需要的地方进行类型检查。

• 函数接口参数

1. 我们可以约束函数中的参数，但是类型无法复用
2. 我们可以通过接口进行描述

interface PerSonName {
  firstName: string,
  lastName: string
}
function myName({ firstName, lastName }: PerSonName): string {
  return firstName + lastName
}
console.log(myName, 'myName')

• 函数类型接口

1. 通过接口限制函数的参数类型和返回值类型

interface PerName1 {
  (firstname: string, lastname: string): string
}

let myName1: PerName1 = (firstName, lastName) => {
  return firstName + lastName
}
myName1('1', '2')

• 混合函数接口类型

interface Counter {
  (): number;
  increment(): void;
}

function createCounter(): Counter {
  let count = 0;

  function counter(): number {
    return count;
  }

  counter.increment = function() {
    count++;
  };

  return counter;
}

const myCounter = createCounter();

console.log(myCounter()); // 输出：0
myCounter.increment();
console.log(myCounter()); // 输出：1

• 对象接口

1. ？标识的属性为可选属性, readOnly标识的属性则不能修改。多个同名的接口会自动合并

interface IVegetables {
  readonly color: string,
  size: string
}
interface IVegetables {
  age?: number,
  taste: 'sour' | 'sweet'
}
const tomato: IVegetables = {
  color: 'red',
  size: '10',
  taste: 'sour'
}
tomato.color = 'green'; // 仅读属性不能进行修改

const tomato1: IVegetables = {
  color: 'red',
  size: '10',
  taste: 'sour',
  type: '蔬菜'
}; // 多余的属性可以使用类型断言

• 任意属性、可索引接口

interface PersonOrName {
  name: string,
  [key: string]: string
}
let p: PersonOrName = {
  name: 'zhufeng',
  age: 10,
  [Symbol()]: '回龙观',
  1: 1
}

// 可索引接口
interface IArr {
  [key: number]: any
}
let p1: IArr = {
  0: '1', 1: '2', 3: '3'
}
let arr: IArr = [1, 'd', 'c']; 1

• 类接口

1. 一个类可以实现多个接口，在类中必须实现接口中的方法和属性

interface Animal {
  name: string;
  eat(food: string): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat(food: string): void {
    console.log(`${this.name} is eating ${food}.`);
  }
}

const myDog = new Dog('Buddy');
console.log(myDog.name); // 输出：Buddy
myDog.eat('bone'); // 输出：Buddy is eating bone.

• 接口继承

interface Shape {
  color: string;
}

interface Circle extends Shape {
  radius: number;
  getArea(): number;
}

class MyCircle implements Circle {
  color: string;
  radius: number;

  constructor(color: string, radius: number) {
    this.color = color;
    this.radius = radius;
  }

  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}
const myCircle = new MyCircle('red', 5);
console.log(myCircle.color); // 输出：red
console.log(myCircle.radius); // 输出：5
console.log(myCircle.getArea()); // 输出：78.53981633974483

• 构造函数接口

interface Clazz {
    new (name:string):any
}
function createClass(target:Clazz,name:string){
    return new target(name); // 传入的是一个构造函数
}
class Animal {
    constructor(public name:string){
        this.name = name;
    }
}
let r = createClass(Animal,'Tom');

这里无法标识返回值类型

interface Clazz<T> {
    new(name: string): T
}
function createClass<T>(target: Clazz<T>, name: string):T {
    return new target(name)
}
class Animal {
    constructor(public name: string) {
        this.name = name;
    }
}
let r = createClass(Animal, 'Tom');

1. 这里泛型T为类型 Animal
2. new() 表示当前是一个构造函数类型,这里捎带使用了下泛型。 在使用createClass时动态传入类型。