TypeScript 类

最新推荐文章于 2024-08-27 16:58:03 发布
最新推荐文章于 2024-08-27 16:58:03 发布
阅读量809 收藏 18
点赞数 23
分类专栏： 鸿蒙4.0开发 文章标签： typescript 鸿蒙4.0 面向对象 类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www586089/article/details/135407281
版权

目录

1、实例

2、创建类的数据成员

3、创建实例化对象

4、完整实例

5、类的继承

6、继承类的方法重写

7、static关键字

8、instanceof运算符

9、访问控制修饰符

10、类和接口

        TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。支持面向对象的所有特性，比如 类、接口等。

        TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

        定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

  • 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

  • 构造函数 − 类实例化时调用，可以为类的对象分配内存。

  • 方法 − 方法为对象要执行的操作。

1、实例

        创建一个 Person 类：

class Person {
}

        编译以上代码，得到以下 JavaScript 代码：

var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());

2、创建类的数据成员

        以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine。

        this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同，this.engine 表示类的字段。

        此外我们也在类中定义了一个方法 disp()。

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}

        编译以上代码，得到以下 JavaScript 代码：

var Car = /** @class */ (function () {
    // 构造函数 
    function Car(engine) {
        this.engine = engine;
    }
    // 方法 
    Car.prototype.disp = function () {
        console.log("发动机为 :   " + this.engine);
    };
    return Car;
}());

3、创建实例化对象

        我们使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])

        类实例化时会调用构造函数，例如：

var obj = new Car("Engine 1")

        类中的字段属性和方法可以使用 . 号来访问：

// 访问属性
obj.field_name 

// 访问方法
obj.function_name()

4、完整实例

        以下实例创建来一个 Car 类，然后通过关键字 new 来创建一个对象并访问属性和方法： 

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

        编译以上代码，得到以下 JavaScript 代码：

var Car = /** @class */ (function () {
    // 构造函数
    function Car(engine) {
        this.engine = engine;
    }
    // 方法
    Car.prototype.disp = function () {
        console.log("函数中显示发动机型号  :   " + this.engine);
    };
    return Car;
}());
// 创建一个对象
var obj = new Car("XXSY1");
// 访问字段
console.log("读取发动机型号 :  " + obj.engine);
// 访问方法
obj.disp();

        输出结果为：

读取发动机型号 :  XXSY1
函数中显示发动机型号  :   XXSY1

5、类的继承

        TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

        类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

        TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

        语法格式如下：

class child_class_name extends parent_class_name

        实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性：

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

        编译以上代码，得到以下 JavaScript 代码：

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Shape = /** @class */ (function () {
    function Shape(a) {
        this.Area = a;
    }
    return Shape;
}());
var Circle = /** @class */ (function (_super) {
    __extends(Circle, _super);
    function Circle() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Circle.prototype.disp = function () {
        console.log("圆的面积:  " + this.Area);
    };
    return Circle;
}(Shape));
var obj = new Circle(223);
obj.disp();

        输出结果为：

圆的面积:  223

        需要注意的是子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承，如下实例：

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

        编译以上代码，得到以下 JavaScript 代码：

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Root = /** @class */ (function () {
    function Root() {
    }
    return Root;
}());
var Child = /** @class */ (function (_super) {
    __extends(Child, _super);
    function Child() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return Child;
}(Root));
var Leaf = /** @class */ (function (_super) {
    __extends(Leaf, _super);
    function Leaf() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return Leaf;
}(Child)); // 多重继承，继承了 Child 和 Root 类
var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

        输出结果为：

hello

6、继承类的方法重写

        类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

        编译以上代码，得到以下 JavaScript 代码：

var obj = new StringPrinter() 
obj.doPrint()
 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var PrinterClass = /** @class */ (function () {
    function PrinterClass() {
    }
    PrinterClass.prototype.doPrint = function () {
        console.log("父类的 doPrint() 方法。");
    };
    return PrinterClass;
}());
var StringPrinter = /** @class */ (function (_super) {
    __extends(StringPrinter, _super);
    function StringPrinter() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    StringPrinter.prototype.doPrint = function () {
        _super.prototype.doPrint.call(this); // 调用父类的函数
        console.log("子类的 doPrint()方法。");
    };
    return StringPrinter;
}(PrinterClass));
var obj = new StringPrinter();
obj.doPrint();

输出结果为：

父类的 doPrint() 方法。
子类的 doPrint()方法。

7、static关键字

        static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

        编译以上代码，得到以下 JavaScript 代码：

