TypeScript中的类 Class

已于 2023-01-02 11:52:32 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： TypeScript 文章标签： 前端
于 2022-12-29 18:32:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/128482419
版权

公共属性的修饰符：

  • public：公共，默认修饰符，外部和内部都能使用
  • private：私有的，只能内部类用，外部不能读写
  • protected：当前类和派生类(子类)可访问
  • readonly:外部只能读不能写
  • static：静态属性或静态方法

类的定义

class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

const u1 = new User("u1", 19);
const u2 = new User("u2", 20);
console.log(u1.getInfo()); // u1的年龄是19
console.log(u2.getInfo()); // u2的年龄是20

const users: User[] = [u1, u2];
console.log(users);

注意：

如果类中没有constructor ，则其中的属性需要初始化值，否则爆红

 如果类中有constructor ，但参数中没有给定义的属性赋值，也会爆红

class Person {
  name: string;
  age: number; //属性“age”没有初始化表达式，且未在构造函数中明确赋值

  constructor(name: string) {
    this.name = name;
  }
}

 public

  • 公共，默认修饰符，外部和内部都能使用

 

class User {
  public name: string;
  public age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

const u1 = new User("u1", 19);
console.log("u1:", u1);

u1.name = "张三";
console.log("u1_1:", u1);
  • 父类的 public， 子类只能设置为 public

class Person {
  public name: string = "";
  age: number = 0;
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  constructor(name: string) {
    super();
    this.name = name;
  }
  private getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

protected

protected 修饰符指受保护的，只允许在当前类与子类使用，不允许在类的外部使用

class User {
  protected name: string;
  public age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`; // 内部是可以访问 protected 的
  };
}

const u1 = new User("u1", 19);

u1.name = "张三"; // 属性“name”受保护，只能在类“User”及其子类中访问
console.log(u1.getInfo()); // 张三的年龄是19。虽然爆红，但依然能改
  • 父类的 protected ，子类可以修改为 protected 或 public，但不允许修改为private

class Person {
  name: string = "";
  age: number = 0;
  protected getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  private getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

private

private 修饰符指私有的，不允许在子类与类的外部使用

  • 子类不能访问父类的 private 属性或方法

class Person {
  protected name: string = "";
  private age: number = 22;
  protected info = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

class User extends Person {
  constructor(name: string, age: number) {
    super();
    this.name = name;
    this.age = age; // 子类不能访问父类的 private 属性或方法
  }
  public getInfo = (): string => {
    return this.info();
  };
}

const u1 = new User("u1", 19);
console.log(u1.getInfo()); // u1的年龄是19
  • 父类声明的 private 属性或方法，子类不允许覆盖

class Person {
  protected name: string = "";
  private age: number = 0;
  private getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  constructor(name: string, age: number) {
    super();
    this.name = name;
  }
  public getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

readonly

readonly 将属性定义为只读，不允许在类的内部与外部进行修改

class User {
  name: string;
  readonly sex: string;

  constructor(name: string, sex: string) {
    this.name = name;
    this.sex = sex;
  }
  test() {
    this.sex = "男"; //无法为“sex”赋值，因为它是只读属性
  }
}

const u1 = new User("u1", "男");
u1.sex = "保密"; // 无法为“sex”赋值，因为它是只读属性

constructor

构造函数是初始化实例参数使用的

我们可以在构造函数 constructor 中定义属性，这样就不用在类中声明属性了，可以简化代码量

必须要在属性前加上 public、private、readonly 等修饰符才有效

 

class User {
  constructor(public name: string) {}
  getInfo = () => {
    return this.name;
  };
}
const u1 = new User("u1");
console.log(u1.getInfo()); // u1

 派生类的构造函数必须包含 "super" 调用，如下：

 

class Person {
  name: string = "";
}
class User extends Person {
  constructor(name: string) {
    super();
    this.name = name;
  }
}

与普通函数相同，在构造函数中也可以定义可选参数、默认值参数和剩余参数。但是构造函数不允许定义返回值类型，因为构造函数的返回值类型永远为类的实例类型

 

class Person {
  public other: string[]
  constructor(public name: string, public age: number = 23, public isMan?: boolean, ...other: string[]) {
    this.name = name
    this.age = age;
    this.isMan = isMan;
    this.other = other
  }
}

let p = new Person("张三", 24, false, "hello", "123")
console.log("p:", p)

 static

static 用于定义静态属性或方法

 

class User {
  static sex: string = "保密";

  static getUserInfo() {
    return "性别是" + User.sex;
  }
}
console.log(User.sex); // 保密
console.log(User.getUserInfo()); // 性别是保密

 get/set

使用 get 与 set 访问器可以动态设置和获取属性

class User {
  constructor(public _name: string) {}

  public get name() {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }
}

const u1 = new User("u1");

console.log(u1.name); // u1
u1.name = "张三";
console.log(u1.name); // 张三

类实现接口  implements

类实现单个接口

interface IPerson {
  eat: () => void;
}

// 类实现接口
class p implements IPerson {
  eat() {
    console.log("吃饭");
  }
}

 类实现多个接口

interface IPerson {
  eat: () => void;
}

interface IPerson2 {
  run: () => void;
}

// 正常
class p implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
  run() {
    console.log("跑步");
  }
}

// 异常
class p2 implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
}

 类同时继承父类, 又实现单个或多个接口

interface IPerson {
  eat: () => void;
}

interface IPerson2 {
  run: () => void;
}

class User {}

// 正常
class p extends User implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
  run() {
    console.log("跑步");
  }
}

// 异常
class p2 extends User implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
}

类实现type

类既可以实现接口，也可以实现type

interface A {
  name: string;
  add: () => void
}
type B = {
  age: number,
  add: () => void
}

class C implements A {
  name = 'xx'
  add() {
    console.log('类实现接口')
  }
}

class D implements B {
  age = 20
  add() {
    console.log('类实现type')
  }
}

类继承 extends

 class B extends A {}

B称作派生类，或者子类。A称作基类，或者父类

 当派生类继承了基类后，就自动继承了基类的非私有成员

 

class Shape {
  color: string = 'black';

  switchColor() {
    this.color =
      this.color === 'black' ? 'white' : 'black';
  }
}

class Circle extends Shape { }

const circle = new Circle();

console.log(circle.color) // 'black'
circle.switchColor();
console.log(circle.color) // 'white'

 重写基类成员

在派生类中可以重写基类的成员变量和成员函数。

在重写成员变量和成员函数时，需要在派生类中定义与基类中同名的成员变量和成员函数 

class Shape {
  color: string = 'black';

  switchColor() {
    this.color =
      this.color === 'black' ? 'white' : 'black';
  }
}

class Circle extends Shape {
  color: string = 'red';

  switchColor() {
    this.color = this.color === 'red' ? 'green' : 'red';
  }
}

const circle = new Circle();

console.log(circle.color) // 'red'
circle.switchColor();
console.log(circle.color) // 'green'

 在派生类中，可以通过super关键字来访问基类中的非私有成员。当派生类和基类中存在同名的非私有成员时，在派生类中只能通过super关键字来访问基类中的非私有成员，无法使用this关键字来引用基类中的非私有成员。

class Shape {
  color: string = '黑色';

  switchColor() {
    this.color =
      this.color === '黑色' ? '白色' : '黑色';
  }
}

class Circle extends Shape {
  switchColor() {
    super.switchColor();
    console.log(`颜色是： ${this.color}`);
  }
}

const circle = new Circle();

circle.switchColor();  //颜色是： 白色
circle.switchColor();  //颜色是： 黑色

 若派生类重写了基类中的受保护成员，则可以将该成员的可访问性设置为受保护的或公有的。也就是说，在派生类中只允许放宽基类成员的可访问性。

class Base {
  protected x: string = '';
  protected y: string = '';
  protected z: string = '';
}

class Derived extends Base {
  // 正确
  public x: string = '';

  // 正确
  protected y: string = '';

  // 错误！派生类不能够将基类的受保护成员重写为更严格的可访问性
  private z: string = '';
}

由于派生类是基类的子类型，因此在重写基类的成员时需要保证子类型兼容性，如下：

class Shape {
  color: string = 'black';

  switchColor() {
    this.color =
      this.color === 'black' ? 'white' : 'black';
  }
}

class Circle extends Shape {
  // 编译错误
  // 类型'(color: string) => void'不能赋值给类型'() => void'
  switchColor(color: string) { }
}

 派生类实例化

  •  在派生类的构造函数中必须调用基类的构造函数，否则将不能正确地实例化派生类。在派生类的构造函数中使用“super()”语句就能够调用基类的构造函数。

class Shape {
  color: string = 'black';

  constructor() {
    this.color = 'black';
  }

  switchColor() {
    this.color =
      this.color === 'black' ? 'white' : 'black';
  }
}

class Circle extends Shape {
  radius: number;

  constructor() {
    super();

    this.radius = 1;
  }
}

  在派生类的构造函数中，引用了this的语句必须放在“super()”调用的语句之后，否则将产生编译错误，因为在基类初始化之前访问类的成员可能会产生错误

class Shape {
  color: string = 'black';

  constructor() {
    this.color = 'black';
  }

  switchColor() {
    this.color =
      this.color === 'black' ? 'white' : 'black';
  }
}

class Circle extends Shape {
  radius: number;

  constructor() {
    this.radius = 1;
    //  ~~~~
    //  编译错误，必须先调用 'super' 再访问 'this'
    super();
    // 正确
    this.radius = 1;
  }
}

 在实例化派生类时的初始化顺序如下：

  1. 初始化基类的属性。
  2. 调用基类的构造函数。
  3. 初始化派生类的属性。
  4. 调用派生类的构造函数。

 

class Shape {
  color: string = 'black';   // 1

  constructor() {            // 2
    console.log(this.color);
    this.color = 'white';
    console.log(this.color);
  }
}

class Circle extends Shape {
  radius: number = 1;        // 3

  constructor() {            // 4
    super();

    console.log(this.radius);
    this.radius = 2;
    console.log(this.radius);
  }
}

const circle = new Circle();

 单继承

TypeScript中的类仅支持单继承，不支持多继承，但支持多重继承。也就是说，在extends语句中只能指定一个基类。

 

class A { }
class B { }

class C extends A, B { }

 支持多重继承，如下：

class A { }

class B extends A { }
class C extends B { }

类类型

类声明将会引入一个新的命名类型，即与类同名的类类型。类类型表示类的实例类型，它由类的实例成员类型构成。 

class Circle {
  radius: number = 0;
  area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

interface CircleType {
  radius: number;
  area(): number;
}

// 正确
const a: Circle = new Circle();

// 正确
const b: CircleType = new Circle();

 在定义一个类时，实际上我们定义了一个构造函数。随后，我们可以使用new运算符和该构造函数来创建类的实例。我们可以将该类型称作类的构造函数类型，在该类型中也包含了类的静态成员类型。

class A {
  static x: number = 20;
  y: number = 100;
}

// 类类型，即实例类型
const a: A = new A();

interface AConstructor {
  new(): A;
  x: number;
}

// 类构造函数类型
const b: AConstructor = A;

console.log(a.y)  //100
console.log(b.x)  //20

 

疆~
关注
专栏目录
gettype获取类名_在TypeScript中运行时获取对象的类名
weixin_42355399的博客
12-31 2096
在TypeScript中运行时获取对象的类名是否可以使用typescript在运行时获取对象的类/类型名称？class MyClass{}var instance = new MyClass();console.log(instance.????); // Should output "MyClass"Adam Mills asked 2019-04-11T03:14:30Z9个解决方案306 v...
web前端之TypeScript的类class 中各类属性、方法，抽象类、多态
lin123_00的博客
06-18 604
一、TypeScript 中的类 class Persons { name: any; age: number | undefined; constructor(name: string, age: number) { this.name = name; this.age = age; } getName(): void { console.log(`${this.name}今年已经${this.age}岁了`); } } let p11 = new
typescript学习：class类
weixin_44828005的博客
10-22 365
本文内容如下 class类 如果你都有了答案，可以忽略本文章，或去TS学习地图寻找更多答案 ES6中的 TS类 公共属性修饰符： public：公开的，可读可写，默认修饰符 private：私有的，不可读不可写 protected：子类可访问 readonly: 只能读不能写 static：静态属性或静态方法（JS中也有） class Animal { public name: string; constructor(name: string){ this.name = name
TypeScript 类 (class) 详解
最新发布
WANGPF183的博客
07-08 1107
什么是类？TypeScript中的类是什么？什么是抽象类及抽象成员？
TypeScript Class(类)
weixin_34313182的博客
02-22 212
传统的JavaScript注重用函数和基于原型的继承来创建可复用的组件，但这可能让用习惯面对对象方式的程序员感到棘手，因为他们的继承和创建对象都是由类而来的。从JavaScript的下一个版本，ECMAScript 6开始，JavaScript程序员就能够用基于这种基于类的面对对象方式来创建编写自己的程序了。在TypeScript中，不需要再等JavaScript的下一个版本就已经支持开发者使用这...
TypeScript中的class
wh_200的博客
11-14 467
js中的class类 class Parent { constructor(x) { this.x = x; this.sayHello = function () { console.log("sayHello") } } getX() { console.log("getX==>", this.x)
TypeScript基础知识：类（Class）
imagine_tion的博客
07-13 734
1 类的属性与方法 在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。 在 TypeScript 中，我们可以通过 Class 关键字来定义一个类： class Greeter { // 静态属性 static cname: string = "Greeter"; // 成员属性 greeting: string; // 构造函数 - 执行初始化操作 constructor(message: string) { .
typescript-class
qq_41306423的博客
09-02 152
日期： 2019 年 9 月2 日 类 类的例子 /** * @description 类 * @class Greeter */ class Greeter{ greeting: string; constructor(message: string){ this.greeting = message; } greet(){ re...
深入理解JavaScript和TypeScript中的class
12-12
`class` 在 JavaScript 和 TypeScript 中是面向对象编程的关键构造，用于定义类，它是从其他语言（如 Java 和 C#）引入 JavaScript 的一个特性。在 ES6 中，`class` 关键字提供了一种更加简洁、易读的语法来声明类，...
dojo-typescript-class:一个旨在使用 TypeScript 创建 Dojo 类的实验
07-04
这个想法是使用普通的 TypeScript/ES6 语法创建类，然后将该原型对象传递给 Dojo 的declare()函数以创建 Dojo 类，然后将 Dojo 类中有趣的部分合并回 TypeScript 中。 运行单元测试 运行此代码的测试需要几个步骤。...
简单了解TypeScript中如何继承 Error 类
10-16
在TypeScript中，继承Error类是为了创建自定义的错误类型，以便更好地管理和处理特定场景下的异常情况。在JavaScript中，Error对象是一个内置的错误对象，它具有错误消息、调用栈等特性。当我们需要在网络错误、...
typescript class
qq_42389674的博客
10-14 2025
什么是class class是基于原型继承的一种语法 示例 解析 class Animal { name: string; static name1:string="6666" constructor(theName: string) { this.name = theName; } move(distanceInMeters: Number = 0) { console.log(`${this.name}moved${distanceInMeters}`);.
TypeScript——类（class）
lmyh1111的博客
08-04 325
//使用class关键字来定义一个类 /* * 对象中主要包含了两部分：属性 方法 */ class Person { /** * 直接定义的属性是实例属性，需要通过对象的实例去访问： * const per = new Person(); * per.name * * 使用static开头的属性是静态属性(类属性),可以直接通过类去访问属性： * Person.age * *
TypeScript 类
X W F
03-16 146
TypeScript 类 TypeScript 是面向对象的 JavaScript。 类描述了所创建的对象共同的属性和方法。 TypeScript 支持面向对象的所有特性，比如 类、接口等。 TypeScript 类定义方式如下： class class_name { // 类作用域 } 定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）： 字段 − ...
TypeScript中的class（类）
m0_45093055的博客
07-02 3445
TypeScript中的class与es5实现
typescript[3]-class
扑满大师
01-17 429
// -------- Classes(类) -------- // 传统的javascript依赖在函数和原型链(prototype)作为基础概念来构建可重用的部件 // 但是对于习惯了面对对象编程(class继承功能,对象由class来生成)的程序员来说,还是有点麻烦 // 从ES6开始,下一个版本的javascript,js程序员也可以使用面对对象编程 // 在typescript,我们
TypeScript:class类
ZMN0057的博客
04-05 441
/ 类中主要包含两个部分：属性&方法// 定义实例属性name:string="张三";// 使用static关键字定义的属性（静态属性|类属性），即不用通过new实例可以直接访问的属性// readonly:表示一个只读的属性// 只读静态属性// 定义实例方法sayHi(){alert('你好');
TypeScript学习-类class
Smile_666666的博客
02-25 2131
1、类的定义 类 class 类名{ 属性（静态属性，动态属性） 方法（静态方法，动态方法） } class Person { name: string = 'zhangsan' // 定义实例属性 （只有实例化后才能调用） // const per = new Person() // console.log(per.name) static age: number = 18 // 定义类属性（静态属性），前加一个static
TypeScript类class（超详细）
qq_51904231的博客
11-29 1779
类（Class）：定义了一件事物的抽象特点，包含它的属性和方法 - 对象（Object）：类的实例，通过 `new` 生成 - 面向对象（OOP）的三大特性：**封装、继承、多态** - 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据 - 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值