如何在 Vue 单文件组件中使用 TypeScript

介绍

TypeScript 是微软创建的 JavaScript 超集，它将松散类型的语言变成了严格类型的语言。它可以概括为带有可选类型声明的 ECMAScript 6。

Vue.js 的创建者 Evan You表示 Vue.js 3.0 的代码库将完全用 TypeScript 重写。

在本教程中，您将使用@vue/cliTypeScript 生成一个新的 Vue.js 2.0 应用程序并构建一个单文件组件 (SFC)。

先决条件

要阅读本文，您需要：

本教程已通过 Node v15.1.0、npmv6.14.8、Vue.js v2.6.11、TypeScript v3.9.3 和@vue/cliv4.5.0 验证。

步骤 1 — 设置项目

使用 Vue CLI 3+，可以使用已配置的 TypeScript 生成新项目。

使用时vue create，会提示项目配置：

Vue CLI 提示选择预设并添加 TypeScript 的屏幕截图

就本教程而言，配置需要：

迅速的 选项
Please pick a preset Manually select features
Check the features needed for your project TypeScript

注意：在引导新项目时，还会提示您：Use class-style component syntax?。

早在二月份，Evan You 就完全放弃了 Vue 3.0 核心库的类样式语法。

这是一个流行的选择，但本教程将介绍如何在没有它的情况下将 TypeScript 与 Vue.js 一起使用。如果您想探索具有类样式组件的项目，请参阅使用 Vue.js 和 TypeScript 编写基于类的组件。

选择“TypeScript”会做几件事。它会自动添加@vue/cli-plugin-typescript到您的项目中。它将替换main.js为main.ts. 它还将添加shims-tsx.d.ts, 和shims-vue.d.ts。

注意：如果您已经创建了一个 Vue 项目并希望为其添加 TypeScript 支持，您可以使用以下方法：

  • vue add typescript

从命令行生成 Vue 项目后，您可能已经注意到该shims-vue.d.ts文件。那就是声明文件（.d.ts）。

声明文件是不包含任何可执行代码但包含存在于项目文件之外的代码的描述的文件。

这些在使用不包含任何 TypeScript 接口、类型或声明文件的 Node 模块时非常有用。从某种意义上说，这些文件的唯一目的是告诉 TypeScript 如何处理外部代码。

垫片.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

这段代码告诉 TypeScript 编译器（和 IDE）如何处理.vue文件。

一旦你有了一个带有 TypeScript 的 Vue 项目，你就可以配置tsconfig.json.

第 2 步 – 配置 TypeScript 编译器

您可以根据团队或项目的需要配置 TypeScript。有很多选择，你可以启用或禁用与使用的tsconfig.json文件。此文件应位于项目的根目录中。

随意尝试这些选项，以找出对您和您的项目最有用的选项。

noImplicitAny, noImplicitThis,noImplicitReturns是可能对大多数情况有益的选项：

  • noImplicitAny: 使用隐含any类型引发表达式和声明错误。如果参数const, let, 或var没有类型，这将引发错误。这更多是对您自己的心理检查，以便为您的代码创建自定义数据类型。
  • noImplicitThis: 与关键字类似，noImplicitAny但会抛出错误this。另一项精神检查，鼓励您输入所有可以输入的内容。
  • noImplicitReturns: 函数中并非所有代码路径都返回值时报错。这有助于确保具有返回类型的给定函数中的所有条件都返回一个值。

这是一个例子tsconfig.json：

配置文件
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

有关更多信息，tsconfig.json请参阅官方文档。

第 3 步 – 使用基本和自定义数据类型

在 TypeScript 中，支持 12 种基本类型：

  • boolean
  • number
  • string
  • array
  • object
  • tuple
  • enum
  • any
  • void
  • undefined
  • null
  • never

更常见的类型，你将要使用的基本类型：string，number，boolean，null，undefined，和void。

但是，有时您需要创建自定义数据类型。对于这些情况，您可以创建 TypeScript 称为Interface.

