开始在打字稿中写入基于类的vue.js应用

Vue.js 3.0 与 TypeScript 的强强联合

Vue.js 3.0 将为 TypeScript 用户带来改进的支持，包括对基于类的组件的原生支持以及更好的类型推断。但您现在就可以使用 Vue 的命令行工具 Vue CLI 开始使用 TypeScript 编写 Vue 应用。

基于类的组件与 TypeScript 的优势

Vue.js 中的基于类组件可以使用 TypeScript 类编写，这可以提供更好的类型检查和可维护性。可以使用 vue-property-decorator 包中的 @Component 装饰器声明这些类。

vue-property-decorator 包提供的其他装饰器可以进一步增强基于类的组件。这些包括用于将 props 声明为类属性的 @Prop，用于从类方法发出事件的 @Emit，以及用于创建观察者的 @Watch。

TypeScript 与 Vue.js 的优势

TypeScript 与 Vue.js 结合使用具有多种优势，包括静态类型检查以尽早发现错误，更好的自动完成、导航和重构服务，以及为复杂应用程序提供更结构化和可扩展的代码库。

去年九月，Evan You（Vue.js 的创建者）宣布了该库下一个主要版本的计划。Vue 3.0 将为 TypeScript 用户带来改进的体验，包括对基于类的组件的原生支持，以及在编写代码时对类型推断的更好支持。

好消息是，您无需等到 3.0 版本发布（预计在 2019 年第三季度）就可以开始使用 TypeScript 编写 Vue 应用。Vue 的命令行工具 Vue CLI 提供了使用预配置的 TypeScript 构建工具启动项目的选项，并包含官方支持的 vue-class-component 模块，允许您将 Vue 组件编写为 TypeScript 类。

本文假设您已熟悉 Vue 和 TypeScript 的基础知识。让我们来看看您今天如何开始利用静态类型和基于类的组件。

创建 Vue TypeScript 项目

开始使用 TypeScript 的一个障碍可能是配置必要的构建工具。值得庆幸的是，Vue CLI 为我们解决了这个问题。我们可以用它为我们创建一个项目，其中 TypeScript 编译器已设置并准备就绪。

让我们简要介绍一下使用 TypeScript 支持创建新 Vue 项目的过程。

从终端/命令行（并假设您已安装 Node.js）运行以下命令以全局安装 Vue CLI：

npm install -g @vue/cli

接下来，让我们创建一个新项目，指定项目名称：

vue create vue-typescript-demo

这也将是安装项目的子文件夹的名称。按 Enter 后，系统会提示您选择默认预设或手动选择要安装的选项。

选择手动选项，您将看到进一步的选项集。必要的选项当然是 TypeScript，但您可能还想选择 Vuex，因为稍后我们将查看一些特定于 Vuex 的装饰器。

选择项目选项后，下一个屏幕将询问您是否要使用类样式组件语法。对此说“是”。然后，系统会询问您是否要“与 TypeScript 一起使用 Babel 用于自动检测的 polyfills”。对于您将支持旧浏览器的项目来说，这是一个好主意。根据需要回答其余问题，安装过程应该开始。

关于编辑器/IDE 支持的说明

许多代码编辑器和 IDE 现在都支持 TypeScript。在付费解决方案中，JetBrains 软件（例如 WebStorm、PhpStorm）对 Vue 和 TypeScript 都具有出色的支持。如果您正在寻找免费的替代方案，我推荐的是 Microsoft 的 Visual Studio Code：结合 Vetur 扩展，它提供了出色的自动完成和类型检查。

基于类的组件

让我们首先看看如何使用类编写 Vue 组件。虽然此功能不限于 TypeScript，但使用基于类的组件有助于 TS 提供更好的类型检查，并且在我看来，它使组件更简洁、更易于维护。

让我们看看语法。如果您按照上一节中的步骤操作并使用 Vue CLI 创建了一个新项目，请进入项目目录，进入 src 子文件夹，然后打开 App.vue。我们在这里感兴趣的是 <script></script> 部分，因为它是与标准 Vue 单文件组件 (SFC) 唯一不同的部分。

npm install -g @vue/cli

请注意，<script></script> 标签本身具有设置为 ts 的 lang 属性。这对于构建工具和您的编辑器正确解释代码为 TypeScript 非常重要。

为了声明基于类的组件，您需要创建一个扩展 Vue 的类（此处它从 vue-property-decorator 包而不是 vue 模块直接导入）。

类声明需要以 @Component 装饰器开头：

vue create vue-typescript-demo

您可能已经注意到来自 App.vue 组件的代码中，装饰器也可以接受一个对象，该对象可用于指定组件、props 和过滤器选项：

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

数据属性

在声明基于对象的组件时，您将熟悉必须将组件的数据属性声明为返回数据对象的函数：

@Component
class MyComponent extends Vue {}

……而对于基于类的组件，我们可以将数据属性声明为普通的类属性：

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

计算属性

使用类作为组件的另一个优点是声明计算属性的更简洁的语法，使用 getter 方法：

{
  data: () => ({
    todos: [],
  })
}

同样，您可以通过使用 setter 方法创建可写的计算属性：

@Component
class TodoList extends Vue {
  todos: [];
}

方法

组件方法可以以类似的简洁方式声明，作为类方法：

npm install -g @vue/cli

