TS-接口与类

接口

interface labelValue {
  label : string // 接口里面有一个label属性，且为字符串类型
}
function printLabel2(obj: labelValue) { // 规定传参的类型是这个接口的属性
  console.log(obj.label)
}

printLabel2(myObj) // 通过调用传参，只要有一个参数跟接口里面的属性名和类型相同，就会打印

duck-typing特性（鸭子类型）

• 检验两个比较的对象是否具有相同的属性及类型，b是否包含a
• 如person与Person的比较，虽然person的属性数量大于Person，但是person具有Person的所有属性且类型相同，所以，检验过程成功

  interface Person {
    name: string
    age: number
    sex: number
  }
  
  const person = {
    name: 'schnuffel',
    age: 18,
    sex: 1,
    msg: '1231312312'
  }
  
  const testFunc = (param: Person) => {
    return param
  }
  
  testFunc(person)

可选、只读属性：

interface SquareConfig {
  color?: string // 可选属性
  readonly y: number // 只读属性
}
function createSquare(config: SquareConfig): { color: string; area: number } { 
  // 规定传参的类型是这个接口的属性，又定义了函数返回的数据类型
  let newSquare = {color: "white", area: 100}
  if (config.color) {
    newSquare.color = config.color
  }
  return newSquare
}
let mySquare = createSquare({color: "black"})
let p1: SquareConfig = { y: 20 }

只读数组ReadonlyArray：创建后不能被修改

let a: number[] = [1, 2, 3, 4]
let ro: ReadonlyArray<number> = a
// 只读数组ro不可以赋值给一个普通数组,要赋值只能断言重写
a = ro as number[] //as把ro从只读数组变为数组类型

额外的属性检查

interface SquareConfig {
  color?: string
  width?: string
}
function createSquare(config:SquareConfig): {color: string; area: number}{}
let mySquare = createSquare({ colour: "red", width: 100 }) 
// colour不在createSquare的类型中，报错

解决方法1：类型断言：
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig)

解决方法2：字符串索引签名（最佳）：
interface SquareConfig {
  color?: string;
  width?: number;
  [propName: string]: any; // 只要不是color和width，其他的属性都能通过检验
}

解决方法3： 将这个对象赋值给另一个变量
let squareOptions = { colour: "red", width: 100 }
let mySquare = createSquare(squareOptions)

函数类型

interface SearchFunc {
  (source: string, subString: string): boolean
}
// 参数顺序及类型只要与接口中的一样，属性名可不同
mySearch：SearchFunc = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

可索引的类型

• ts支持两种索引签名：字符串和数字。可同时使用，但是数字索引的返回值必须是字符串索引返回值类型的子类型
• 可以设置为只读: readonly [index: number]: string

  interface StringArray {
    [index: number]: string  // 定义了一个索引签名[index : number]，它的返回类型是string
  }

类类型

实现接口 implements

• 接口描述了类的公共部分。它不会帮你检查类是否具有某些私有成员。

  interface ClockInterface { // 接口ClockInterface
    currentTime: Date // 方法1
    setTime(d: Date) // 方法2
  }
  
  class Clock implements ClockInterface { // Clock 实施 ClockInterface
    currentTime: Date;    //实例部分检查
    setTime(d: Date) {
      this.currentTime = d // 在Clock类里实现这个方法
    }
    constructor(h: number, m: number) {} //类静态部分，不检查
  }

继承接口 extends

• 一个接口可以继承多个接口，继承多个接口的接口叫做合成接口

  interface Square extends Shape, PenStroke { // 合成接口
    sideLength: number
  }
  
  let square = <Square>{} // 定义一个变量去使用合成接口的方法

混合接口：js使用第三方库时用

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
}

接口继承类型

• 接口继承类，可继承类的私有属性和protected，但只能被这个类和它的子类实现

  class Control { // 父类
    private state: any
  }
  interface SelectableControl extends Control { // 接口继承父类
    select(): void
  }
  
  class Button extends Control implements SelectableControl { 
    // 子接口继承父类实施接口
    select() { }
  }
  
  class TextBox extends Control {
    // 子接口继承父类人可以使用接口方法
    select() { }
  }

类

通过extends的类叫做派生类或子类，而父类叫做基类或超类

修饰符

• public：默认，公共属性

• private：私有属性，不能在声明它的类的外部访问。

  • private和protected在比较类型时，只有两个类型都有同样的修饰符，并且该修饰符来自同一基类时，才认为这两个类型是兼容的。

    class Animal {
      private name: string;
      constructor(theName: string) { this.name = theName }
    }
    
    class Rhino extends Animal {
      constructor() { super("Rhino") } // 使用了父类的构造方法，名字为Rhino
    }
    let animal = new Animal("Goat")	// Goat
    let rhino = new Rhino() // Rhino

• protected：保护属性

  • 不能在声明它的类的外部访问，但派生类中仍然可以访问
  • 构造函数也可以被标记成 protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承

• readonly：只读修饰符，必须在声明时或构造函数里被初始化。

• static: 静态属性，只有当前类才有的属性

• abstract：抽象类

  • 做为其它派生类的基类使用。 它们一般不会直接被实例化
  • 定义的方法必须在派生类中实现，派生类的构造函数必须调用super()

    let department: Department // 允许创建一个对抽象类型的引用
    department = new 子类名() // 允许对一个抽象子类进行实例化和赋值
    department.printName() // 在声明的抽象类中不存在的不可以调用，子类有也不可以

存取器：get和set成对出现

• get 变量名()
• set 变量名()

  getToken(): Itoken {
    return Initoken
  },
  setToken( tokenData: Itoken ): Itoken {
    return ( Initoken = { ...Initoken, ...tokenData } )
  }

高级技巧 — 构造函数

• 类定义会创建两个东西：类的实例类型和一个构造函数。

  class Greeter {
    static standardGreeting = "Hello,there"
    greeting: string
    constructor(message: string) {
      this.greeting = message
    }，
    greet() {
      return "Hello, " + this.greeting
    }
  }
  
  let greeter: Greeter // 这一行编译为js时是构造函数
  greeter = new Greeter("world") // 创建一个类实例
  
  let greeterMaker: typeof Greeter = Greeter // 这个变量保存了类构造函数的类型
  greeterMaker.standardGreeting = "Hey there!" // 可以用这个类型中包含的所有静态成员和构造函数

把类当做接口使用：类可以创建出类型，所以在允许使用接口的地方可以使用类

class Point {
  x: number
  y: number
}

interface Point3d extends Point {
  z: number
}

es5 vs es6 的类区别

• es6：class类必须new调用，不能直接执行
  • 不存在变量提升
  • 无法遍历它实例原型链上的属性和方法
• es5：类和普通函数无区别，可以执行