【TypeScript】进阶：类和接口

一、类

基本使用

• TypeScript中类的基本使用

  class Person {
      name: string
      age: number
      constructor(name: string, age: number) { //构造函数
          this.name = name
          this.age = age
      }
      speak() {
          console.log(`我叫${this.name},今年${this.age}岁`)
      }
  }
  

继承

• TypeScript中类的继承

  class Student extends Person {
      //新增自己的属性
      grade: string
      constructor(name: string, age: number, grade: string) { //新增属性要重写构造函数
          super(name, age) //父类的构造函数
          this.grade = grade
      }
      override speak() { //覆盖原来方法
          console.log(`我叫${this.name},今年${this.age}岁,正在读${this.grade}`)
      }
  }
  

二、类属性修饰符

public

• 公共的；可以被类内部，子类，类外部访问；默认属性的修饰符就是public

protected

• 受保护的；可以被类内部，子类访问

private

• 私有的；只能被内部访问

readonly

• 只读属性；属性无法修改

public readonly ID:string //公共的只读属性

属性的简写形式

 constructor(public name: string, public age: number, public grade: string){
     /*如果是简写的话，构造器里可以不用赋值了，会自动*/
 }

三、抽象类

抽象主要为派生类提供一个基础结构，要求派生类中必须对其基本实现；
！抽象类不可被实例化，其最大的意义就是可以被继承
！普通方法 & 抽象方法

场景模拟：

• 抽象类定义

  abstract class Package{
      //构造方法
      constructor(public weight:number){ }
      //抽象方法
      abstract calculate():number //一个方法结构，返回值是数字，要求派生类要有具体实现
      //具体方法
      printPackage(){
          console.log(`包裹的重量是${this.weight}kg,运费为${this.calculate()}元`) 
          //所有派生类都可调用，不用具体实现了
      }
  }
  

• 派生类实现

  class StandardPackage extends Package{
      constructor(weight:number,public unitPrice:number){
          super(weight)
      }
      //具体实现
      calculate(): number {
          return this.weight*this.unitPrice
      }
  }
  

• 实例测试：

  const p1 =new  StandardPackage(10,12)
  p1.printPackage()
  //输出：包裹的重量是10kg,运费为120元
  

• 何时使用？

  1. 为一组类定义通用行为（方法or属性）时
  2. 强制派生类实现一些关键行为

四、Interface（接口）

只能定义结构，不能包含是实现。
何时使用？描述数据类型，API响应格式，配置对象；也可以做类的契约；

• 定义接口

  interface UserInterface{
      name:string
      readonly gender:string
      age?:number //可有可无
      run:(n:number) => void //函数结构
  }
  

• 用接口定义类

  //用接口定义类结构
  class user implements UserInterface{
      constructor(public name:string,public gender:string){ }
      run(n:number){
          console.log(`${this.name}跑了${n}米`)
      }
  }
  

• 用接口定义对象结构

  const u2 :UserInterface ={
      name:"李华",
      gender:"男",
      run(n){
          console.log(`${this.name}跑了${n}米`)
      }
  }
  

• 用接口定义函数结构

  interface CountInterface{
  	(a:number,b:number):number;
  }
  const count: CountInterface = (x,y)=>{
  	return x+y
  }
  

• 接口的继承

  interface PersonInterface{
      name:string
      age:number
  }
  interface StudentInterface extends PersonInterface{ //继承
      grade:string
  }
  

• 接口的可合并性

  interface PersonInterface{
      name:string
      age:number
  }
  interface PersonInterface{
      gender:string
  }
  

五、interface和抽象类的区别

• 相同：都可以定义类的结构

• 不同：

  1. 接口：只能描述结构，不能有任何实现的代码，一个类可以实现多个接口

     class duck implement FlyInterface, SwinInterface { }
     

  2. 抽象类：既可以包含抽象方法，又可以包含具体方法，一个类只能继承一个抽象类

六、interface和type的区别

• 相同：interface和type都可以用于定义对象结构，在一些场景可以互换
• 不同：
  1. interface：更专注定义类和对象的结构，支持继承、合并
  2. type：可以定义类型别名，联合类型，交叉类型，但不支持继承和自动合并

七、泛型

允许我们在定义函数的时候，先不指定参数的类型，用泛型来表示

• 单个泛型

  function LogData<T>(data:T) : T{
      return data
  }
  LogData<number>(10)
  LogData<string>("hello")
  

• 多个泛型

  function LogData<T, U>(data1:T, data2:U) : T|U{
      return Data.now()%2 ? data1:data2
  }
  LogData<number, string>(10，"world")
  LogData<string, boolean>("hello",false)
  

八、类型声明文件

• 扩展名 .d.ts

• 为现有的JavaScript代码提供类型信息，使得TypeScript能在使用这些模块时进行类型检查

  //demo.d.ts
  declare function add(a: number, b: number): number;
  export { add }