美文网首页
TypeScript(四)类、接口

TypeScript(四)类、接口

作者: Imkata | 来源:发表于2022-05-11 09:49 被阅读0次

认识类的使用

在早期的JavaScript开发中(ES5)我们需要通过函数和原型链来实现类和继承,从ES6开始,引入了class关键字,可以更加方便的定义和使用类。TypeScript作为JavaScript的超集,也是支持使用class关键字的,并且还可以对类的属性和方法等进行静态类型检测。

实际上在JavaScript的开发过程中,我们更加习惯于函数式编程,比如React开发中,目前更多使用的函数组件以及结合Hook的开发模式,比如在Vue3开发中,目前也更加推崇使用 Composition API,它们都是偏向于函数式编程。但是在封装某些业务的时候,类具有更强大的封装性,所以我们也需要掌握它们。

类的定义我们通常会使用class关键字,在面向对象的世界里,任何事物都可以使用类的结构来描述,类中包含特有的属性和方法。

类的定义

我们使用class关键字来定义一个Person类,在类的内部声明类的属性以及对应的类型,如果类型没有声明,那么它们默认是any的,我们也可以给属性设置初始化值。类中可以有自己的函数,定义的函数称之为方法。

class Person {
  name: string
  age: number

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

//会报错,因为类的属性没初始化
const p = new Person()

上面代码会报错,因为在默认的strictPropertyInitialization模式下面我们的属性是必须初始化的,如果没有初始化,那么编译时就会报错。我们可以给属性设置默认值,如下:

class Person {
  name: string = ""
  age: number = 0

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

//不会报错
const p = new Person()

除了设置默认值,我们还可以使用构造函数constructor。当我们通过new关键字创建一个实例时,构造函数会被调用,构造函数不需要返回任何值,默认返回当前创建出来的实例。下面的构造函数要求new实例的时候传入两个参数,这样name和age都会被赋值,就不会报错了。

class Person {
  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()

如果我们在strictPropertyInitialization模式下确实不希望给属性初始化,可以使用 name!: string 语法。

类的继承

面向对象的三大特性:封装,继承,多态。

面向对象的其中一大特性就是继承,继承不仅仅可以减少我们的代码量,也是多态的使用前提。我们使用extends关键字来实现继承,子类中使用super来访问父类。

我们来看一下Student类继承自Person,Student类可以有自己的属性和方法,并且会继承Person的属性和方法。

class Person {
  // 设置默认值
  name: string = ""
  age: number = 0

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

// 继承
class Student extends Person {
  sno: number = 0

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

// 继承
class Teacher extends Person {
  title: string = ""

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

const stu = new Student()
stu.name = "coderwhy"
stu.age = 10
console.log(stu.name)
console.log(stu.age)
stu.eating()

上面代码,我们是给属性设置默认值了,如果不设置默认值,我们可以在构造函数中,通过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调用父类的构造器
    super(name, age)
    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)

// 优先调用子类的eating方法,子类没有的话再去父类找
stu.eating()

多态

面向对象的三大特性:封装,继承,多态。

多态的前提是继承,多态的代码体现就是父类指针指向子类对象,多态的目的是为了写出更加具备通用性的代码。

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")
  }
}

class Person extends Animal {

}

// animal: dog/fish
// 多态的目的是为了写出更加具备通用性的代码
function makeActions(animals: Animal[]) {
  animals.forEach(animal => {
    animal.action()
  })
}

// 传入三个对象数组
// 父类指针指向子类对象
makeActions([new Dog(), new Fish(), new Person()])
//最后打印: "dog running"  "fish swimming"  "animal action"

类的成员修饰符

在TypeScript中,类的属性和方法支持三种修饰符:public、protected、private。

  • public 修饰的是在任何地方可见,公有的属性或方法,默认编写的属性就是public的;
  • protected 修饰的是仅在类自身及子类中可见,是受保护的属性或方法;
  • private 修饰的是仅在同一类中可见,是私有的属性或方法;

private演示:

class Person {
  // 私有的, 只有在当前类内部进行访问
  private name: string = ""

