ts如何使用class类？与js的class类有什么区别？

原创 已于 2022-08-23 17:01:39 修改 · 2.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
不许偷代码哦，一键三连以后我的代码就是你的代码！！！
文章标签：

#开发语言 #ts #typescript

于 2022-08-23 16:58:56 首次发布
本文介绍了 TypeScript 中的类(class)概念，包括对象(object)、面向对象的三大特性（封装、继承、多态），并展示了如何定义和使用类。强调了 TypeScript 特有的修饰符如 public、private、protected 和 static 的作用。private 属性限制了外部访问，protected 允许子类访问，而 static 关键字用于创建静态属性和方法。此外，还讨论了 readonly 关键字用于创建只读属性。文章通过实例展示了如何在 TypeScript 中应用这些概念。

类的简介

类(class): 定义了一切事物的抽象特点(属性和方法)
对象(object): 类的实例(通过 new 来生成)
面向对象特点: 封装,继承,多态

  • 封装: 将操作数据的细节隐藏起来,只暴露接口, 调用者只需要通过接口来访问对象
  • 继承: 子类继承父类, 子类除了拥有父类的特性外还可以拥有更加具体的特性
  • 多态: 同一个方法可以有不同的响应(猫和狗都继承自动物类,但是他们叫声各有不同)

在ts中如何使用class类呢？

定义

class 类名 { }

使用

const 形参 = new 类名(传参)

class Fn {
	name: string = '你吃饭了吗?'
}
const fn = new Fn
console.log(fn.name)

在这里插入图片描述

我这里使用的是 Code Runner这个插件，可以直接执行当前文件
在这里插入图片描述

ts的class类和js的class类有什么区别吗？

ts的特有属性:修饰符

public 公开的

默认公共 public 自由访问程序里定义的变量和方法
在这里插入图片描述

private 私有的

私有的 private 当成员被标记为私有属性，只能在类进行使用，不能外部使用,子类也不可访问

在这里插入图片描述

这边继承也是无法使用的
在这里插入图片描述

使用方式
在这里插入图片描述

protected 受到保护的

受保护的 protected 和private相似，唯一不同的是，被protected修饰的属性可以在子类中访问
在这里插入图片描述

static 静态的

当类中的方法被声明 为 static 时，其 实例化对象,不可调用该方法，只有类本身 ，以及其子类可以调用。

这里使用实例化打印Fn这个类的时候，会发现定义static的属性已经消失了
在这里插入图片描述

如何获取静态属性呢？
在这里插入图片描述

readonly 只读的

readonly人们常常与const相比，使当前的实例属性是只读的，不可以修改

如何修改实例属性呢？

在这里插入图片描述

修改静态属性
在这里插入图片描述

如何获取readonly的属性
在这里插入图片描述
当你要修改只读属性的时候在这里插入图片描述

小锦囊

static 和 readonly 是可以一起使用的.
在这里插入图片描述

但是 划重点了啊
static 必须在前面,因为static决定了你的访问方式,默认是实例化属性，但是是需要先将实例化属性改为静态属性才能继续获取到里面的参数
在这里插入图片描述

