TypeScript全解：class（上）

2023-06-13 本文已影响0人 littleyu

为什么需要类呢？

外来人口多，迫切需要 class（以前是没有专门的前端的，都是其他方向转行来的）

class 是保留字，迟早要实现 class

大部分人对原型的理解不够（因为大多数都语言是使用 class 来描述面向对象）

语法

// 写法一
class PointClass {
  x: number = 0
  y: number = 0
}

// 写法二
class PointClass {
  x: number
  y: number
  constructor() {
    this.x = 0
    this.y = 0
  }
}

// 写法三
class PointClass {
  x!: number // 这里必须断言，因为初始化不在 constructor 的明面上
  y!: number
  constructor() {
    this.xxx()  
  }
  xxx() {
    this.x = 0
    this.y = 0
  }
}

来看一组对比：

interface PointInterface {
  x: number;
  y: number;
}

// TODO: 注意：下面这个示例在 JS 中可以的，在 TS 中会报错
class PointClass {
  x: number;
  y: number;
}

看起来很像是吧~
interface 只有成员的类型没有实现
class 须同时有成员的类型和实现

其实这个才是我最喜欢的写法：

class Point {
  constructor(public x: number = 0, public y: number = 0) {
  }
}

函数重载

class Point {
  x!: number;
  y!: number;
  constructor(x: number, y: number);
  constructor(s: string);
  constructor(xs: number | string, y?: number) {
    if (typeof xs === 'number' && typeof y === 'number') {
      this.x = xs
      this.y = y
    } else if (typeof === 'string') {
      const parts = xs.split(',')
      this.x = parseFloat(parts[0])
      this.y = parseFloat(parts[1])
    }
  }
}

看起来有点复杂把~

class 可以实现接口

使用 implements

interface Person {
  name: string;
  sayHi: (target: Person) => void
}

class User implements Person {
  constructor(public name: string) {}
  sayHi(target: Person) {
    console.log(`Hi ${target.name}`)
  }
}

实现是什么意思？就是你有的我都有，那这个不是和继承差不多嘛
确实差不多，但是你“继承”一个接口，就叫做实现。接口继承接口，类继承类，那才叫做继承
面向对象对就喜欢整这些有的没的的概念

实现两个接口

interface Person {
  name: string;
  sayHi: (target: Person) => void
}
interface Tag {
  tag: string[];
}

class User implements Person, interface {
  tag: string[] = []
  constructor(public name: string) {
    this.name = '1'
  }
  sayHi(target: Person) {
    console.log(`Hi ${target.name}`)
  }
}

思考：来看一个问题

interface Person {
  name: string;
  age?: number;
  sayHi: (target: Person) => void
}

class User implements Person {
  constructor(public name: string) {}
  sayHi(target: Person) {
    console.log(`Hi ${target.name}`)
  }
}

const u = new User('jack')

u.age // TODO: 这里会出现什么样的结果

问：u.age 的值是多少？

0

undefined

typescript 报错

很显然是报错，
Person 是一个接口啊，又不会帮你实现，你的 User 也没有实现 age，所以是报错

class 可以继承 class

class Person {
  constructor(public name: string) {}
  sayHi() {
    console.log(`Hi ${thyis.name}`)
  }
}

class User extends Person {
  constructor(public id: number, name: string) {
    super(name)
  }
  login() {}
  sayHi(target?: User) { // TODO: 注意：这叫做重写
    if (target === undefined) {
      supper.sayHi()
    } else {
      console.log(`你好，${target.name}， 我是${this.name}`)
    }
  }
}

注意这里需要调用 super
为什么是这个单词？因为面向对象他又来了，
通常我们都说父类和子类，而偏偏面向对象要叫做超类，就是喜欢发明概念

关于重写的一个思考

再来看一个栗子

class Person {
  friend?: Person
  constructor(public name: string, friend?: Person) {
    this.friend = friend
  }
}

class User extends Person {
  constructor(public id: number, name: string, friend?: User) {
    super(name, friend)
  }
  login() {}
  sayHi(target?: User) { // TODO: 注意：这叫做重写
    if (target === undefined) {
      supper.sayHi()
    } else {
      console.log(`你好，${target.name}， 我是${this.name}`)
    }
  }
}

const u1 = new User(1, 'jack')
const u2 = new User(1, 'jack2', u1)

u2.friend // TODO: 请问这里的类型是什么

请问这里的 u2.friend 类型是什么？

直接看答案：

很奇怪把，明明传进去的 u1，类型是 User，怎么显示出来是 Person？！

可能是因为我们在 User 的时候并没有实现 friend，friend 是在 Person 实现的，自然会用 Person 里的 friend 的类型
所以我们要怎么做呢？用类型重写

class Person {
  friend?: Person
  constructor(public name: string, friend?: Person) {
    this.friend = friend
  }
}

class User extends Person {
  declare friend?: User // TODO: 注意这里：需要使用 declare
  constructor(public id: number, name: string, friend?: User) {
    super(name, friend)
  }
  login() {}
  sayHi(target?: User) { // TODO: 注意：这叫做重写
    if (target === undefined) {
      supper.sayHi()
    } else {
      console.log(`你好，${target.name}， 我是${this.name}`)
    }
  }
}

好，面向对象又来事了，
想直接覆盖？不可以，只能用我提供的关键词 declare 来覆盖

最后再来思考一个问题

这里的 friend 是 User 的还是 Person 的？

其实这个问题没必要纠结，之所以问出这个问题是因为你深受原型链的影响

原型链和 class 是两个不同的流派，没人会关心你这个东西是在哪里实现的，没人会关心你这个是独有属性，还是共有属性，只要给你实现出来就行了

最后提醒一点，如果你在学习另一门语言，在你没学会之前，千万不要把这两个语言进行对比，这样只会搞的更混乱