  // 封装了两个方法, 通过方法来访问name
  getName() {
    return this.name
  }
  setName(newName) {
    this.name = newName
  }
}

const p = new Person()

// 报错
// const name = p.name

// 如果我们实在想访问name, 可以在类里面封装两个方法, 通过方法来访问name
p.setName("why")
console.log(p.getName()) // why

protected演示:

class Person {
  // 受保护的, 在类内部和子类中可以访问
  protected name: string = "123"
}

class Student extends Person {
  getName() {
    // 子类可以访问
    return this.name
  }
}

const stu = new Student()
// 封装一个方法, 用于在外面访问
console.log(stu.getName()) // 123

只读属性readonly

如果有一个属性我们不希望外界可以任意的修改,只希望确定值后直接使用,那么可以使用readonly。

class Person {
  readonly name: string
  age?: number
  readonly friend?: Person
  constructor(name: string, friend?: Person) {
    // 1.只读属性是可以在构造器中赋值, 赋值之后就不可以修改
    this.name = name
    this.friend = friend
  }
}

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

// 2.只读属性本身不能进行修改, 但是如果它是对象类型, 对象中的属性是可以修改
// p.friend = new Person("james")
if (p.friend) {
  p.friend.age = 30
}

// 只读属性不能修改
// p.name = "123"

getters/setters

前面我们是添加了getName和setName方法用来访问私有属性,这些添加方法的操作其实是java遗传过来的。在TypeScript中,类似私有属性的访问,或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程,这个时候我们可以使用访问器。

class Person {
  private _name: string
  constructor(name: string) {
    // 规范:一般私有属性,我们都以_开头
    this._name = name
  }

  // 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)

类的静态成员/方法

前面我们在类中定义的成员和方法都属于对象级别的,在开发中,我们有时候也需要定义类级别的成员和方法,在TypeScript中通过关键字static来定义。

抽象类abstract

我们知道,继承是多态使用的前提。所以在定义很多通用的调用接口时,我们通常会让调用者传入父类,通过多态来实现更加灵活的调用方式。但是,父类本身可能并不需要对某些方法进行具体的实现,这时候父类中定义的方法,我们可以定义为抽象方法。

在TypeScript中没有具体实现的方法(没有方法体),就是抽象方法。抽象方法,必须存在于抽象类中,抽象类是使用abstract声明的类。

抽象类有如下的特点:

  • 抽象类是不能被实例化(也就是不能通过new创建)
  • 抽象方法必须被子类实现,否则该类必须是一个抽象类;
// 传入一个继承Shape的类
function makeArea(shape: Shape) {
  // 继承Shape的类必有getArea方法,调用getArea方法,获取面积
  return shape.getArea()
}

// 定义抽象类
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))
// makeArea(new Shape())
// makeArea(123)
// makeArea("123")

如果抽象类中的某个方法没有实现体,那么这个方法必须加abstract,如果这个方法有实现体,那么不用加abstract。

类的类型

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

接口

在前面我们通过type可以用来声明一个对象类型:

对象的另外一种声明方式就是通过接口来声明:

他们在使用上的区别,我们后续再来说明,接下来我们继续学习一下接口的其他特性。

接口中我们可以定义可选类型也可以定义只读属性。还有一个小规范,定义接口的时候一般我们会在接口名前面加上一个I,比如IInfoType。

interface IInfoType {
  // 定义只读属性
  readonly name: string
  age: number
  // 定义可选类型
  friend?: {
    name: string
  }
}

const info: IInfoType = {
  name: "why",
  age: 18,
  friend: {
    name: "kobe"
  }
}

console.log(info.friend?.name)
console.log(info.name)
// info.name = "123"
info.age = 20

接口的索引类型

如果我们有一个对象,要求key是数字,value是字符串,那么我们就可以定义一个索引类型,这时候如果对象不是这个格式的就会报错,如下:

interface IndexLanguage {
  [index: number]: string
}

const frontLanguage: IndexLanguage = {
  0: "HTML",
  1: "CSS",
  2: "JavaScript",
  3: "Vue"
}

如果有一个属性是必须有的,那么我们可以直接写出来,如下,必须有个Java,并且值是number。

interface ILanguageYear {
  [name: string]: number
  Java: number
}

const languageYear: ILanguageYear = {
  "Java": 1995,
  "C": 1972,
  "JavaScript": 1996,
  "TypeScript": 2014
}

函数类型

前面我们都是通过interface来定义对象中普通的属性和方法的,实际上它也可以用来定义函数类型。

当然,除非特别的情况,还是推荐大家使用类型别名来定义函数:

接口继承

接口和类一样是可以进行继承的,也是使用extends关键字,并且我们会发现,接口是支持多继承的(类不支持多继承)。

交叉类型

前面我们学习了联合类型,联合类型表示多个类型中一个即可。

还有另外一种类型合并,就是交叉类型(Intersection Types),交叉类似表示需要满足多个类型的条件,交叉类型使用 & 符号。

我们来看下面的交叉类型:

上面表达的含义是number和string要同时满足,但是有同时满足是一个number又是一个string的值吗?其实是没有的,所以MyType其实是一个never类型。

所以,在开发中,我们进行交叉时,通常是对对象类型进行交叉的:

interface ISwim {
  swimming: () => void
}

interface IFly {
  flying: () => void
}

type MyType1 = ISwim | IFly
type MyType2 = ISwim & IFly

const obj1: MyType1 = {
  flying() {

  }
}

const obj2: MyType2 = {
  swimming() {

  },
  flying() {
    
  }
}

接口的实现

接口定义后,也是可以被类实现的,如果被一个类实现,那么在之后需要传入接口的地方,都可以将这个类传入,这就是面向接口开发,有点像swift的面向协议开发。

interface ISwim {
  swimming: () => void
}

interface IEat {
  eating: () => void
}

// 父类
class Animal {
  
}

// 继承: 只能实现单继承
// 实现: 实现接口, 类可以实现多个接口
class Fish extends Animal implements ISwim, IEat {
  swimming() {
    console.log("Fish Swmming")
  }

