11 一文搞定interface所有用法

202 阅读1分钟

interface 的显著特点是什么?

可扩展

interface Dom {
  type: string
}

interface Dom {
  name: string
}

const dom: Dom = {
  type: 'ele',
  name: 'div'
}

与declare联合使用的效果?

declare 只能出现在 .d.ts 后缀结尾的文件中,作用是在typescript全局编译作用域中声明了一个全局的类型变量,

declare var hi: any;

// 其他文件可以直接使用 process
hi.version

一般在 .d.ts 文件中考虑到类型的可扩展性,都会通过 interface 声明类型变量,完了通过 declare暴露到类型系统全局

// Lib a.d.ts
interface Point {
    x: number; y: number;
}
declare var myPoint: Point;

// Lib b.d.ts
interface Point {
    z: number;
}

// 可以读取扩展的属性
var myPoint.z; 

implements 限制 class ?

通过 implements 限制 class

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

  class MyPoint implements Point {
    x!: number;
    y!: number; // 必须和Point声明的相同
  }

abstract 是通过 extends

interface 间通过 extends 实现继承

  
  interface Mover {
    move(): void;
    getStatus(): { speed: number; };
   }
   interface Shaker {
    shake(): void;
    getStatus(): { frequency: number; };
   }
  
   interface MoverShaker extends Mover, Shaker {
    getStatus(): { speed: number; frequency: number; };
   }

callable可执行的函数声明?

interface ReturnString {
  (): string
}

const hi: ReturnString = () => 'hi'

Overloaded 函数的重载

  interface ReturnOverload {
    (str: string): string
    (num: number): number
  }
  
  function hi(params: string): string;
  function hi(params: number): number;
  function hi(params: any):any {
    if(typeof params === 'string') {
      return 'hi'
    } else {
      return 1
    }
  } 
  
  let hiFn: ReturnOverload = hi
  

newable 构造函数的声明 ?

interface CallMeWithNewToGetString {
  new(): string
}
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo();

自定义迭代器

  // Symbol.iterator
  interface Iterable<T> {
    [Symbol.iterator](): Iterator<T>;
  }

  var myIterable: Iterable<number> = {
    [Symbol.iterator]: function* () {
      yield 1;
      yield 2;
      yield 3;
    }
  };
  [...myIterable]; // [1, 2, 3]

标注废弃属性

对于一些废弃的api可以通过 @deprecated 进行标注说明

  // 标注废弃属性
  interface Deprecated {
    /**
     * @deprecated
     */
    history?: string;
    name: string
  }

  const {
    history,
    name
  } : Deprecated = {
    history: 'deprecated',
    name: 'valid'
  }