在我看来，声明方法、数据属性和计算属性的简单语法使得编写和阅读基于类的组件比原始的基于对象的组件更好。

装饰器

我们可以更进一步，使用 vue-property-decorator 包提供的附加装饰器。它为编写基于类的组件提供了六个附加装饰器：

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch

让我们来看看您可能觉得最有用的三个。

@Prop

您可以使用 @Prop 装饰器将您的 props 声明为类属性，而不是将 props 配置对象传递给 @Component 装饰器。

vue create vue-typescript-demo

与其他装饰器一样，@Prop 可以接受各种参数，包括类型、类型数组或选项对象：

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

与 TypeScript 一起使用时，您应该为您的 prop 名称添加非空运算符（!），以告诉编译器 prop 将具有非空值（因为 TS 不知道这些值在初始化组件时将被传递到组件中）：

@Component
class MyComponent extends Vue {}

请注意，如上所示，如果您愿意，完全可以将装饰器和属性声明放在一行上。

@Emit

另一个方便的装饰器是 @Emit，允许您从任何类方法发出事件。发出的事件将使用方法的名称（camelCase 名称将转换为 kebab-case），除非将替代事件名称传递给装饰器。

如果方法返回值，则该值将作为事件的有效负载发出，以及传递给方法的任何参数。

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

上面的代码将发出一个 add-todo 事件，其有效负载为 this.newTodo 的值。

@Watch

使用此装饰器创建观察者非常简单。它接受两个参数：被观察的属性的名称和一个可选的选项对象。

{
  data: () => ({
    todos: [],
  })
}

总结

我希望本文向您展示了开始使用 TypeScript 编写 Vue 应用并不一定很费力。通过使用 CLI 启动新项目，您可以快速设置必要的构建工具。包含对基于类的组件的支持以及附加的装饰器将使您能够立即编写简洁、惯用的 TypeScript！

想从头开始学习 Vue.js 吗？使用 SitePoint Premium 获取涵盖基础知识、项目、技巧和工具以及更多内容的完整 Vue 书籍合集。立即加入，每月只需 9 美元，或试用我们的 7 天免费试用版。

关于使用 TypeScript 的基于类的 Vue.js 的常见问题解答 (FAQ)

使用 TypeScript 与 Vue.js 的好处是什么？

TypeScript 提供静态类型，这在开发大型应用程序时可能是一个显着的优势。它有助于在开发过程的早期捕获错误，使代码更健壮且更易于维护。 TypeScript 还提供更好的自动完成、导航和重构服务，使开发过程更高效。与 Vue.js 一起使用时，TypeScript 允许更结构化和可扩展的代码库，从而更易于管理和开发复杂的应用程序。

如何使用 TypeScript 设置 Vue.js 项目？

使用 TypeScript 设置 Vue.js 项目涉及几个步骤。首先，如果您尚未安装 Vue CLI，则需要安装它。然后，使用 Vue CLI 创建一个新项目，并在创建过程中选择 TypeScript 作为功能。 Vue CLI 将为您设置 TypeScript 配置。然后，您可以开始使用 TypeScript 编写 Vue 组件。

Vue.js 中的基于类组件是什么？

Vue.js 中的基于类组件是使用 ES6 类定义组件的一种方法。这种方法可以使您的组件更易于阅读和理解，尤其对于来自面向对象编程背景的开发人员而言。基于类的组件也与 TypeScript 配合良好，允许您利用 TypeScript 的功能，如静态类型和接口。

如何使用 TypeScript 在 Vue.js 中定义基于类的组件？

要在 Vue.js 中使用 TypeScript 定义基于类的组件，您需要使用 vue-class-component 装饰器。此装饰器允许您将组件编写为 ES6 类。在类中，您可以像在常规 Vue 组件中一样定义数据、方法和生命周期挂钩。

我可以在基于类的组件中使用 Vue.js 指令吗？

是的，您可以在基于类的组件中使用 Vue.js 指令。语法与常规 Vue 组件中的语法相同。您可以在模板中使用 v-model、v-if、v-for 等指令。

如何在基于类的组件中使用 props？

在基于类的组件中，您可以使用 @Prop 装饰器定义 props。此装饰器允许您指定 prop 的类型以及它是否必需或具有默认值。

如何在基于类的组件中使用计算属性？

在基于类的组件中，您可以将计算属性定义为类中的 getter 方法。 getter 方法的结果将被缓存，并且仅在其依赖项更改时重新计算。

如何在基于类的组件中使用观察者？

在基于类的组件中，您可以使用 @Watch 装饰器定义观察者。此装饰器允许您指定要观察的属性以及属性更改时要调用的方法。

我可以在基于类的组件中使用 mixin 吗？

是的，您可以在基于类的组件中使用 mixin。您可以将 mixin 定义为一个类，然后使用 @Mixins 装饰器将其包含在您的组件中。

如何将 Vue.js 组合式 API 与 TypeScript 一起使用？

Vue.js 组合式 API 与 TypeScript 配合良好。您可以在 setup 方法内定义您的反应式数据和函数，并使用 TypeScript 为其设置类型。这使您可以利用 TypeScript 的静态类型和自动完成功能，使您的代码更健壮且更易于开发。

以上是开始在打字稿中写入基于类的vue.js应用的详细内容。更多信息请关注PHP中文网其他相关文章！