Vue 是一个令人惊叹的轻量级、渐进式前端框架。在本教程中,我们将演示如何完全使用 TypeScript 构建 Vue 应用程序。我们将通过使用基于类的组件、用于状态管理的 Vuex、生命周期钩子等构建示例应用程序,重点介绍将 TypeScript 与 Vue 结合使用的一些好处。让我们开始吧!
-
Vue 和 TypeScript 入门
-
如何将 TypeScript 添加到 Vue 项目中
-
使用defineComponent
-
使用数据
-
使用道具
-
计算属性
-
方法
-
观察者
-
emit
-
导入组件
-
使用 Vuex 和 TypeScript
-
生命周期钩子
-
在 Vue 中使用 TypeScript mixins
Vue 和 TypeScript 入门
Vue 是灵活的,因此用户不会被迫使用 TypeScript。与 Angular 不同,旧版本的 Vue 没有对 TypeScript 的适当支持。出于这个原因,大多数 Vue 应用程序在历史上都是用 JavaScript 编写的。
Vue 3于 2020 年 9 月发布,包括内置组合 API、多个根元素以及至关重要的改进的 TypeScript 支持等功能。有关如何将现有 Vue 项目迁移到 Vue 3 的详细信息,我建议查看将 Vue 2 应用程序重构为 Vue 3。
现在 Vue 正式支持 TypeScript,只需使用 Vue CLI,无需任何第三方库,就可以轻松地从头开始创建 TypeScript 项目。但是,官方 Vue 文档和 TypeScript 文档都没有包含您开始使用的所有信息。为了更全面地描绘,我们将演示如何使用Vue CLI构建一个新的 Vue 和 TypeScript 应用程序。
如何将 TypeScript 添加到 Vue 项目中
首先,我们将使用以下代码使用 TypeScript 设置一个新的 Vue 项目:
npx @vue/cli create typescript-app
选择手动选择功能并使用以下设置对其进行配置:
设置项目后,运行项目以对其进行测试:
cd typescript-app npm run serve
打开localhost:8080项目或启动项目后控制台显示的任何 URL,您应该会看到您的应用程序成功运行。对于下面的每一项,我将同时展示 TypeScript 和 JavaScript 等效代码,以便您轻松比较两者。让我们开始吧!
使用defineComponent
defineComponent提供来自 Vue 库的装饰器,我们可以使用它来定义具有完整 TypeScript 支持的 Vue 组件。要使用,请从文件夹defineComponent中打开并添加以下代码:App.vue``src
//src/App.vue //Typescript code <script lang="ts"> import { defineComponent } from 'vue'; import HelloWorld from './components/HelloWorld.vue'; export default defineComponent({ components:{ HelloWorld } }) </script>
要使用 TypeScript,我们首先需要将标签中的lang属性设置为:<script>``ts
<script lang="ts">
defineComponent有一个装饰器,允许我们定义组件和每个组件的属性。该components对象帮助我们将组件添加到模板中:
components: { HelloWorld, }
使用数据
要使用数据属性,我们可以简单地将它们声明为类变量:
export default defineComponent({ components:{ HelloWorld, }, data(){ return{ title:"welcome to my app", list: [ { name: 'popoolatopzy', age: '26' }, { name: 'Preetish', age: '26' }, { name: 'John', age: '30' } ] } } })
JavaScript 等效代码如下所示:
export default { data() { return { title: "welcome to my a