var StaticMem = /** @class */ (function () {
    function StaticMem() {
    }
    StaticMem.disp = function () {
        console.log("num 值为 " + StaticMem.num);
    };
    return StaticMem;
}());
StaticMem.num = 12; // 初始化静态变量
StaticMem.disp(); // 调用静态方法

        输出结果为：

num 值为 12

8、instanceof运算符

        instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

         编译以上代码，得到以下 JavaScript 代码：

var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());
var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj 对象是 Person 类实例化来的吗？ " + isPerson);

         输出结果为：

obj 对象是 Person 类实例化来的吗？ true

9、访问控制修饰符

        TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

  • public（默认） : 公有，可以在任何地方被访问。

  • protected : 受保护，可以被其自身以及其子类访问。

  • private : 私有，只能被其定义所在的类访问。

        以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

10、类和接口

        类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。以下实例中 AgriLoan 类实现了 ILoan 接口：

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

编译以上代码，得到以下 JavaScript 代码：

var AgriLoan = /** @class */ (function () {
    function AgriLoan(interest, rebate) {
        this.interest = interest;
        this.rebate = rebate;
    }
    return AgriLoan;
}());
var obj = new AgriLoan(10, 1);
console.log("利润为 : " + obj.interest + "，抽成为 : " + obj.rebate);

输出结果为：

利润为 : 10，抽成为 : 1

