Vue.js 与 TypeScript：最佳实践

1. 引言

Vue.js 是一个渐进式、灵活的 JavaScript 框架，广泛用于构建用户界面和单页应用（SPA）。而 TypeScript 是 JavaScript 的一个超集，添加了静态类型和其他高级特性。将两者结合使用，可以帮助开发者构建更具可维护性、可扩展性和鲁棒性的应用程序。

本文将带你深入了解在 Vue.js 中使用 TypeScript 的最佳实践，内容涵盖项目搭建、组件开发、类型管理与性能优化等各方面。

1.1. 你将学到

  • 如何使用 TypeScript 设置 Vue.js 项目
  • 使用 TypeScript 编写 Vue 组件的最佳实践
  • 如何通过 TypeScript 实现更强的类型安全
  • 如何运用 TypeScript 的高级特性来扩展大型项目
  • 性能与安全性方面的注意事项

1.2. 前置知识

  • 基本掌握 Vue.js
  • 熟悉 TypeScript 的基本概念（如接口、类等）
  • 你的计算机已安装 Node.js 和 npm

1.3. 所需技术/工具

  • Node.js: Node.js — Run JavaScript Everywhere
  • npm（随 Node.js 一同安装）
  • Vue CLI: Vue CLI
  • TypeScript: TypeScript: JavaScript With Syntax For Types.
  • Vue TypeScript Starter 模板: https://github.com/vuejs/vue-cli-template-typescri

2. 技术背景

2.1. 核心概念

  • Vue.js 组件：组件是 Vue 应用的构建单元。它们能封装功能，并在整个项目中复用。
  • TypeScript：TypeScript 为 JavaScript 提供了静态类型，有助于在开发过程中及早发现错误，并提升代码的可维护性。
  • TypeScript 配置：在 Vue 项目中使用 TypeScript 时，需要配置 tsconfig.json 文件，并使用 Vue 的类型声明文件（如 vue-shim.d.ts）以正确识别 Vue 的 API 类型。

2.2. 底层原理简析

在底层，TypeScript 会将代码编译为纯 JavaScript，供浏览器或 Node.js 环境运行。Vue 的响应式系统与 TypeScript 可以很好地协同工作，从而实现具有类型安全的响应式开发。

2.3. 最佳实践

1. 所有组件都使用 TypeScript 编写

统一采用 TypeScript 编写组件，能保持代码一致性，并充分发挥类型系统带来的优势。

2. 使用接口定义 props、data 与事件

通过为组件的 props、data 以及 emits 事件使用接口定义，可以使应用的类型体系更加严谨，也利于代码提示与维护。

3. 利用 TypeScript 的高级特性

例如泛型（Generics）、枚举（Enums）和装饰器（Decorators），可以帮助你写出更清晰、结构更优的代码。

2.4. 常见陷阱

1. 类型定义过度复杂

避免写出过于复杂的类型定义，这种类型往往难以维护，也容易引入错误。

2. 忽视 TypeScript 报错

不要忽视编译器的错误提示。TypeScript 的类型错误通常指示代码存在潜在问题，应当认真修复。

3. 实现指南

3.1. 第一步：使用 TypeScript 搭建 Vue.js 项目

首先，让我们使用 Vue CLI 创建一个支持 TypeScript 的 Vue.js 项目。

npm install -g @vue/cli
vue create my-vue-typescript-app

当出现提示时，选择“手动选择功能”，并确保勾选“TypeScript”。

项目创建完成后，进入项目目录：

cd my-vue-typescript-app

3.2. 第二步：了解项目结构

项目结构大致如下：

src/main.tsApp.vuecomponents/HelloWorld.vue...

3.3. 第三步：编写你的第一个 TypeScript 组件

让我们用 TypeScript 创建一个简单的组件。

// src/components/HelloWorld.vue
<template><div><h1>{{ msg }}</h1></div>
</template><script lang="ts">
interface Props {msg: string;
}export default {props: {msg: {type: String,required: true}}
};
</script>

