开始在打字稿中写入基于类的vue.js应用-js教程-PHP中文网

好消息是，您无需等到 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> 部分，因为它是与标准 Vue 单文件组件 (SFC) 唯一不同的部分。

npm install -g @vue/cli

登录后复制

请注意，<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 组件。