昉钰
关注
专栏目录
ts2swagger：从TypeScript类创建Swagger API
02-03
从TypeScript类自动创建Swagger文档和Express端点。 工具支持 从TypeScript函数声明自动推断类型 为Express生成可调用的服务端点 将类，接口和方法以及JSDoc注释读入Swagger文档 使用TypeScript定义参数和返回值...
struct2ts：从Go结构中生成Typescript类接口
02-05
一个非常简单且功能强大的Go结构到Typescript类生成器。 受启发。 安装 go get -u -v github.com/OneOfOne/struct2ts/... 产品特点 如果您不想自己编写生成器，则可以使用相当不错的命令行界面。 自动处理Go int...
「TypeScript系列」TypeScript 类/类继承
日常笔记/总结/系列知识梳理
05-26 1489
访问控制修饰符对于封装和隐藏类的内部状态特别有用，它们允许你定义哪些成员是公开的（可以被外部使用），哪些成员是私有的（只能在类内部使用），以及哪些成员是受保护的（可以在类内部和子类中使用）。TypeScript 提供了基于类的面向对象编程的语法，这允许你定义类、属性和方法，以及实现继承、封装和多态等面向对象的概念。关键字，但实际上是重写了父类的方法，并且父类的方法在后续版本中发生了更改（例如，方法签名改变了），那么 TypeScript 编译器可能不会给出明确的错误提示，这可能会导致运行时错误。
TypeScript 接口和TypeScript类
samxiaoguai的博客
12-22 1182
一、TypeScript 接口 1.TypeScript 接口的定义和简单使用 2.联合类型和接口 3.接口和数组 4.接口继承 二、TypeScript 类 1.TypeScript 类的定义和简单使用 2.TypeScript 类继承 3.TypeScript 类继承的方法重写 4.TypeScript 类static 关键字 5.TypeScript instanceof 运算符 7.TypeScript 访问控制修饰符 8.TypeScript 类和接口
TypeScript类和继承
weixin_42560424的博客
03-20 2137
TypeScript中的类和继承可以帮助我们更好地组织代码，并且使得代码更易于维护和扩展。在TypeScript中，可以使用class关键字来定义一个类，然后使用extends关键字来实现继承。
TypeScript类的可访问性修饰符
前端御书房
03-05 624
类成员的修饰符 public：公有属性 private：私有属性，外部不能访问，只在类内部访问 protected：受保护的，自身和子类访问 类成员的存取器 将普通方法向外部暴露通过该方法对私有属性进行赋值 class Person { //成员字段 private name: string private age: number | undefined //构造方法 constructor(name: string, age?: number) { this.name = name;
TypeScript 类 (class) 详解
WANGPF183的博客
07-08 1270
什么是类？TypeScript中的类是什么？什么是抽象类及抽象成员？
Typescript类与接口
longtengg1的博客
12-21 399
类可以通过接口的方式，来定义当前这个类的类型。 类实现接口， 接口定义（约束）类 接口继承接口 1、一个类实现一个接口 定义一个接口 定义一个类时，implements这个接口，那么在这个类中，就必须要实现这个接口中所定义内容 interface IFly { fly(); } class Person implements IFly { fly() { console.log("飞"); } } const perso
Typescript类的修饰符
longtengg1的博客
12-21 575
类中成员的修饰符，用来描述类中成员（属性、构造函数、方法）的可访问性。 1、public修饰符 当我们写一个类时，如果没有添加修饰符，那么类中成员就会有默认的修饰符public，表示公共的，在任何位置都可以访问该成员，在外部如a.name，在子类的内部（通过this.name） class Person{ public name:string; public age:number; public constructor(name:string,age:number)
TypeScript 类的使用
weixin_51614564的博客
07-16 303
5.通过this.name拿到Person里面的那个name,然后把constrector里面的name赋值给this.name。二、类的继承2子类继承父类(可通过super关键字调用父类构造器）2.这里也可以有很多的动物，例如狗，他会继承制Animal。1.这里定义一个Animal它们都会会跑。此案例是在父类子类都没有初值值的情况下的。4.在创建对象的时候，会执行构造器。2.在这个类里面定义属性或者方法。二、类的继承1子类继承父类。一、类的定义最基本方式。...
C#类转TypeScript类
m0_37880556的博客
09-28 969
avro-to-typescript：将Apache Avro模式文件编译为TypeScript类
02-02
avro-to-typescript将avro模式文件（.avsc）编译为TypeScript类和接口。 使用带有node.js的Avro原理图变得容易又舒适。 产品特点 编译大多数（如果不是全部）avro类型（ record ， enum ， primitive ， map ， ...
DotNetWebSDK:用于生成TypeScript类的库.NET模型类的AJAX包装器
05-23
该项目的目标是实现类似于代码优先的迁移，除了.NET模型=>数据库模式之外，它是.NET模型=> TypeScript模型类和用于AJAX调用的API访问层。 用法 即将推出。 请访问以了解有关该项目的更多信息。
serialized-request：发出HTTP请求，并序列化对JavascriptTypescript类对象的请求和响应
02-09
发出HTTP请求，并对Javascript / Typescript类对象的请求和响应进行序列化/反序列化。 Serialized-Request使用处理HTTP调用，并使用将普通对象与类对象相互转换 安装 npm i @simpli/serialized-request axios class...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
最新发布
CallMe_CrabXie的博客
08-27 2111
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
7. 吴恩达机器学习课程-作业7-Kmeans and PCA
wujing1_1的博客
02-22 1053
fork了别人的项目，自己重新填写，我的代码如下 https://gitee.com/fakerlove/machine-learning/tree/master/code 代码原链接 文章目录7. 吴恩达机器学习课程-作业7-Kmeans and PCA7.1 k-means7.1.1 题目介绍7.1.2 算法流程7.1.3 实现k-means7.1.4 测试7.2 图像压缩与k-均值7.3 PCA7.3.1 题目介绍7.3.2 算法流程7.3.3 代码1) 示例数据集2) 实现PCA3) 脸图像数据集
算法提高分类学习刷题——1.动态规划——1.3背包模型
m0_51474171的博客
02-25 3517
（1）01背包 模型 题目介绍 有 N件物品和一个容量为 V 的背包，每件物品有各自的价值且只能被选择一次，要求在有限的背包容量下，装入的物品总价值最大。 「0-1 背包」是较为简单的动态规划问题，也是其余背包问题的基础。 动态规划是不断决策求最优解的过程，「0-1 背包」即是不断对第 i个物品的做出决策，「0-1」正好代表不选与选两种决定。 二维 （1）状态f[i][j]定义：前i个物品，背包容量j下的最优解（最大价值）： 当前的状态依赖于之前的状态，可以理解为从初始状态f[0][0] = 0开.
算法提高分类学习刷题——1.动态规划——1.2.最长上升子序列模型
m0_51474171的博客
02-21 1484
最长上升子序列模型 1.最长上升子序列 题目描述 给定一个长度为 N 的数列，求数值严格单调递增的子序列的长度最长是多少。 输入格式 第一行包含整数 N。 第二行包含 N 个整数，表示完整序列。 输出格式 输出一个整数，表示最大长度。 数据范围 1≤N≤1000， −109≤数列中的数≤109 输入样例： 7 3 1 2 1 8 5 6 输出样例： 4 解题思路 因为以i结尾的子序列，一定是由前i-1个数结尾的子序列长度加一取max 比如一个子序列a[j]a[i] ,那么当a[j]<a[i
typescript类
09-11
在TypeScript中，类是一种面向对象的编程结构，用于创建对象和定义对象的属性和方法。 要创建一个类，在TypeScript中使用关键字`class`，后跟类的名称。类可以有属性和方法。 下面是一个简单的 TypeScript 类的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值