tnblog
首页
视频
资源
登录

ts实现面向对象编程,定义属性,方法,构造函数,私有方法,以及引用类,实例化类等。vue3使用ts对象

255人阅读 2024/12/18 15:46 总访问:756173 评论:0 收藏:0 手机
分类: 前端

ts实现面向对象编程,定义属性,构造函数等基础使用

在 TypeScript 中,你可以使用类和面向对象编程(OOP)的概念来实现类似于 C# 的功能,包括构造函数、属性和方法。TypeScript 是 JavaScript 的一个超集,它添加了静态类型、类、接口等概念,使得代码更加健壮和可维护。

下面是一个简单的示例,展示如何在 TypeScript 中创建一个类,定义属性、方法,并使用构造函数来初始化对象的属性。

  1. // 定义一个类 "Person"
  2. class Person {
  3. // 定义属性
  4. private name: string;
  5. private age: number;
  6. // 构造函数,用于初始化属性
  7. constructor(name: string, age: number) {
  8. this.name = name;
  9. this.age = age;
  10. }
  11. // 定义一个方法 "greet"
  12. greet(): string {
  13. return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  14. }
  15. // 定义一个方法 "increaseAge" 来增加年龄
  16. increaseAge(): void {
  17. this.age += 1;
  18. }
  19. }
  20. // 实例化一个 Person 对象
  21. const person1 = new Person("Alice", 30);
  22. // 调用对象的方法
  23. console.log(person1.greet()); // 输出: Hello, my name is Alice and I am 30 years old.
  24. // 增加年龄
  25. person1.increaseAge();
  26. // 再次调用对象的方法
  27. console.log(person1.greet()); // 输出: Hello, my name is Alice and I am 31 years old.

解释

  1. 定义类 Person:

    • 使用 class 关键字定义一个类。
    • 使用 private 关键字定义私有属性 nameage,这些属性只能在类内部访问。
  2. 构造函数:

    • 使用 constructor 关键字定义一个构造函数,它会在实例化对象时自动调用。
    • 构造函数接收 nameage 参数,并将它们分别赋值给类的属性。
  3. 定义方法:

    • 使用普通函数定义类的方法,如 greetincreaseAge
    • greet 方法返回一个字符串,包含对象的 nameage
    • increaseAge 方法将 age 属性增加 1。
  4. 实例化对象:

    • 使用 new 关键字和类名来实例化一个对象,如 new Person("Alice", 30)
  5. 调用方法:

    • 使用点语法(.)调用对象的方法,如 person1.greet()person1.increaseAge()

支持类似 C# 的功能

TypeScript 中的类和构造函数与 C# 非常相似,你可以使用类似的方式定义类、属性、方法和构造函数。TypeScript 还支持接口、继承、泛型等高级特性,使得你可以编写更加复杂和可维护的代码。

当类定义和使用类的地方不在同一个文件时的使用方法,类的引入

当类定义和使用类的地方不在同一个文件时,你需要在 TypeScript 项目中正确地导入和导出类。对于 Vue 3 项目,你可以使用 ES6 模块系统(importexport)来实现这一点。

以下是如何在 PersonTools.ts 中定义 Person 类,并在 ImageEditor.vue 中使用它的步骤:

  1. PersonTools.ts 中定义并导出 Person
  1. // PersonTools.ts
  2. export class Person {
  3. private name: string;
  4. private age: number;
  5. constructor(name: string, age: number) {
  6. this.name = name;
  7. this.age = age;
  8. }
  9. greet(): string {
  10. return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  11. }
  12. increaseAge(): void {
  13. this.age += 1;
  14. }
  15. }

注意这里使用了 export 关键字来导出 Person 类,这样它就可以在其他文件中被导入了。

  1. ImageEditor.vue 中导入并使用 Person
  1. <template>
  2. <div>
  3. <!-- 你的 Vue 模板代码 -->
  4. </div>
  5. </template>
  6. <script setup lang="ts">
  7. import { ref } from 'vue';
  8. import { Person } from '@/path/to/PersonTools'; // 根据你的项目结构调整路径
  9. // 使用 ref 来创建一个响应式变量
  10. const person = ref(new Person('Alice', 30));
  11. // 你可以在这里定义其他逻辑,比如方法
  12. function greetPerson() {
  13. console.log(person.value.greet());
  14. person.value.increaseAge();
  15. console.log(person.value.greet());
  16. }
  17. </script>
  18. <style scoped>
  19. /* 你的样式代码 */
  20. </style>

<script setup lang="ts"> 部分,我们使用 import { Person } from '@/path/to/PersonTools'; 来导入 Person 类。@ 符号通常在你的 Vue 项目中配置为指向 src 目录的别名,所以你需要根据你的项目结构来调整路径。

注意,由于我们在 <script setup> 中使用了 TypeScript,Vue 3 的组合式 API(Composition API)要求我们使用 ref 来创建响应式变量,并且访问 .value 属性来获取或设置实际的值。这是因为在 <script setup> 中,顶层绑定(如变量和函数)会被直接暴露给模板,而 ref 是 Vue 3 提供的一个用于创建响应式数据的函数。

