为什么需要类呢？
- 外来人口多，迫切需要 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 是两个不同的流派，没人会关心你这个东西是在哪里实现的，没人会关心你这个是独有属性，还是共有属性，只要给你实现出来就行了
最后提醒一点，如果你在学习另一门语言，在你没学会之前，千万不要把这两个语言进行对比，这样只会搞的更混乱
网友评论