Typescript 接口

119 阅读1分钟

interface

// 基本使用
interface InfoType {
  age?: number; // 选填
  readonly name: string; // 只读
}

const info: InfoType = {
  name: 'cqc',
  age: 23,
};

定义索引类型

// 希望该对象 key: number  value:string
interface IndexKey {
  [index: number]: string;
}

const fontLanguage: IndexKey = {
  0: 'HTML',
  1: 'JAVASCRIPT',
  2: 'CSS',
  // cqc: 'xxx', // 报错
};

定义函数类型

type CalcFnType = (n1: number, n2: number) => number;
interface CalcFnInterface {
  (n1: number, n2: number): number; // 效果和 CalcFnType 一样
}

function calcAdd(n1: number, n2: number, calcFn: CalcFnInterface ) {
  ...
}

interface 继承

interface ISwim {
  swimming: () => void;
}

interface IEating {
  eating: () => void;
}

// 可以通过逗号隔开实现多继承
interface IAction extends ISwim, IEating {}

const action: IAction = {
  eating() {},
  eating() {},
};

交叉类型 &

interface ISwim {
  swimming: () => void;
}

interface IEating {
  eating: () => void;
}

interface MyInterface extends ISwim, IEating {}
type MyType = ISwim & IEating; // 效果 MyInterface 一个对象内必须同时满足 ISwim IEating
type MyType2 = ISwim | IEating; // 一个对象内必须满足 ISwim IEating 之一