iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript中的类
  • 688
分享到

TypeScript中的类

2024-04-02 19:04:59 688人浏览 薄情痞子
摘要

目录1.概述2.定义一个简单的类3.继承4.public、private、protected修饰符4.1getters与setters5.readonly修饰符6.静态成员7.抽象类

1.概述

类这个概念基本是所有面向对象编程语言都具有一个概念,例如Javapython等;在javascriptes6 之前是没有类这个概念的,对于熟悉面向对象来程序猿来说有些棘手,因为他们用的都是基于类的继承,对象也是通过类创建出来的。在ES6中添加了类这个概念,虽然只是一个语法糖,但是这就可以让程序员基于类去进行操作了。在TS中也是支持类这个概念的。

2.定义一个简单的类

在TS中也是使用class关键字来定义一个类,示例代码如下:


;(function () {
  // 定义类
  class Person {
    // 公共属性,默认可以不写
    public name: string
    // 构造函数
    constructor(name: string) {
      // 初始化name属性
      this.name = name
    }
  }
  // 实例化类
  const person = new Person('一碗周')
  console.log(person.name) // 一碗周
})()

上面定义的那个类中具有一个构造函数和一个公共属性name,在类实例化时调用了constructor构造函数,调用对功能属性进行初始化。

上面的写法还有一种简写形式,如下所示:


;(function () {
  class Person {
    constructor(public name: string) {}
  }
  // 实例化类
  const person = new Person('一碗周')
  console.log(person.name) // 一碗周
})()

这个写法等同于上面那个写法。

3.继承

在面向对象的编程语言中,有一个重要得特征就是继承。继承就是基于某个类来扩展现有的类。

例如,爸爸在北京有一个四合院,儿子可以继承爸爸的四合院,而且还可以自己去买一栋别墅;最终儿子的房产拥有北京的四合院和一栋别墅。

在TS中继承使用extends关键字,示例代码如下:


;(function () {
  // 定义一个基类,又称超类
  class Person {
    // 在基类中定义一个name属性
    constructor(public name: string) {}
  }
  // 定义一个派生类,又称子类,继承于基类
  class Programmer extends Person {
    constructor(name: string, public hobby: string) {
      // 通过 super 调用基类的构造函数
      super(name)
    }
  }
  // 实例化子类
  const programmer = new Programmer('一碗周', 'coding')
  console.log(programmer.name, programmer.hobby) // 一碗周 coding
})()

如上示例代码中,Person称作基类 ,或者称超类 ,Programmer是一个派生类 ,或者称子类 。

在上面那个例子中,Programmer类通过extends关键字继承于Person类。子类拥有父类全部的属性和方法。

在子类的构造函数中,我们必须调用super()方法来执行基类的构造函数,这个是必须的。

类的继承不仅可以继承类,而且还可以在子类重写父类的属性或者方法。实例代码如下:


// 定义一个 Person类
class Person {
    constructor(public name: string) {}
    // 定义一个方法
    sayMy() {
        console.log(`我的名字: ${this.name}`)
    }
}
// 定义一个 Adult 类继承于 Person 类
class Adult extends Person {
    constructor(public age: number) {
        super('彼岸繁華')
    } // 重写父类方法
    sayMy() {
        console.log(`我的名字: ${this.name} 年龄: ${this.age}`)
    }
}
// 定义一个 Programmer 类继承于 Adult 类
class Programmer extends Adult {
    constructor(public hobby: string) {
        super(18)
    } // 重写父类方法
    sayMy() {
        console.log(
            `我的名字: ${this.name} 年龄: ${this.age} 爱好: ${this.hobby}`
        )
    }
}
// 类的实例化
const programmer = new Programmer('coding')
programmer.sayMy() // 我的名字: 彼岸繁華 年龄: 18 爱好: coding

首先我们定义了一个Person类,在类中定义了一个属性和一个方法;然后又定义了一个Adult类,这个类继承于Person类,并重写了Person类中的方法;最后又定义了一个Programmer类,这个类继承于Adult类,并重写了Adult类中的方法,也就是说Programmer类拥有Person类与Adult类中的全部属性与方法,但是sayMe()方法被重写了两次,也就是说Programmer类拥有3个属性和1个方法。

4.public、private、protected修饰符

public、private、protected修饰符的区别:

  • public:公开的,我们可以在类中自由的访问类中定义的成员。TS默认为public
  • private:私有的,仅仅可以在类中访问定义的成员,在类外访问不到
  • protected:受保护的,可以在本类或者子类中访问定义的成员。

示例代码如下所示:


// 定义一个 Person 类,其中包含 public 成员 private 成员和 protected 成员。
class Person {
  public name: string
  // 约定 私有成员一般采用 _ 开头
  private _age: number
  protected hobby: string
  // 属性初始化
  constructor(name: string, age: number, hobby: string) {
    this.name = name
    this._age = age
    this.hobby = hobby
  }
  sayMy() {
    console.log(this.name, this._age, this.hobby)
  }
}