【TypeScript】ts中的Classes使用方法介绍
qq_2511276124的博客
05-23 2143
TypeScript 完全支持 ES2015 中引入的类关键字。 与 JavaScript 语言的其他功能一样，TypeScript 添加了类型注解和其他语法，允许您表达类与其他类型之间的关系。
【零基础入门TypeScript】类 - class
共同学习、强我国家
02-28 1293
TypeScript 是面向对象的 JavaScript。TypeScript 支持面向对象的编程功能，如类、接口等。OOP 中的类是创建对象的蓝图。类封装了对象的数据。Typescript 为这个称为类的概念提供了内置支持。JavaScript ES5 或更早版本不支持类。Typescript 从 ES6 中获得了这个功能。
typescript 高级类型-class类详解
JiuMeilove的博客
02-19 2364
typescript 全面支持es2015中引入的class关键字,并为其添加了类型注解,和其它语法(比如,可见性修饰符等),class 基本使用,如下tips1. 根据ts中的类型推论,可以知道Person的实例对象p的类型是Person2. ts中的class,不仅提供了class的语法功能,也作为一种类型存在成员初始化(比如,age:number)后才可以通过this.age来访问实例成员需要为构造函数指定类型注解,否则会被隐式推断为any;构造函数不需要返回值类型。
TS基础（三）——class及修饰符
最新发布
weixin_45630345的博客
11-17 226
readonly: 只读修饰符，只能修饰属性，不能修饰方法；只能在constructor中进行赋值。protected：表示受保护的，仅对其声明所在类和子类中（非实例对象）可见。private：表示私有的，只在当前类中可见，在子类及实例中不可见。implements（在类中实现接口指定的所有方法和属性）extends（两个类之间，子类继承父类）
TS中class类的基本使用
XunLin233的博客
09-27 798
class 类名 { }// 使用class关键字来定义一个类// 使用new关键字创建一个对象直接定义的属性是实例属性，需要通过对象的实例去访问属性名 : 数据类型 = 属性值;// 数据类型可以省略// 直接定义的属性是实例属性，需要通过对象的实例去访问name: string = "寻霖";// 寻霖使用static关键字开头的属性是静态属性静态属性可以直接通过类去访问，不可以通过实例对象去访问static 属性名 : 数据类型 = 属性值;// 数据类型可以省略。
javascript 中的class 和typescript中的class的区别
有一棵树的博客
02-18 629
JavaScript 中的类（class）和 TypeScript 中的类有一些相似之处，但 TypeScript 在其类的定义和使用方面引入了一些额外的功能和语法糖，以提供更严格的类型检查和更丰富的面向对象编程功能。TypeScript 和 JavaScript 都支持静态属性和方法，但 TypeScript 可以对静态属性和方法进行类型注解和类型检查。TypeScript 中的类支持在声明时直接初始化属性和方法，而 JavaScript 中的类必须在构造函数中初始化。
ts中的特殊符号 ?. ?: 等代表的含义与使用
热门推荐
浩星
03-29 1万+
ts相比较js来说，是比较严格的，他中间新增了很多可选链符号，比如：?. ?: !.
【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解
余浩的博客
03-06 5619
（1）vue-class-component 是官方出品； vue-property-decorator 是社区出品； （2）vue-class-component 提供了Vue、Component等； （3）vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；
面试题：ts有什么功能？你对ts的理解？ts与js的区别是什么？用中文回复，必要时用代码表述。
07-22
下面是我对 TypeScript 的理解和 TS 与 JS 的区别： 1. 类型系统：TypeScript 引入了静态类型检查，允许开发者在代码中显式地定义变量、函数和对象的类型。这样可以在编译阶段发现一些错误，提前解决一些潜在的 bug...
react+ts用class类实现五子棋
qq_40610760的博客
11-15 667
【代码】react+ts用class类实现五子棋。
精选资源
vuex-class-component:使用以 TypeScript 编写的 ES6 类和 ES7 装饰器的类型安全 Vuex 模块或存储
08-04
使用 ES6 类和 ES7 装饰器的 Vuex 模块的类型安全解决方案，适用于 TypeScript 和 JavaScript。 安装 $ npm install --save vuex-class-component 新API 新 API 的目标是减少装饰器开销和 我们通常如何定义 Vuex ...
TS--类（class）
weixin_68211919的博客
09-01 3431
一、基本知识 二、类 三、对象和内存 四、this：和js中的this用法一样，谁调用，this就指向谁 五、构造函数（constructor） 六、静态方法 七、存取器 八、继承（extends） 九：super 它是用来创建具有相似属性和行为的对象的一个模板或蓝图。类定义了对象的属性（成员变量）和行为（成员函数），并通过创建对象来实例化类。对象是具有类类型的变量：（1）类是对象的抽象，而对象是类的剧吐实例（2）类是抽象的，不占用内存，而对象是具体的，占用存储空间（3）类是用于创建对象的规划，抽象。
ts和js class
april_4的博客
04-19 1316
这几天看老外的ts，要转成js 学习了下ts里面的类 用tsc 转换了下 ts 部分 class Doit{ static hello:number=12321; showHello(){ console.log(Doit.hello) } } js 部分 var Doit = /** @class */ (function () { function...
ts中class类讲解
thickhair_cxy的博客
10-01 1375
class Person { name: string static sex: string = '男' public gy = '公有的'//默认是公有的，可以被任何地方访问 private sy = '私有的'//只能在当前类内部访问 protected bh: string = '保护的'//只能在当前类内部和子类内部访问 constructor(n: string) { this.name = n console.log('保护1', this.bh)
【TS】class类和接口
分享互联网的有趣知识~
11-15 5429
class可以用来做数据的存储与回显，能将页面的数据分离出来并提取到class内，函数也可以提取到class，使用class进行调用。ts中的class类与js的class类基本相同，不同点在于`ts`的`class`有数据类型约束，在使用`class`的时候，必须遵循定义的数据类型约束，class中有一个constructor，它可以更改class的属性值，实例化class进行传值的时候，传入的值也必须符合constructor接参的数据规定。
ts 中 class 类介绍
fukua007的博客
08-06 378
/ public 修饰的属性可以在任意位置访问（修改）默认值。// private 私有属性，只能在类内部进行访问（修改）对象中主要包含两个部分 ：1.属性 2.方法。// 以abstract开头的类是抽象类。// 抽象类就是专门用来被继承的类。使用class 关键字定义一个类。constructor 构造函数。// 抽象类中可以添加抽象方法。继承 extends。
TS-class
qq_41219789的博客
09-10 533
TS学习 Class（类） 基本使用 class Person{ name:string; age:number; constructor(name:string,age:number){ this.name = name; this.age = age; } print(){ return this.name...
前端TS的类(class)!!!
xiaozhou4233的博客
01-22 1435
上例中 Student 类没有定义自己的属性，可以不写 super ，但是如果 Student 类有自己的属性，就要用到 super 关键字来把父类的属性继承过来。定义一个类，这个类的类型是ifly和iswim(当前这个类可以实现多个接口，一个类同时也可以被多个接口进行约束)子类中可以调用父类中的构造函数，使用的是super关键字(包括调用父类中的实例方法，也可以使用super)定义一个类，这个类的类型就是上面定义的接口(实际上也可以理解为，ifly接口约束了当前的这个Person)
TS中的类(class)
Gleason
02-11 7756
类(class): 定义了一切事物的抽象特点(属性和方法) 对象(object): 类的实例(通过 new 来生成) 面向对象特点: 封装,继承,多态 封装: 将操作数据的细节隐藏起来,只暴露接口, 调用者只需要通过接口来访问对象 继承: 子类继承父类, 子类除了拥有父类的特性外还可以拥有更加具体的特性 多态: 同一个方法可以有不同的响应(猫和狗都继承自动物类,但是他们叫声各有不同) 封装 抽象一个动物类, 拥有名字属性和奔跑的动作 // 创建基本类 基类 class Animal { // 属性
TS class类 的 #getValues 和 privete getValues区别
08-22
<think>我们正在讨论TypeScript中两种不同的私有方法声明方式：`#getValues`（使用私有字段语法）和`private getValues`（使用访问修饰符）。这两种方式在实现私有性上有本质区别。 ### 一、核心区别概述 | 特性 | `#getValues` (硬私有) | `private getValues` (软私有) | |--------------------------|-------------------------------|-------------------------------| | **编译时检查** | ✅ 语法错误 | ✅ 编译错误 | | **运行时保护** | ✅ 完全无法访问 | ❌ 可通过反射突破 | | **继承访问** | ❌ 子类不可访问 | ❌ 子类不可访问 | | **类型兼容性影响** | ❌ 不影响类型结构 | ✅ 影响类型结构（编译时移除） | ### 二、详细机制解析 #### 1. `#getValues` - ECMAScript标准私有方法 - **本质**：使用JavaScript原生私有字段语法（ES2022+） - **编译结果**： ```javascript class MyClass { #getValues() { /* ... */ } } ``` 编译为ES5时通过`WeakMap`模拟私有性： ```javascript var _getValues = new WeakMap(); class MyClass { constructor() { _getValues.set(this, function() { /* ... */ }); } } ``` - **运行时行为**： - 外部访问`instance.#getValues`直接抛出`SyntaxError` - 无法通过`Object.getOwnPropertyNames`获取 #### 2. `private getValues` - TypeScript访问修饰符 - **本质**：编译阶段的类型检查约束 - **编译结果**： ```typescript class MyClass { private getValues() { /* ... */ } } ``` 编译为ES5后移除`private`标记： ```javascript class MyClass { getValues() { /* ... */ } // 变为公有方法！ } ``` - **运行时行为**： - 外部仍可调用`instance.getValues()` - 仅依赖TS类型检查阻止非法访问 ### 三、实际影响对比 #### 场景1：跨文件访问 ```typescript // FileA.ts class SecretVault { #realCode = 123; // 硬私有 private backup = 456; // 软私有 } // FileB.ts const vault = new SecretVault(); vault.#realCode; // ❌ 语法错误（即使忽略TS检查） vault.backup; // ❌ TS编译错误，但JS运行时可访问！ ``` #### 场景2：使用纯JavaScript代码突破限制 ```javascript // 在JavaScript文件中 import { SecretVault } from './FileA'; const vault = new SecretVault(); vault.backup; // ✅ 实际可访问！(因为编译后private被移除) vault.#realCode; // ❌ 始终不可访问 ``` ### 四、设计选择建议 | 需求场景 | 推荐方案 | 原因 | |-------------------------|-------------------|-------------------------------| | 严格防止运行时访问 | `#getValues` | 确保即使脱离TS环境也不暴露 | | 需要兼容旧JS环境 | `private` | 硬私有语法需要ES2022+支持 | | 开发公共库 | `#getValues` | 避免私有方法被下游用户误用 | | 需要反射访问 | `private` | 硬私有完全无法反射访问 | ### 五、代码示例验证 #### TypeScript硬私有示例 ```typescript class EncryptionService { #key: string; // 硬私有字段 constructor(initialKey: string) { this.#key = initialKey; } #rotateKey() { // 硬私有方法 this.#key = this.#key.split('').reverse().join(''); } encrypt(data: string) { this.#rotateKey(); return Buffer.from(data).toString('base64'); } } // 测试访问 const service = new EncryptionService('secret'); service.encrypt('hello'); service.#key; // ❌ TS错误 + JS运行时错误 service.#rotateKey; // ❌ 同上 ``` #### TypeScript软私有示例 ```typescript class Database { private connectionString: string; constructor(conn: string) { this.connectionString = conn; } private connect() { console.log(`Connecting to ${this.connectionString}`); } } // 编译为JS后： /* class Database { constructor(conn) { this.connectionString = conn; } connect() { // 注意：private被移除！ console.log(`Connecting to ${this.connectionString}`); } } */ // 在JavaScript中可突破访问 const db = new Database('mysql://root@localhost'); db.connect(); // ✅ 实际可调用！ ``` ### 六、关键结论 1. **安全性优先级**：需要严格私有时选择`#fields`，如加密密钥处理[^1] 2. **运行时环境**：目标环境支持ES2022+时优先使用硬私有 3. **反射需求**：当需要保留反射访问可能性时使用`private` > 在大型TypeScript项目中，建议对核心安全模块使用硬私有(`#`)，对普通业务模块使用`private`以保持灵活性[^2]。 §§相关问题§§ 1. TypeScript的`private`修饰符在编译后如何保证私有性？ 2. 如何在继承体系中访问父类的私有方法？ 3. JavaScript的私有字段语法(`#`)有哪些浏览器兼容性问题？ 4. TypeScript中能否同时使用`#`和`private`声明同一个方法？ [^1]: 参见《TypeScript编程》第4章 - 类与对象 [^2]: TypeScript官方文档 [Classes - ECMAScript Private Fields](https://www.typescriptlang.org/docs/handbook/classes.html#ecmascript-private-fields)</think>### TypeScript 中 `#getValues`（硬私有）与 `private getValues`（软私有）的区别 #### 一、核心差异总结 | **特性** | `#getValues` (ECMAScript 私有字段) | `private getValues` (TypeScript 访问修饰符) | |------------------|-----------------------------------|--------------------------------------------| | **私有性强度** | ✅ 硬私有（运行时强制） | ❌ 软私有（仅编译时检查） | | **运行时保护** | ✅ 外部访问直接报错 | ❌ 编译后私有性消失 | | **编译后行为** | 通过 `WeakMap` 模拟私有性 | 直接移除 `private` 关键字 | | **反射可突破性** | ❌ 完全不可访问 | ✅ 可通过 JS 代码访问 | | **继承访问** | ❌ 子类不可访问 | ❌ 子类不可访问 | --- #### 二、技术原理详解 1. **`#getValues` - ECMAScript 标准私有方法** - **语法**：使用 `#` 前缀（ES2022 标准） - **编译结果**：通过 `WeakMap` 实现运行时私有性 ```javascript // TS 源码 class DataService { #getValues() { return [1, 2, 3] } } // 编译后的 JS 代码 var _getValues = new WeakMap(); class DataService { constructor() { _getValues.set(this, function() { return [1, 2, 3] }); } } ``` - **运行时行为**： ```typescript const service = new DataService(); service.#getValues(); // ❌ SyntaxError: Private field must be declared ``` 2. **`private getValues` - TypeScript 访问修饰符** - **语法**：使用 `private` 关键字 - **编译结果**：`private` 关键字被直接移除 ```javascript // TS 源码 class DataService { private getValues() { return [1, 2, 3] } } // 编译后的 JS 代码 class DataService { getValues() { return [1, 2, 3] } // 变为公有方法！ } ``` - **运行时行为**： ```typescript const service = new DataService(); service.getValues(); // ✅ 实际可调用！(仅 TS 编译时报错) ``` --- #### 三、实际场景影响 1. **跨文件访问测试** ```typescript // FileA.ts class SecretVault { #secretKey = 123; // 硬私有 private backup = 456; // 软私有 } // FileB.ts const vault = new SecretVault(); vault.#secretKey; // ❌ 语法错误（即使忽略 TS 检查） vault.backup; // ❌ TS 编译错误，但 JS 运行时可访问！ ``` 2. **使用纯 JavaScript 突破限制** ```html <!-- index.html --> <script> import { SecretVault } from './FileA.js'; const vault = new SecretVault(); console.log(vault.backup); // ✅ 输出 456 (私有性失效) </script> ``` --- #### 四、如何选择？ | **场景** | **推荐方案** | **原因** | |------------------------------|------------------|----------------------------------| | 需要严格运行时保护（如加密逻辑） | `#getValues` | 确保即使脱离 TS 环境也不暴露 | | 需要兼容旧 JavaScript 环境 | `private` | 硬私有语法需要 ES2022+ 支持 | | 开发公共库 | `#getValues` | 避免下游用户意外访问内部方法 | | 需要反射访问内部方法 | `private` | 硬私有完全无法通过反射访问 | > 在安全敏感场景（如密钥管理），硬私有（`#`）是唯一可靠选择[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值