TypeScript的类及接口

一、类

我们知道类有三大特性：多态、继承、封装。

• 类class的类型 本质上是一个函数; 类本身就指向自己的构造函数。
• 一个类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加
• 我们在ES6的时候，实例属性都是定义在constructor()方法里面， 在ES7里 我们可以直接将这个属性定义在类的最顶层，其它都不变，去掉this;
• 通过代码我们也可以发现，new类的时候就相当于new构造函数
• 调用类上面的方法就是调用原型上的方法
• 在类的实例上面调用方法，其实就是调用原型上的方法
  在早期的JavaScript开发中我们需要通过函数和原型链来实现类和继承，但是从ES6开始，引入了class、extends关键字，可以更加方便的使用类以及实现继承。而TypeScript作为JavaScript的超集，也是支持使用class关键字的并且还可以对类的属性和方法等进行类型检测。但是实际上在JavaScript的开发过程中，我们更加习惯于函数式编程：

（1）在React开发中，目前更多使用的是函数式组件以及结合Hook的开发模式。

（2）在Vue3开发中，目前也更加推崇使用 Composition API，其实也是参考react的。

但是在封装某些业务的时候，类具有更强大的封装性，所以我们也还是需要一下掌握它们。

1.1类的基本使用

当我们定义好一个类后，我们便可以使用下面两种方式去给类添加属性了，但是初始化时是有以下两种方式的：

（1）定义属性时声明类型的同时初始化。

class Person {
  name: string = "kobe"
  age: number = "24"
    
  eating() {
    console.log(this.name + " eating")
  }
}

const p = new Person()
console.log(p.name)
console.log(p.age)
p.eating()

（2）通过constructor构造函数来初始化

class Person {
  //可以给属性添加类型，默认情况下为any类型
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + " eating")
  }
}

const p = new Person("why", 18)
console.log(p.name)
console.log(p.age)
p.eating()

1.2类的继承

面向对象的其中一大特性就是继承，继承不仅仅可以减少我们的代码量，也是多态的使用前提，我们使用extends关键字来实现继承，子类中使用super来访问父类，当我们使用上面第2种方式去初始化数据时，那么父类便可以通过在子类中使用super()去调用父类的constructor从而初始化父类中的属性，当然了我们也可以利用super再次调用或者重写父类中的方法。

//父类
class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log("eating 100行")
  }
}

//子类
class Student extends Person {
  sno: number

  constructor(name: string, age: number, sno: number) {
    super(name, age)// super调用父类的构造器从而初始化父类的属性
    this.sno = sno
  }

  eating() {
    console.log("student eating")
    super.eating()//也可以再次调用父类中的方法并进行重写
  }

  studying() {
    console.log("studying")
  }
}

const stu = new Student("why", 18, 111)
console.log(stu.name)
console.log(stu.age)
console.log(stu.sno)

stu.eating()

1.3成员修饰符

在TypeScript中，类的属性和方法支持以下三种修饰符：

（1）public修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的。

（2）private修饰的是仅在同一类中可见、私有的属性或方法。

class Person {
  private name: string = ""

  // 封装了两个方法, 通过方法将私有属性name暴露出去供其他类使用（我们后面还可使用访问器）
  getName() {
    return this.name
  }

  setName(newName) {
    this.name = newName
  }
}

const p = new Person()
console.log(p.getName())
p.setName("why") //注意它与使用访问器的区别

（3）protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法；

class Person {
  protected name: string = "123"
}

class Student extends Person {
  //可以在子类中将该属性暴露出去
  getName() {
    return this.name
  }
}

const stu = new Student()
console.log(stu.getName())

1.4readonly只读属性

（1）只读属性是可以在构造器中赋值，赋值之后就不可以修改。
（2）属性本身不能进行修改，但是如果它是对象类型，对象中的属性是可以修改的。

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

const p = new Person("why", new Person("kobe"))
console.log(p.name)
console.log(p.friend)

// 不可以直接修改friend
// p.friend = new Person("james")
if (p.friend) {
  p.friend.age = 30
}

1.5getters/setters存取器

在前面一些私有属性我们是不能直接访问的或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们可以使用存取器（当然也可以像上面那样自定义方法从而将私有属性暴露出去供外界使用）

class Person {
  private _name: string //私有属性一般建议带上下划线
  constructor(name: string) {
    this._name = name
  }

  // 访问器setter/getter
  // setter
  set name(newName) {
    this._name = newName
  }
  // getter
  get name() {
    return this._name
  }
}