// 实例化 Person 类
const person = new Person('一碗周', 18, 'coding')

console.log(person.name) // 一碗周
// 类外访问私有成员 抛出异常
// console.log(person._age) // 报错
// 类外访问保护成员 抛出异常
// console.log(person.hobby) // 报错

// private 成员和 protected 成员可以在类内访问
person.sayMy() // 一碗周 18 coding

// 定义一个类继承与 Person 类
class Programmer extends Person {
  constructor(name: string, age: number, hobby: string) {
    super(name, age, hobby)
  }
  sayMy() {
    console.log(this.name) // 一碗周
    // 在子类不可以访问父类的私有成员
    // console.log(this._age) // 报错
    // 在子类可以访问受保护的成员
    console.log(this.hobby) // coding
  }
}

// 实例化 Programmer 类
const programmer = new Programmer('一碗周', 18, 'coding')
programmer.sayMy()

// 确保跟其他代码中的成员冲突
export {}

如上代码中,我们可以在基类中访问,公共成员、私有成员和保护成员,但是我们在类外只能访问公共成员。当我们定义一个子类继承于Person类时,我们可以在子类访保护成员,但是不能访问私有成员。

4.1getters与setters

类中的私有成员和保护成员我们并不是真的不能读写,在TS中提供了getterssetters帮助我们有效的控制对对象成员的访问。

示例代码如下所示:


// 定义一个 Person 类
class Person {
  // 约定 私有成员一般采用 _ 开头
  private _name: string
  // 属性初始化
  constructor(name: string) {
    this._name = name
  }
  // 获取 私有的 _name 属性值
  get getName(): string {
    return this._name
  }
  // 设置 私有的 _name 属性值
  set setName(name: string) {
    this._name = name
  }
}
// 实例化类
const person = new Person('一碗粥')
// 通过 getName 的方式获取
console.log(person.getName) // 一碗粥
// 通过 setName 的方式设置 _name 的值
person.setName = '一碗周'
// 重新获取
console.log(person.getName) // 一碗周

5.readonly修饰符

我们可以通过 readonly修饰符将一个属性设置为只读的。只读属性必须在声明时或者在构造函数中进行初始化。

示例代码如下所示:


// 定义一个类,且具有一个只读属性
class Person {
  // readonly name: string
  // 等同于
  // public readonly name: string
  // constructor(name: string) {
  //     this.name = name
  // }
  // 或者
  constructor(public readonly name: string) {}
}
// 实例化
const person = new Person('一碗周')
console.log(person.name) // 一碗周
// 修改name的值
// person.name = '一碗周' // 错误! name 是只读的.

6.静态成员

在 TS 中我们也可以创建静态成员,这些属性或者方法是存在于类本身而不是存在于类的实例上。在 TS中定义静态成员与ES6中一样,都是使用static关键字来说明。

示例代码如下所示:


class Hero {
  // 计数器
  static count = 0
  constructor(public name: string) {
    // 每创建一个属性 count ++
    ++Hero.count
  }
}
// 实例一个 Hero 类
const hero1 = new Hero('孙悟空')
console.log(Hero.count) // 1
const hero2 = new Hero('哪吒')
console.log(Hero.count) // 2

这里我们用静态属性实现了一个记录实例化几个类的一个计数器。

7.抽象类

想要理解什么是抽象类,就需要先理解什么是抽象,所谓的抽象就是从众多的事物中抽取出共同的、本质性的特征,而舍弃其非本质的特征 。例如苹果、香蕉、生梨、葡萄、桃子等,它们共同的特性就是水果。得出水果概念的过程,就是一个抽象的过程。

抽象类就是将众多类中具有共同部分的功能抽离出来,单独创建一个类作为其他派生类的基类使用。他们不允许被实例化,定义抽象类使用abstract关键字。

抽象方法就是只有方法的定义,没有方法体,方法体需要在子类中进行实现。

示例代码如下:


// 通过 abstract 关键字 定义一个抽象类,该类不必进行初始化,仅作为基类使用
abstract class Department {
  // 初始化name成员,参数属性
  constructor(public name: string) {}

  printName(): void {
    console.log('部门名称: ' + this.name)
  }
  // 抽象方法必须包含 abstract 关键字
  abstract printMeeting(): void // 必须在派生类中实现
}

class AccountingDepartment extends Department {
  constructor() {
    super('会计部') // 在派生类的构造函数中必须调用super()
  }

  printMeeting(): void {
    console.log('会计部是负责管钱的部门')
  }
}

// const department = new Department() // 抛出异常:不能创建一个抽象类的实例
// 实例化抽象子类
const department = new AccountingDepartment()
// 调用抽象类中的方法
department.printName() // 部门名称: 会计部
// 调用在派生类实现的抽象方法
department.printMeeting() // 会计部是负责管钱的部门

8.类与接口