  eating() {
    console.log("Fish Eating")
  }
}

class Person implements ISwim {
  swimming() {
    console.log("Person Swimming")
  }
}

// 编写一些公共的API: 面向接口编程
function swimAction(swimable: ISwim) {
  swimable.swimming()
}

// 所有实现了接口的类对应的对象, 都是可以传入
swimAction(new Fish())
swimAction(new Person())
// 也可以
swimAction({swimming: function() {}})

interface和type区别

上面我们说了,interface和type都可以用来定义对象类型,那么在开发中定义对象类型时,到底选择哪一个呢?

  • 如果是定义非对象类型,通常推荐使用type,比如Direction、Alignment、一些Function。
  • 如果是定义对象类型,那么他们是有区别的:interface 可以重复的对某个接口来定义属性和方法,而且最后的结果是合并到一起。而type定义的是别名,别名是不能重复的。

如果我们想给Window添加一个age属性,可以通过interface实现,但是通过type实现就会报错。

interface Window {
  age: number
}
window.age = 19
console.log(window.age)

字面量赋值和freshness擦除操作

我们来看下面的代码,会报错。

这是因为TypeScript在字面量直接赋值的过程中,为了进行类型推导会进行严格的类型限制。比如根据右边的字面量推导出p是有name、age和eating的对象,但是我们写的类型注解只有name和eating,显然会报错。

但是下面的代码就不会报错。

这是因为,如果我们是将一个变量标识符赋值给其他的变量时,会进行freshness擦除操作。啥意思呢,就是把obj赋值给p的时候会先看看有没有name和eating,其他的直接忽视,显然满足,所以赋值成功。当然因为age被擦除了,所以我们访问p.age肯定会报错。

那么开发中有什么用呢?

比如我们想打印一个人的信息,这个人需要有name和age,当我们直接传入一个字面量,类型检测肯定不通过,代码报错:

interface IPerson {
  name: string
  age: number
}

function printInfo(person: IPerson) {
  console.log(person)
}

// 代码会报错
printInfo({
  name: "why",
  age: 18,
  address: "广州市"  // 报错
})

如果我们传入一个标识符,不需要的信息会被擦除,所以下面代码不会报错,当然因为被擦除了,我们也是无法访问info.address的。

const info = {
  name: "why",
  age: 18,
  address: "广州市"
}

printInfo(info)

实际开发中我们人的信息可能不止name和age,正因为有类型擦除,我们把具有其他属性的人传进去也是可以的,这就让我们的编码更灵活,这就是freshness擦除操作的意义。

相关文章

  • TypeScript(四)类、接口

    认识类的使用 在早期的JavaScript开发中(ES5)我们需要通过函数和原型链来实现类和继承,从ES6开始,引...

  • TypeScript(四)类与接口

    类实现接口 类类型接口是类遵循的某种约束和规则。 类可以通过关键字 implements 实现接口。 此外通过上文...

  • Typescript接口、类

    一、接口 TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性...

  • TypeScript interface extends cla

    TypeScript 中接口也可以继承类,并且接口可以继承类中的各个成员包括protect和private成员。假...

  • Typescript学习概要

    大致印象 TypeScript 增加了静态类型、类、模块、接口和类型注解. TypeScript 可用于开发大型的...

  • TypeScript类与接口

    接口(Interfaces)可以用于对「对象的形状(Shape)」进行描述 类实现接口: 实现(implement...

  • TypeScript(四)接口和类的区别

    接口只声明成员方法,不做实现。类声明并实现方法。 接口就是用于声明函数的,然后在类中去实现这些接口里的函数。 那么...

  • Typescript

    安装 Typescript 接口 interface 约束类型结构、Duck Typing 类型推论、联合类型、类...

  • class 类

    基本用法 构造函数和this 继承 抽象类 接口(TypeScript 独有) 属性的封装 泛型

  • TypeScript进阶(类与接口)

    类实现接口实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类...

网友评论

      本文标题:TypeScript(四)类、接口

      本文链接:https://www.haomeiwen.com/subject/gylrurtx.html