const p = new Person("why")
p.name = "coderwhy"
console.log(p.name)

1.6静态成员

前面我们在类中定义的属性和方法都属于对象级别的，但是在开发中, 我们有时候也需要定义类级别的成员和方法。 因此我们可以在TypeScript中通过关键字static来定义静态成员，然后我们便可以直接访问类中的属性和方法，不再需要实例化的过程了。

class Student {
  static time: string = "20:00"

  static attendClass() {
    console.log("去学习~")
  }
}

console.log(Student.time) //可以直接访问属性和方法，而不需要new了
Student.attendClass()

1.7类的多态

个人感觉多态的目的是为了写出更加具备通用性的代码。

class Animal {
  action() {
    console.log("animal action")
  }
}

class Dog extends Animal {
  action() {
    console.log("dog running!!!")
  }
}

class Fish extends Animal {
  action() {
    console.log("fish swimming")
  }
}

function makeActions(animals: Animal[]) {
  animals.forEach(animal => {
    animal.action()
  })
}

makeActions([new Dog(), new Fish()])

1.8抽象类

个人感觉抽象类就是避免父类自己去对某个方法做实现，因为父类也不知道该方法是干嘛的，省的在子类中再去重写该方法了。

父类本身可能并不需要对某些方法进行具体的实现，所以父类中定义的方法,，我们可以定义为抽象方法。

什么是抽象方法? 在TypeScript中没有具体实现的方法(没有方法体)，就是抽象方法。

（1）抽象方法，必须存在于抽象类中；

（2）抽象类是使用abstract声明的类；

抽象类有如下的特点：

（1）抽象类是不能被实例的（也就是不能通过new创建）

（2）抽象方法必须被子类实现，否则该类必须是一个抽象类；

//例如：我们需要根据传入进来的去做一个面积计算
abstract class Shape {
  abstract getArea(): number
}

class Rectangle extends Shape {
  private width: number
  private height: number

  constructor(width: number, height: number) {
    super()
    this.width = width
    this.height = height
  }

  getArea() {
    return this.width * this.height
  }
}

class Circle extends Shape {
  private r: number

  constructor(r: number) {
    super()
    this.r = r
  }

  getArea() {
    return this.r * this.r * 3.14
  }
}

const rectangle = new Rectangle(20, 30)
const circle = new Circle(10)

console.log(makeArea(rectangle))
console.log(makeArea(circle))

1.9类的类型

类本身也是可以作为一种数据类型的：

class Person {
  name: string = "123"
  eating() {

  }
}

const p = new Person()

const p1: Person = {
  name: "why",
  eating() {

  }
}

function printPerson(p: Person) {
  console.log(p.name)
}

printPerson(new Person())
printPerson({name: "kobe", eating: function() {}})

二、接口

2.1为什么要使用接口

2.1.1. JavaScript存在的问题

我们在JavaScript中定义一个函数，用于获取一个用户的姓名和年龄的字符串：

const getUserInfo = function(user) {
  return `name: ${user.name}, age: ${user.age}`
}

正确的调用方法应该是下面的方式：

getUserInfo({name: "coderwhy", age: 18})

但是当项目比较大，或者多人开发时，会出现错误的调用方法：

// 错误的调用
getUserInfo() // Uncaught TypeError: Cannot read property 'name' of undefined
console.log(getUserInfo({name: "coderwhy"})) // name: coderwhy, age: undefined
getUserInfo({name: "codewhy", height: 1.88}) // name: coderwhy, age: undefined

因为JavaScript是弱类型的语言，所以并不会对我们传入的代码进行任何的检测，但是在之前的javaScript中确确实实会存在很多类似的安全隐患。

如何避免这样的问题呢？

当然是使用TypeScript来对代码进行重构

2.1.2. TypeScript代码重构一

我们可以使用TypeScript来对上面的代码进行改进：

const getUserInfo = (user: {name: string, age: number}): string => {
  return `name: ${user.name} age: ${user.age}`;
};

正确的调用是如下的方式：

getUserInfo({name: "coderwhy", age: 18});

如果调用者出现了错误的调用，那么TypeScript会直接给出错误的提示信息：

// 错误的调用
getUserInfo(); // 错误信息：An argument for 'user' was not provided.
getUserInfo({name: "coderwhy"}); // 错误信息：Property 'age' is missing in type '{ name: string; }'
getUserInfo({name: "coderwhy", height: 1.88}); // 错误信息：类型不匹配