3.4. 第四步：使用类组件（Class-Based Components）

你也可以使用 TypeScript 的类组件风格。

// src/components/UserProfile.vue
<template><div><h1>{{ user.name }}</h1><p>年龄: {{ user.age }}</p></div>
</template><script lang="ts">
import { Vue } from 'vue-class-component';interface User {name: string;age: number;
}export default class UserProfile extends Vue {props!: {user: User;};constructor(props: { user: User }) {super(props);this.props = props;}
}
</script>

3.5. 第五步：使用 Vue 的生命周期钩子

TypeScript 可以无缝支持 Vue 的生命周期钩子。

// src/components/Counter.vue
<template><div><p>计数: {{ count }}</p><button @click="increment">增加</button></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({data() {return {count: 0 as number};},mounted() {console.log('组件已挂载');},methods: {increment(): void {this.count++;}}
});
</script>

4. 代码示例

4.1. 示例一：待办事项应用

让我们用 TypeScript 构建一个简单的待办事项（Todo List）应用。

// src/components/TodoList.vue
<template><div><input v-model="newTodo" type="text" /><button @click="addTodo">添加待办</button><ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}<button @click="removeTodo(todo.id)">移除</button></li></ul></div>
</template>
<script lang="ts">
interface Todo {id: number;text: string;
}export default {data() {return {newTodo: '',todos: [] as Todo[]}},methods: {addTodo(): void {if (this.newTodo.trim()) {this.todos.push({id: Date.now(),text: this.newTodo});this.newTodo = '';}},removeTodo(id: number): void {this.todos = this.todos.filter(todo => todo.id !== id);}}
}
</script>

4.2. 示例二：从 API 获取数据

让我们使用 TypeScript 从一个模拟的 API 获取用户数据。

// src/components/UsersList.vue
<template><div><h1>用户列表</h1><ul v-if="users.length"><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul><p v-else>加载中...</p></div>
</template>
<script lang="ts">
interface User {id: number;name: string;
}export default {data() {return {users: [] as User[],loading: true as boolean}},mounted() {this.fetchUsers();},methods: {async fetchUsers(): Promise<void> {try {const response = await fetch('https://jsonplaceholder.typicode.com/users');const data = await response.json();this.users = data;this.loading = false;} catch (error) {console.error('获取用户数据出错:', error);this.loading = false;}}}
}
</script>

5. 最佳实践与优化

5.1. 性能考虑

5.1.1. 使用 Composition API 提升性能

Vue 3 引入的 Composition API 提供了更好的性能和可维护性。

// 使用 Composition API 提升性能
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);onMounted(() => {console.log('组件已挂载');});return {count};}
}

5.1.2. 避免过度使用计算属性

计算属性用于缓存非常有用，但过度使用可能导致性能下降。

5.2. 安全考虑

5.2.1. 验证用户输入

务必对用户输入进行验证，防止 XSS 攻击。