在您的根目录中，创建一个目录并将其命名为types：

  • mkdir types

在这个新目录中，创建一个名为index.ts. 您可以使用interface关键字声明一个新接口：

类型/索引.ts
export interface User {

}

注意：将 CamelCase 用于命名约定被认为是最佳实践。

从这里，您可以开始定义对象将具有的属性和值类型。

类型/索引.ts
export interface User {
  firstName: string,
  lastName: string,
  twitterHandle: string,
  location: {
    city: string,
    state: string
  }
}

在此示例中，您有一个接口，其中包含一个对象 ( location)。这可以通过嵌套接口进一步分解。

您还可以通过向任何属性添加 a?来使其成为可选属性。这意味着该属性可能有也可能没有值。

这是index.ts用这些更改重写的先前内容：

类型/索引.ts
export interface User {
  firstName: string,
  lastName: string,
  twitterHandle?: string,
  location: Location
}

export interface Location {
  city: string,
  state: string
}

您现在可以在任何单文件 Vue 组件 ( .vue) 或 TypeScript ( .ts) 文件中使用此自定义数据类型。

第 4 步 – 在单文件 Vue 组件 (SFC) 中使用自定义数据类型

这是一个App.vue使用User界面并显示firstName 和的示例lastName：

源代码/App.vue
<template>
  <p>{{ fullName }}</p>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        user: {}
      }
    },
    computed: {
      fullName() {
        return `${this.user.firstName} ${this.user.lastName}`
      }
    },
    mounted() {
      this.user = {
        firstName: `Sammy`,
        lastName: `Shark`,
        twitterHandle: `@digitalocean`,
        location: {
          city: `New York City`,
          state: `NY`
        }
      }
    }
  }
</script>

为了在此组件中使用 TypeScript，您需要向组件lang的script标签添加一个属性。该属性的值应该是ts。

在单文件 Vue 组件中使用 TypeScript 时，必须导入 Vue 库，以便您可以从中进行扩展。

由于您不会使用类样式语法，因此您可以使用as关键字将数据声明为数据类型。

对于诸如const、let、var或函数返回类型之类的内容，您可以使用冒号 ( :)定义其类型。

将这些更改应用于 后App.vue，它现在类似于：

源代码/App.vue
<template>
  <p>{{ fullName }}</p>
</template>

<script lang="ts">
  import Vue from 'vue'
  import { User } from '../types'

  export default Vue.extend({
    name: 'Home',
    data() {
      return {
        user: {} as User
      }
    },
    computed: {
      fullName(): string {
        return `${this.user.firstName} ${this.user.lastName}`
      }
    },
    mounted(): void {
      this.user = {
        firstName: `Sammy`,
        lastName: `Shark`,
        twitterHandle: `@digitalocean`,
        location: {
          city: `New York City`,
          state: `NY`
        }
      }
    }
  })
</script>

此代码导入User接口并声明 reactdata为 type User。

该computed属性返回 a string，因此string定义了一个类型。该mounted钩子返回什么，所以一个void类型定义。有了这些定义，编译时就不会出现 TypeScript 错误。

编译应用程序：

  • npm run serve

当您在浏览器中打开结果时，您应该看到显示的全名。

结论

TypeScript 是 JavaScript。使用 TypeScript，您可以随心所欲地严格或宽松。随着项目的不断发展，它有助于保持代码库的一致性和可扩展性。

TypeScript 还与各种流行的 IDE 和编辑器（包括 VS Code、WebStorm、Sublime、Vim、Atom 等）高度集成。使用这些编辑器，TypeScript 在后台工作，在幕后提供函数参数和返回类型的实时线索、建议和预览。

总而言之，它是一种继续在开发人员每天使用的更多工具、库和框架中找到方法的语言。它拥有强大的开源社区和微软的支持。

如果您想了解有关 TypeScript 的更多信息，请查看我们的 TypeScript 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