这样确实可以防止出现错误的调用，但是我们在定义函数的时候，参数的类型和函数的类型都是非常长的，代码非常不便于阅读。

所以，我们可以使用接口来对代码再次进行重构。

2.1.3. TypeScript代码重构二

现在我们使用接口来对user的类型进行重构。

接口重构一：参数类型使用接口定义

我们先定义一个IUser接口：

// 先定义一个接口
interface IUser {
  name: string;
  age: number;
}

接下来我们看一下函数如何来写：

const getUserInfo = (user: IUser): string => {
  return `name: ${user.name}, age: ${user.age}`;
};
 
// 正确的调用
getUserInfo({name: "coderwhy", age: 18});
 
// 错误的调用，其他也是一样
getUserInfo();

接口重构二：函数的类型使用接口定义好（后面会详细讲解接口函数的定义）

我们先定义两个接口：

第二个接口定义有一个警告，我们暂时忽略它，它的目的是如果一个函数接口只有一个方法，那么可以使用type来定义

type IUserInfoFunc = (user: IUser) => string;

interface IUser {
  name: string;
  age: number;
}
 
interface IUserInfoFunc {
  (user: IUser): string;
}

接着我们去定义函数和调用函数即可：

const getUserInfo: IUserInfoFunc = (user) => {
  return `name: ${user.name}, age: ${user.age}`;
};
 
// 正确的调用
getUserInfo({name: "coderwhy", age: 18});
 
// 错误的调用
getUserInfo();

2.2 接口的基本使用

2.2.1. 接口的定义方式

和其他很多的语言类似，TypeScript中定义接口也是使用interface关键字来定义：

interface IPerson {
  name: string;
}

你会发现我都在接口的前面加了一个I，这是tslint要求的，否则会报一个警告

要不要加前缀是根据公司规范和个人习惯

interface name must start with a capitalized I

当然我们可以在tslint中关闭掉它：在rules中添加如下规则

"interface-name" : [true, "never-prefix"]

2.2.2. 接口中定义方法

定义接口中不仅仅可以有属性，也可以有方法：

interface Person {
  name: string;
  run(): void;
  eat(): void;
}

如果我们有一个对象是该接口类型，那么必须包含对应的属性和方法：

const p: Person = {
  name: "why",
  run() {
    console.log("running");
  },
  eat() {
    console.log("eating");
  },
};

2.2.3. 可选属性的定义

默认情况下一个变量（对象）是对应的接口类型，那么这个变量（对象）必须实现接口中所有的属性和方法。

但是，开发中为了让接口更加的灵活，某些属性我们可能希望设计成可选的（想实现可以实现，不想实现也没有关系），这个时候就可以使用可选属性（后面详细讲解函数时，也会讲到函数中有可选参数）：

interface Person {
  name: string;
  age?: number;
  run(): void;
  eat(): void;
  study?(): void;
}

上面的代码中，我们增加了age属性和study方法，这两个都是可选的：

可选属性如果没有赋值，那么获取到的值是undefined；

对于可选方法，必须先进行判断，再调用，否则会报错；

const p: Person = {
  name: "why",
  run() {
    console.log("running");
  },
  eat() {
    console.log("eating");
  },
};
 
console.log(p.age); // undefined
p.study(); // 不能调用可能是“未定义”的对象。

正确的调用方式如下：

if (p.study) {
  p.study();
}

2.2.4. 只读属性的定义

默认情况下，接口中定义的属性可读可写：

console.log(p.name);
p.name = “浮游”;
如果一个属性，我们只是希望在定义的时候就定义值，之后不可以修改，那么可以在属性的前面加上一个关键字：readonly

interface Person {
  readonly name: string;
  age?: number;
  run(): void;
  eat(): void;
  study?(): void;
}
当我在name前面加上readonly时，赋值语句就会报错：

console.log(p.name);
p.name = "浮游"; // Cannot assign to 'name' because it is a read-only property.

2.3 接口的高级使用

2.3.1. 函数类型的定义

接口不仅仅可以定义普通的对象类型，也可以定义函数的类型

// 函数类型的定义
interface SumFunc {
  (num1: number, num2: number): number;
}
 
// 定义具体的函数
const sum: SumFunc = (num1, num2) => {
  return num1 + num2;
};
 
// 调用函数
console.log(sum(20, 30));

不过上面的接口中只有一个函数，TypeScript会给我们一个建议，可以使用type来定义一个函数的类型：

type SumFunc = (num1: number, num2: number) => number;

