ts基础—接口

学习ts时，以后自己看的笔记，在这记录一下。

1.1 对值所具有的结构进行检查

// 对值所具有的结构进行检查
interface LabelValue {
  label: string
}

function printLabel (obj: LabelValue) {
  console.log(obj.label)
}

let myObj = {
  label: 'label',
  size: 5
}

printLabel(myObj)

1.2 可选属性

interface Something {
  area: number
}

interface Config {
  width?: number // 可选属性 可有可没有
  height?: number // 可选属性 可有可没有
}

function createThing (config: Config): Something {
  let result = {
    area: 100
  }

  if (config.width && config.height) {
    result.area = config.width * config.height
  }

  return result
}

let myConfig = {
  width: 100
}

createThing(myConfig)

1.3 只读属性

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

// 创建后p1就不可以改变了
let p1:Point = {
  x: 10,
  y: 1
}

p1.y = 5 // 飘红

可以利用ts提供的ReadonlyArray，使数组不能被改变

let a: number[] = [1,2,3,4]

let ro:ReadonlyArray<number> = a

ro.push(1) // 飘红

1.4 额外属性检查

interface LabelValue {
  label: string
  color?: string
}

function printLabel (obj: LabelValue) {
  console.log(obj.label)
}
 
// 有时候我们需要传入额外的属性，此时ts会报错
printLabel({size: 1, label: '1'})

可以这样解决

interface LabelValue {
  label: string
  color?: string
  // 可以有任意的属性
  [propName: string]:any
}

function printLabel (obj: LabelValue) {
  console.log(obj.label)
}
 
// 这样就不会报错
printLabel({size: 1, label: '1'})

或者把对象赋值到一个变量里面，然后再传入，就不会飘红了，就比如1.1中的例子。

1.5 函数类型

描述函数

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

let search: SearchFunc

search = (str, substr) => {
  let result = str.search(substr) 
  return result > -1
}

1.6 可索引类型

描述可通过索引得到的类型

interface strArray {
  [index: number]: string
}

let array:strArray = ['1', '2', '3']

console.log(array[0])

1.7 类类型

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

class Clock implements ClockInterface {
  currentTime: Date;

  constructor(h: number, m: number) { }

  setTime(d: Date) {
    this.currentTime = d;
  }
}

1.8 继承接口

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;

1.9 混合类型

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

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

1.10 接口继承类

class Control {
    private state: any;
}

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

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}