现在,你可以在 ImageEditor.vue 的模板或其他逻辑中使用 person 变量和 greetPerson 函数来与 Person 类的实例交互了。

私有方法的定义与使用

在 TypeScript 中,你可以使用 private 关键字来定义一个类的私有方法。私有方法只能在类内部被调用,而不能从类的外部或子类(如果类是可继承的)中访问。

以下是如何在 Person 类中定义一个私有方法的示例:

  1. // PersonTools.ts
  2. export class Person {
  3. private name: string;
  4. private age: number;
  5. constructor(name: string, age: number) {
  6. this.name = name;
  7. this.age = age;
  8. }
  9. // 公共方法
  10. greet(): string {
  11. return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  12. }
  13. // 私有方法
  14. private calculateNextAge(): number {
  15. return this.age + 1;
  16. }
  17. // 公共方法调用私有方法
  18. increaseAge(): void {
  19. this.age = this.calculateNextAge();
  20. }
  21. }

在这个例子中,calculateNextAge 是一个私有方法,它计算并返回下一个年龄。这个方法只能在 Person 类内部被调用,比如在 increaseAge 方法中。

如果你尝试从类的外部调用 calculateNextAge 方法,TypeScript 编译器会报错,因为它是一个私有方法。例如,以下代码会导致编译错误:

  1. const person = new Person('Alice', 30);
  2. // 错误的调用:'calculateNextAge' 是私有方法,不能在类外部调用
  3. // console.log(person.calculateNextAge());

但是,你可以安全地调用公共方法 increaseAge,它会间接地调用私有方法 calculateNextAge

在 Vue 组件中使用这个类时,你仍然只能调用公共方法,而不能直接访问私有方法或属性。这是封装的一部分,有助于保持代码的模块化和可维护性。


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价

Bootstrap单选框重叠问题

从bootstrap模板中复制出来就有两个重叠的现象 看源码是生成了两次 重复生成了,所以boostrap那个模板中页面也...

windows 自带的netsh进行端口映射

使用netsh 把本地任意ip的25566端口 映射到192.168.81.234的25565端口netshinterfaceportproxyaddv4tov4listenaddress=0.0....

python安装pip以及使用pip安装requests等模块

pip很简单的介绍pip 是一个现代的,通用的 Python 包管理工具。提供了对 Python 包的查找、下载、安装、卸载的功能。如果想...

echarts中tooltip 基本样式问题处理

在echarts中遇到几个样式问题,现总结如下:1、tooltip中样式中 值换行在tooltip中修改加上一句代码formatter:&#39;{b0}:{c...

bootstrap文字居中问题

静态页上面的效果是这样的可以看到文字和左边的下拉列表是居中的但是如果你直接复制过去可能就是这样的了我们来看看静态页...

bootstrap动态生成的单选框复选框等无法点击选中的问题

bootstrap的单选框、复选框是要经过渲染的,然后才显示出来的经过渲染的是这样的没有经过渲染的就是最原始的样子所以它的选...

bootstrap 栅格布局一小例子

效果很简单,就是显示一个头像与一个名字html:&lt;divclass=&quot;col-md-12&quot;style=&quot;margin-top:20px&quot;&gt;...

未找到导入的项目 .wpp.targets。请确认 声明中的路径正确且磁盘上存在该文件

今天打开vs突然报了一个错..........wpp.targets。请确认 &lt;Import&gt; 声明中的路径正确,且磁盘上存在该文件重新新建一...

bootstrap内容灰白背景

其实就是page-container-bg-solid 样式加上右边内容就有灰色的背景效果如下如果不加就是全白的背景、如果需要根据不同的内...

bootstrap分页条样式

其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

bootstrap模板 form的一点布局用法

bootstrap form的布局可以在form stuff里边看到,我们就复制form layouts里边的吧复制这里的我们实现一个简单的资源上传的页...

ASP.NET MVC + WebUploader+Bootstrap实现文件上传进度条显示

引入需要的资源文件:&lt;scriptsrc=&quot;~/Content/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;...

bootstrap中的dataTables

就是这种直接支持页面分页,排序,搜索什么的注意需要相关的js和样式然后js把表格变成dataTable就可以了Bootstrap模板中使...

bootstrap 勾选不需要的列并记住状态

最近有个需求是要求记住这些没打勾的列因为不需要展示本来想建表去做一个状态选择,但是太麻烦了,会出现加载过慢的情况,...

使用第三方 netstandard 类库时报错

web.config中加入以下代码&lt;system.web&gt; &lt;compilationdebug=&quot;true&quot;targetFramework=&quot;4.5&quot;&gt...

NotsupportedException: HTTP/2 over TLS is not supported on Windows 7 due to missing

.net core grpc报错:NotSupportedException: HTTP/2 over TLS is not supported on Windows 7 due to missing ALPN suppor...
这一生多幸运赶上过你.
排名
8
文章
192
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术