TypeScript---接口(interface)

接口定义

使用接口声明的变量的值一定要包含接口里面必要的内容

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

如果属性可不传 用 ?: 代替 :

interface SquareConfig {
  color?: string;
  width?: 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"});

只读属性 在属性前加readonly（不可以改值）

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

ReadonlyArray<T> 不可以在改值，也不可以作为值赋值给其他变量

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
// 赋值到一个普通数组也是不可以的
a = ro; // error!
// 但是可以断言重写
a = ro as number[]

额外的属性检查

当直接 作为参数传递 和直接赋值给变量时，会进行额外属性检查，当队形字面量存在‘目标类型’不包含的属性时，你会得到错误
解决方法如下：

// colour 是 SquareConfig  不存在的属性
interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
    return {color: 'string', area: 1}
}
let mySquare = createSquare({ colour: "red", width: 100 });

// 1.使用类型断言
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig)
// 2.添加一个字符串索引签名
interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}
// 3. 对象赋值给一个另一个变量
let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

函数类型接口

参数按照定义顺序 进行检查（无需参数名相同）,返回类型必须定义

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

let  mySearch: SearchFunc = function(sou: string, sub: string) {
  let result = sou.search(sub);
  return result > -1;
}
console.log(mySearch('aa','aabbbcc'))

可索引的类型

1. 数组用 number类型

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

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

2. 对象 可用 number 和string 类型
   但是 因为在对象中所有键值都会转换成 string ，
   当索引名 为可变名时 [index:string]:string，应该与已经定义好的同等类型索{name：string}返回的值 保持一致

// 当索引名 为可变名时 ，应该与已经定义好的同等类型索引 返回的值   保持一致
interface NumberDictionary {
  [index: `string`]: string;
  length: number;    // 可以，length是number类型
  name: `string       `// 错误，`name`的类型与索引类型返回值的类型不匹配
}
//索引签名设置为只读，这样就防止了给索引赋值

类类型

定义interface
使用implements 接入接口时只检测 实力部分

interface ClockInterface {
    currentTime: Date;// 属性
    setTime(d: Date);// 方法
}
class Clock implements ClockInterface {
    currentTime: Date; 
    setTime(d: Date) { 
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。
一个类实现了一个接口时(implements)，只对其实例部分进行类型检查,constructor存在类的静态部分 不在检查范围

	// 检测 实例
    interface newInter {
      new (h: number, m: number): pInter;
    }
    //检查构造函数
    interface pInter {
      h: number;
      tick(): any;
    }
    class newClass implements pInter {
      h: number;
      constructor(h: number, m: number) {
        this.h = h;
      }
      tick() {
        console.log("beep beep");
      }
    }
    function fun(className: newInter, hour: number, minute: number) {
      return new className(hour, minute);
    }
    let p = fun(newClass, 1, 2);
    console.log(p.h, "p.h");

继承接口

interface Shape {
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

混合

既可以比表示函数 也可表示对象

interface Counter {
      (start: number): string;
      interval: number;
      reset(a:string): void;
    }

    function getCounter(): Counter {
      let counter  =function(start: number) {} as Counter;
      counter.interval = 123;
      counter.reset = function(a:string) {};
      return counter;
    }

    let c = getCounter();
    console.log(c,c.interval,c.reset)
    c(10);
    c.reset('aaa');
    c.interval = 5.0;

接口继承类

class Control {
    private state: any;
}
interface SelectableControl extends Control {
    select(): void;
}
class Button extends Control implements SelectableControl {
    select() { }
}
class TextBox extends Control {
    select() { }
}
// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}