TypeScript入门（二）接口的使用

接口的定义

interface IPerson {
 name:string,
 age:number
}

//缺少 接口中的属性时会报错
let person:IPerson{
 name:'Cooper',
 age:18
}

可选属性

interface IPerson {
 name:string,
 age:number,
 address?:string
}
let person:IPerson{
 name:'Cooper',
 age:18,
 address:'xxxx'   // 不写也可以
}

只读属性

interface IPerson {
 readonly name:string,
 readonly age:number,
 address?:string
}

let person:IPerson{
 name:'Cooper',
 age:18,
 address:'xxxx'
}
person.name = 'hjahh'  // 报错

额外属性

interface IPerson {
 readonly name:string,
 readonly age:number,
 address?:string,
 [propName:string]:string|number|any  // 改属性必须要包含以上的类型  可以直接写any类型
}

let person:IPerson{
 name:'Cooper',
 age:18,
 address:'xxxx',   // 不写也可以
 aaa:'sssss'
}

接口定义函数类型

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
};

定义数组

interface StringArray {
  [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

定义类

interface ClockInterface {
  currentTime: Date;
}
class Clock implements ClockInterface {
  currentTime: Date = new Date();
  constructor(h: number, m: number) {}
}   // constructor 为静态属性   ts不会检查 所以在定义接口时不用定义constructor

接口扩展

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

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

let shape:Square = {
  color:"#ffffff",
  penWidth:5,
  sideLength: 10;
}

其他语法可见文档：https://bosens-china.github.io/Typescript-manual/download/zh/handbook/interfaces.html#介绍