接口是一系列形象办法的申明,是一些办法特色的汇合,这些办法都应该是形象的,须要由具体的类去实现,而后第三方就能够通过这组形象办法调用,让具体的类执行具体的办法。

一、初识

interface Item { // 定义一个item接口  id: number,  title: string}function renderList(item: Item) {  console.log(item.id, item.title); // 1 hello}renderList({id: 1, title: 'hello'});
PS:为什么以函数为第一个示例呢?次要是接口在日常的应用大多用来做函数参数应用

二、接口数据类型演示

enum Type {  Yes = 1,  No = 0}interface Item {  id: number, // 数字  title: string, // 字符串  status: boolean, // 布尔值  gender: Object, // 对象  girlfriend: null, // null  future: undefined, // undefined  favorites: string[], // 字符串数组  plan: [string, number], // 元组  type: Type, // 枚举  callback: ()=>string, // 返回字符串的回调函数  // callback(): string, // 函数的另一种写法  content: any // 任意}function renderList(item: Item): void {  console.log(item, item.callback());}renderList({  id: 1,  title: 'hello',  status: true,  gender: {1: '男', 0: '女'},  girlfriend: null,  future: undefined,  favorites: ['game', 'movie'],  plan: ['得分', 100],  type: Type.Yes,  callback: () => {    return '123123';  },  content: '这是一个内容'});

三、是否可选

默认属性都是必须的,如果要改成可选的加个?就行了

interface Item {  id: number  title?: string,}function renderList(item: Item): void {  console.log(item);}renderList({  id: 1});

四、只读属性

在属性前增加readonly修饰符即可表明只读

interface Item {  id: number,  readonly title: string}let item: Item = {id: 1, title: 'hello'}item.title = 'world' // 报错

五、接口继承

应用关键字extends来实现接口继承

interface Shape {  color: string;}interface Square extends Shape {  size: number;}let square = <Square>{};square.color = "blue";square.size = 4;// 或// let square: Square = {//   color: "green",//   size: 2// }console.log(square);

六、接口实现

应用关键字implements来实现接口继承

interface ClockInterface {  currentTime: Date;}class Clock implements ClockInterface {  currentTime: Date = new Date();    constructor(h: number, m: number) {    console.log(h, m, this.currentTime);  }}let clock = new Clock(8, 10);

七、多种属性类型

如果想要一个属性有几个类型,能够加个|距离

interface Shape {  type: number|string;}let shape = <Shape>{};// shape.type = 1;shape.type = '1';console.log(shape.type)

八、可索引

次要用来针对数组接口实现

interface StringArray {  [index: number]: string;}let myArray: StringArray;myArray = ["Foo", "Bar"];let myStr: string = myArray[0];console.log(myStr)

九、混合类型

事实生产可能须要一个对象能够同时做为函数和对象应用,并带有额定的属性,这时就能够应用混合类型

interface Counter {  (start: number): string;  interval: number;  reset(): void;}function getCounter(): Counter {  let counter = <Counter>function (start: number) {    return `开始工夫为:${start}`;  };  counter.interval = 123;  counter.reset = function () { };  return counter;}let c = getCounter();console.log(c(10)); // 开始工夫为:10c.reset();c.interval = 5.0;

欢送关注:https://fenxianglu.cn/

参考链接:

  • https://www.tslang.cn/docs/ha...