export default {methods: {handleSubmit(input: string): void {const sanitizedInput = input.replace(/<.*?>/g, '');// 使用已清理的输入}}
}

5.2.2. 对不可信数据使用类型保护

处理不可信数据时，使用类型保护确保类型安全。

function isUser(obj: any): obj is { id: number; name: string } {return 'id' in obj && 'name' in obj;
}

5.3. 代码组织

5.3.1. 遵循统一的目录结构

src/components/forms/LoginForm.vueRegisterForm.vuelayouts/Navbar.vueFooter.vuepages/HomePage.vueAboutPage.vueservices/api.service.tsauth.service.tstypes/user.types.tspost.types.tsutils/validation.tshelpers.ts

5.3.2. 使用模块和导入

import { defineComponent } from 'vue';export default defineComponent({// 组件代码
});

5.4. 常见错误避免

5.4.1. 不使用类型注解

务必为数据和方法添加类型注解，提升类型安全。

// 不推荐
export default {data() {return {count: 0}}
}// 推荐
export default {data(): { count: number } {return {count: 0}}
}

5.4.2. 忽视 TypeScript 错误

不要忽视 TypeScript 报错，及时修复以保证类型安全。

6. 测试与调试

6.1. 使用 Jest 和 Vue Test Utils 进行测试

6.1.1. 组件单元测试示例

下面是一个使用 Jest 和 Vue Test Utils 测试 Vue 组件的示例：

// src/components/__tests__/HelloWorld.test.ts
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '../HelloWorld.vue';describe('HelloWorld.vue', () => {it('传入 props.msg 时能正确渲染', () => {const msg = 'new message';const wrapper = shallowMount(HelloWorld, {props: { msg }});expect(wrapper.text()).toMatch(msg);});
});

6.2. 调试技巧

  • 使用 Chrome DevTools
    Chrome DevTools 提供强大的 Vue 应用调试功能。
  • 使用 TypeScript 调试器
    VSCode 内置支持 TypeScript 调试，方便断点和变量检查。

6.3. 常见问题

6.3.1. 运行时类型错误

确保所有类型均正确定义并正确使用。

// 确保类型定义正确
interface Todo {id: number;text: string;completed: boolean;
}export default {data(): { todos: Todo[] } {return {todos: []}}
}

6.3.2. 变量未定义错误

使用可选链操作符避免未定义变量错误。

// 使用可选链操作符
export default {methods: {showUserDetails(): void {const userName = this.user?.name;console.log(userName);}}
}

7. 结论

7.1. 关键点总结

  • TypeScript 增强了 Vue 开发：TypeScript 提供静态类型和高级特性，使 Vue 开发更具可维护性和可扩展性。
  • 项目配置和搭建：合理配置 tsconfig.json 和 vue-shim.d.ts 是使用 TypeScript 的基础。
  • 组件开发：利用 TypeScript 的接口和类，可以定义健壮且类型安全的 Vue 组件。
  • 最佳实践：遵循代码组织规范、类型注解以及性能优化等最佳实践，提升代码质量。

7.2. 后续建议

  • 深入探索 Vue 3 新特性：如 Composition API 等更现代的开发模式。
  • 学习 TypeScript 高级特性：例如装饰器（decorators）和泛型（generics）。
  • 构建真实项目：将学到的知识应用于实际项目，巩固理解。

7.2.1. 参考资源

  • Vue.js 官方文档
  • TypeScript 官方文档
  • Vue.js 与 TypeScript 社区讨论

通过本文，你现在应已掌握了使用 Vue.js 搭配 TypeScript 的坚实基础，能够开发更健壮、可维护且易扩展的应用程序。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/911856.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/911856.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

webpack5 css-loader：从基础到原理

webpack5 css-loader：从基础到原理

webpack 处理样式 webpack本身是不能识别样式资源的&#xff0c;需要借助Loader来帮助webpack解析样式资源&#xff0c;样式资源包括但不限于css/less/sass/scss/styl 未使用样式处理加载器前 运行webpack打包命令 bash npx webpack报错信息如图&#xff0c;提示无法识别css…
阅读更多...
【GESP】C++三级练习 luogu-B2096 直方图

【GESP】C++三级练习 luogu-B2096 直方图

GESP C三级练习&#xff0c;一维数组练习&#xff0c;难度★★☆☆☆。 题目题解详见&#xff1a;【GESP】C三级练习 luogu-B2096 直方图 | https://www.coderli.com/gesp-3-luogu-b2096/ 【GESP】C三级练习 luogu-B2096 直方图 | OneCoderGESP C三级练习&#xff0c;一维数组…
阅读更多...
【网站内容安全检测】之2：从网站所有URL页面中提取所有外部及内部域名信息

【网站内容安全检测】之2：从网站所有URL页面中提取所有外部及内部域名信息

还没写成Go的&#xff0c;用Python吧&#xff0c;稍微慢一点 依赖内容&#xff08;安装命令pip install -r requirements.txt) requirements.txt aiohttp beautifulsoup44.12.2 tqdm4.66.1 redis5.2.1 motor3.3.1 pymongo4.6.0 chardet提取域名的程序 domain_extractor.py …
阅读更多...
【LLaMA-Factory 实战系列】四、API 篇 - 部署推理服务与批量调用实战

【LLaMA-Factory 实战系列】四、API 篇 - 部署推理服务与批量调用实战

【LLaMA-Factory 实战系列】四、API 篇 - 部署推理服务与批量调用实战 1. 引言2. 推理后端的选择与对比3. 部署 API 推理服务3.1 创建 API 配置文件3.2 启动 API 服务3.3 探索交互式 API 文档 4. 编写 Python 脚本进行批量调用4.1 准备工作4.2 批量调用脚本4.3 运行脚本并查看结…
阅读更多...
C++工厂模式的作用（工厂方法、Factory Method、Factory Pattern）

C++工厂模式的作用（工厂方法、Factory Method、Factory Pattern）

文章目录 代码示例工厂的作用1. 对象创建的封装 &#x1f3ed;2. 解耦客户端和具体类 &#x1f517;3. 统一的创建入口 &#x1f6aa;4. 隐藏实现细节 &#x1f3ad; 在这个项目中的具体体现总结 代码示例 https://gitee.com/arnold_s/my-learning-test/tree/master/20250610_…
阅读更多...
9-C#修改任务管理的名称

9-C#修改任务管理的名称

C#修改任务管理的名称
阅读更多...
Fisco Bcos学习 - 搭建第一个区块链网络

Fisco Bcos学习 - 搭建第一个区块链网络

文章目录 一、前言二、环境准备三、安装依赖在 macOS 上安装依赖在 Ubuntu 上安装依赖在 CentOS 上安装依赖 四、创建操作目录并下载安装脚本五、搭建单群组 4 节点联盟链六、启动 FISCO BCOS 链七、检查进程八、检查日志输出 在数字化时代&#xff0c;区块链技术正逐渐成为推动…
阅读更多...
可视化图解算法53：表达式求值

可视化图解算法53：表达式求值

牛客网 面试笔试 TOP 101 1. 题目 描述 请写一个整数计算器&#xff0c;支持加减乘三种运算和括号。 数据范围&#xff1a;0≤∣s∣≤100&#xff0c;保证计算结果始终在整型范围内 要求&#xff1a;空间复杂度&#xff1a; O(n)&#xff0c;时间复杂度 O(n) 示例1 输入…
阅读更多...
小白成长之路-Nginx配置(二)

小白成长之路-Nginx配置(二)

文章目录 一、localtion配置1.匹配规则2.匹配优先级3.配置案例 二、rewrite1、 语法2、 可写入字段3 配置案例4 if 指令5.sutoindex6. nginx配置中的常用变量 三、配置Nginx状态统计1.下载vts模块2.编译nginx 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…
阅读更多...
Qt的第一个程序

Qt的第一个程序

Qt的第一个程序 1.hello world2.使用图形化拖拽方式3.使用C代码的方式3.1.头文件3.2.setText3.3.对象树 4.设计MyLabel5.乱码问题 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680;&#x1f680;系列专栏&#xff…
阅读更多...
图书数据接口

图书数据接口

基本说明&#xff1a; 接口地址&#xff1a;http://data.isbn.work/openApi/getInfoByIsbn?isbn{isbn}&appKey{appkey}返回格式&#xff1a;json请求方式&#xff1a;get请求示例&#xff1a;http://data.isbn.work/openApi/getInfoByIsbn?isbn9787513159074&appKey…
阅读更多...
MongoDB原理

MongoDB原理

目录 一、概念 二、架构 2.1 逻辑结构 2.2 数据模型 2.3 存储引擎&#xff1a;WiredTiger 三、事务 一、概念 MongoDB是文档数据库&#xff0c;基本存储单元是 文档&#xff08;Document&#xff09;&#xff0c;以BSON格式&#xff08;一种类json的二进制形式&#xff…
阅读更多...
《解码音频：从基础到未来的听觉探索》

《解码音频：从基础到未来的听觉探索》

音频&#xff1a;开启声音世界的大门 在生活的每一个角落&#xff0c;音频如影随形&#xff0c;编织出丰富多彩的听觉体验。清晨&#xff0c;第一缕阳光尚未完全照进房间&#xff0c;手机里温柔的闹钟铃声&#xff0c;将我们从睡梦中轻轻唤醒&#xff0c;开启活力满满的一天。通…
阅读更多...
web安全之h2注入系统学习

web安全之h2注入系统学习

起初是在N1 Junior 2025 上面碰到一题&#xff0c;考点是h2的sql注入。由于之前没有见过&#xff0c;趁此机会系统学习一番 实验代码 public class H2Inject {public static void main(String[] args) throws Exception{JdbcDataSource dataSource new JdbcDataSource();dataS…
阅读更多...
AWS认证系列：考点解析 - cloud trail，cloud watch，aws config

AWS认证系列：考点解析 - cloud trail，cloud watch，aws config

&#x1f3af;一句话总览&#xff1a; 服务名类比/角色主要功能CloudTrail监控摄像头录像回放记录“谁在什么时候做了什么操作”CloudWatch护士测体温 护士喊医生实时监控系统状态&#xff0c;并能报警/自动应对AWS Config保安巡逻 记录资产变更历史记录 AWS 资源的“配置状…
阅读更多...
Java八股文——数据结构「数据结构篇」

Java八股文——数据结构「数据结构篇」

了解哪些数据结构&#xff1f; 面试官您好&#xff0c;我了解并使用过多种数据结构。在我的理解中&#xff0c;数据结构可以分为几个大的类别&#xff0c;每一类都有其独特的优势和适用场景。 1. 线性结构 (Linear Structures) 这类结构的特点是数据元素之间存在一对一的线性…
阅读更多...
C#测试调用EPPlus根据批注设置excel单元格内容

C#测试调用EPPlus根据批注设置excel单元格内容

EPPlus也是常用的Excel文件操作库&#xff0c;但不同于ClosedXML&#xff0c;使用EPPlus前需要设置授权信息&#xff0c;商业应用需要设置商业授权&#xff0c;个人使用或非商业应用也需要设置授权&#xff08;测试的时候只需设置全名&#xff0c;保存excel文件时会保存到文件详…
阅读更多...
windows本地搭建skywalking, 线程池中traceId不丢失

windows本地搭建skywalking, 线程池中traceId不丢失

1.从官网下载9.0.0版本 Downloads | Apache SkyWalking 其它历史版本的 下载地址 Index of /dist/skywalking 这个页面 可以下载 apm服务: apache-skywalking-apm-9.0.0.tar.gz agent的包: apache-skywalking-java-agent-9.0.0.tgz 2.解压后, (看情况去config路径下 appli…
阅读更多...
多模态大语言模型arxiv论文略读（135）

多模态大语言模型arxiv论文略读（135）

Agent S: An Open Agentic Framework that Uses Computers Like a Human ➡️ 论文标题&#xff1a;Agent S: An Open Agentic Framework that Uses Computers Like a Human ➡️ 论文作者&#xff1a;Saaket Agashe, Jiuzhou Han, Shuyu Gan, Jiachen Yang, Ang Li, Xin Eric…
阅读更多...
wpa_supplicant连接到了路由，但是 udhcpc会分配到不同网段的ip,路由器ip为192.168.0网段，板子分配ip为192.168.1的网段

wpa_supplicant连接到了路由，但是 udhcpc会分配到不同网段的ip,路由器ip为192.168.0网段，板子分配ip为192.168.1的网段

wpa_supplicant连接到了路由&#xff0c;但是 udhcpc会分配到不同网段的ip,路由器ip为192.168.0网段&#xff0c;板子分配ip为192.168.1的网段 你提到的情况&#xff1a; 使用 wpa_supplicant 成功连接到路由器&#xff1b; 然后通过 udhcpc&#xff08;DHCP客户端&#xff09…
阅读更多...
最新文章

Copyright @ 2022~2023