接口使用的几种表现形式:

一、可选属性,只读属性;

interface SquareConfig {
 color?: string;  //可选属性
 width?: number;  //可选属性
 readonly x: number; //只读属性
 readonly y: number;  //只读属性
}

function createSquare(config: SquareConfig): {color: string; area: number} {
 let newSquare = {color: "white", area: 100};
 if (config.color) {
   newSquare.color = config.color;
 }
 if (config.width) {
   newSquare.area = config.width * config.width;
 }
 return newSquare;
}

let mySquare = createSquare({color: "black"});

二、函数类型

interface SearchFunc {
 (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
 let result = source.search(subString);
 if (result == -1) {
   return false;
 }
 else {
   return true;
 }
}

三、可索引的类型

interface StringArray {
 [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

四、接口继承

interface ClockInterface {
   currentTime: Date;
   setTime(d: Date);
}

class Clock implements ClockInterface {
   currentTime: Date;
   setTime(d: Date) {
       this.currentTime = d;
   }
   constructor(h: number, m: number) { }
}

五、扩展接口

interface Shape {
   color: string;
}

interface PenStroke {
   penWidth: number;
}

interface Square extends Shape, PenStroke {
   sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

五、接口继承类

class Control {
   private state: any;
}

interface SelectableControl extends Control {
   select(): void;
}

class Button extends Control {
   select() { }
}
class TextBox extends Control {
   select() { }
}
class Image {
   select() { }
}
class Location {
   select() { }
}

上一篇:TypeScript学习笔记2:基础类型

下一篇:TypeScript学习笔记4:类