关于type的更多用户，我们后面专门进行讲解，暂时不在接口中展开讨论。

2.3.2. 可索引类型的定义

和使用接口描述函数的类型差不多，我们也可以使用接口来描述 可索引类型

比如一个变量可以这样访问：a[3]，a[“name”]

可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

// 定义可索引类型的接口
interface RoleMap {
  [index: number]: string;
}
 
// 赋值具体的值
// 赋值方式一：
const roleMap1: RoleMap = {
  0: "程序员",
  1: "会计师",
  2: "销售",
};
 
// 赋值方式二：因为数组本身是可索引的值
const roleMap2 = ["鲁班七号", "露娜", "李白"];
 
// 取出对应的值
console.log(roleMap1[0]); // 程序员
console.log(roleMap2[1]); // 露娜

上面的案例中，我们的索引签名是数字类型， TypeScript支持两种索引签名：字符串和数字。

我们来定义一个字符串的索引类型：

interface RoleMap {
  [name: string]: string;
}
 
const roleMap: RoleMap = {
  aaa: "鲁班七号",
  bbb: "露娜",
  ccc: "李白",
};
 
console.log(roleMap.aaa);
console.log(roleMap["aaa"]); // 警告：不推荐这样来取

可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型：

这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。

class Person {
  private name: string = "";
}
 
class Student extends Person {
  private sno: number = 0;
}
 
// 下面的代码会报错
interface IndexSubject {
  [index: number]: Person;
  [name: string]: Student;
}

代码会报如下错误：

数字索引类型“Person”不能赋给字符串索引类型“Student”。
修改为如下代码就可以了：

interface IndexSubject {
  [index: number]: Student;
  [name: string]: Person;
}

下面的代码也会报错：

letter索引得到结果的类型，必须是Person类型或者它的子类型

interface IndexSubject {
  [index: number]: Student;
  [name: string]: Person;
 
  letter: string;
}

2.3.3. 接口的实现

接口除了定义某种类型规范之后，也可以和其他编程语言一样，让一个类去实现某个接口，那么这个类就必须明确去拥有这个接口中的属性和实现其方法：

从代码设计上，为什么需要接口?

当然，对于初次接触接口的人，还是很难理解它在实际的代码设计中的好处，这点慢慢体会，不用心急。

2.3.4 接口的继承

和类相似（后面我们再详细学习类的知识），接口也是可以继承接口来提供复用性：

下面的代码中会有关于修饰符的警告，暂时忽略，后面详细讲解

// 定义一个实体接口
interface Entity {
  title: string;
  log(): void;
}
 
// 实现这样一个接口
class Post implements Entity {
  title: string;
 
  constructor(title: string) {
    this.title = title;
  }
 
  log(): void {
    console.log(this.title);
  }
}

思考：我定义了一个接口，但是我在继承这个接口的类中还要写接口的实现方法，那我不如直接就在这个类中写实现方法岂不是更便捷，还省去了定义接口？这是一个初学者经常会有疑惑的地方。

从思考方式上，为什么需要接口?

我们从生活出发理解接口

比如你去三亚/杭州旅游, 玩了一上午后饥饿难耐, 你放眼望去, 会注意什么? 饭店!!

你可能并不会太在意这家饭店叫什么名字, 但是你知道只要后面有饭店两个字, 就意味着这个地方必然有饭店的实现 – 做各种菜给你吃；

接口就好比饭店/酒店/棋牌室这些名词后面添加的附属词, 当我们看到这些附属词后就知道它们具备的功能

在代码设计中，接口是一种规范；

注意：继承使用extends关键字

接口通常用于来定义某种规范, 类似于你必须遵守的协议, 有些语言直接就叫protocol；

站在程序角度上说接口只规定了类里必须提供的属性和方法，从而分离了规范和实现，增强了系统的可拓展性和可维护性；

interface Barkable {
  barking(): void;
}
 
interface Shakable {
  shaking(): void;
}
 
interface Petable extends Barkable, Shakable {
  eating(): void;
}

接口Petable继承自Barkable和Shakable，另外我们发现一个接口可以同时继承自多个接口

如果现在有一个类实现了Petable接口，那么不仅仅需要实现Petable的方法，也需要实现Petable继承自的接口中的方法：

注意：实现接口使用implements关键字

class Dog implements Petable {
  barking(): void {
    console.log("汪汪叫");
  }
 
  shaking(): void {
    console.log("摇尾巴");
  }
 
  eating(): void {
    console.log("吃骨头");
  }
}