类定义会创建两个东西:类的实例类型和一个构造函数,因为类可以创建出类型,这一点与我们之前学习的接口类似,所以说我们可以在使用接口的地方使用类。

示例代码如下所示:


// 定义一个类
class Point {
    x: number
    y: number
}
// 定义一个接口继承与类
interface Point3D extends Point {
    z: number
}

let point3d: Point3d = { x: 1, y: 2, z: 3 }

类可以通过implement去实现一个接口,示例代码如下:


// 定义接口
interface Eat {
  eat(food: string): void
}
interface Run {
  run(distance: number): void
}

// 定义类实现接口
class Person implements Eat, Run {
  eat(food: string): void {
    console.log(food)
  }
  run(distance: number) {
    console.log(distance)
  }
}
export {}

到此这篇关于typescript中的类的文章就介绍到这了,更多相关TypeScript类内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript中的类

本文链接: https://www.lsjlt.com/news/159549.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript中的类
    目录1.概述2.定义一个简单的类3.继承4.public、private、protected修饰符4.1getters与setters5.readonly修饰符6.静态成员7.抽象类...
    99+
    2024-04-02
  • 详解TypeScript中的类型保护
    目录概述类型断言in语法instanceof 语法typeof 语法总结概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird...
    99+
    2024-04-02
  • TypeScript中的递归类型是什么
    这篇文章主要讲解了“TypeScript中的递归类型是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript中的递归类型是什么”吧!什么是递归类型?递归类型是指一个类型在定义...
    99+
    2023-07-05
  • Typescript中tuple类型怎么用
    小编给大家分享一下Typescript中tuple类型怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!tuple元组类型,允...
    99+
    2024-04-02
  • Typescript中boolean类型怎么用
    这篇文章主要为大家展示了“Typescript中boolean类型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Typescript中boolean类型怎...
    99+
    2024-04-02
  • Typescript中array类型怎么用
    小编给大家分享一下Typescript中array类型怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!array数组类型,跟...
    99+
    2024-04-02
  • Typescript中enum类型怎么用
    小编给大家分享一下Typescript中enum类型怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!enumenum类型是对...
    99+
    2024-04-02
  • Typescript中object类型怎么用
    小编给大家分享一下Typescript中object类型怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!object对象类型...
    99+
    2024-04-02
  • Typescript中never类型怎么用
    这篇文章将为大家详细讲解有关Typescript中never类型怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。nevernever是其他类型(包括null和unde...
    99+
    2024-04-02
  • Typescript中number类型怎么用
    这篇文章主要为大家展示了“Typescript中number类型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Typescript中number类型怎么用...
    99+
    2024-04-02
  • Typescript中string类型怎么用
    这篇文章给大家分享的是有关Typescript中string类型怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。string字符串类型,和javascript一样,可以使用双...
    99+
    2024-04-02
  • Typescript中any类型怎么用
    小编给大家分享一下Typescript中any类型怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!any可以指定任何类型的值...
    99+
    2024-04-02
  • 深入了解TypeScript中的映射类型
    目录1. 基本概念(1)索引访问类型(2)索引签名(3)联合类型(4)keyof 类型运算符(5)元组类型(6)条件类型2. 映射类型(1)初体验(2)概念(3)实例3. 实用程序中...
    99+
    2022-11-13
    TypeScript映射类型 TypeScript映射
  • TypeScript的class类怎么用
    本篇内容介绍了“TypeScript的class类怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!class 类类是面向对象语言的程序设...
    99+
    2023-06-29
  • TypeScript 的 extends 条件类型
    在TypeScript中,extends关键字不仅可以用于类的继承,还可以用于条件类型的定义。条件类型是一种在类型系统中进行条件判断...
    99+
    2023-09-21
    TypeScript
  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符
    目录1、类的定义2、类的继承3、修饰符前言: typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class 。本篇文章重...
    99+
    2024-04-02
  • TypeScript中的递归类型示例解析
    目录正文什么是递归类型?示例1:树形结构示例2:链表总结正文 在这篇博客中,我们将深入探讨TypeScript中的递归类型。递归类型是一种非常强大的功能,它允许我们对具有自相似结构...
    99+
    2023-05-14
    TypeScript递归类型 TypeScript 类型
  • TypeScript中的函数和类你了解吗
    目录函数作为参数定义函数函数参数的类型可选类型参数默认值剩余参数this的默认推导函数重载类初始化继承多态成员修饰符总结函数 以下声明了一个函数类型,通过type来定义类型别名,vo...
    99+
    2024-04-02
  • Typescript中的数据类型实例总结
    目录是什么有哪些booleannumberstringarraytupleenumanynull和undefinedvoidneverobject总结是什么 typescript和j...
    99+
    2024-04-02
  • Typescript中数据类型的示例分析
    这篇文章将为大家详细讲解有关Typescript中数据类型的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。是什么typescript和javascript几乎一样,拥有相同的数据类型,另外在jav...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作