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

介绍

TypeScript 是一个由 Microsoft 创建的 JavaScript 超级组件,它将松散编写的语言转化为严格编写的语言,可作为 ECMAScript 6 进行概括,并具有可选的类型声明。

Vue.js 的创始人 Evan You 表示,Vue.js 3.0 的代码库将完全重写在TypeScript中。

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

前提条件

要跟随这篇文章,你将需要:

本教程已通过 Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3 和 @vue/cli v4.5.0 进行验证。

步骤1 - 设置项目

使用 Vue CLI 3+,可以创建一个新的项目,使用已经配置的TypeScript。

使用 vue create时,您将被提示使用项目配置:

Screenshot of Vue CLI prompts for picking a preset and adding TypeScript

对于本教程的目的,配置将需要:

1? Please pick a preset: Manually select features

在选择提示中,选择TypeScript:

1? Check the features needed for your project: TypeScript

回答以下提示:

1? Choose a version of Vue.js that you want to start the project with 2.x
2? Use class-style component syntax? No
3? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
4lls, transpiling JSX)? Yes
5? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
6? Save this as a preset for future projects? No

<$>[注] **注:**在启动新项目时,您还将被提示:使用类型组件语法?。

2月,对于Vue 3.0核心库来说, Evan You abandoned the class style syntax完全没有。

这是一个流行的选择,但对于本教程的目的,选择不。

如果您想探索使用类型组件的项目,请参阅 使用 Vue.js 和 TypeScript 编写类型组件。

选择TypeScript会做一些事情. 它会自动添加 @vue/cli-plugin-typescript到您的项目. 它将替代 main.js 以 main.ts. 它还会添加 shims-tsx.d.ts 和 shims-vue.d.ts。

<$>[注] 注: 如果您已经创建了 Vue 项目,并且想要向其添加 TypeScript 支持,则可以使用以下方式:

1vue add typescript

美元

在从命令行生成Vue项目后,您可能已经注意到shims-vue.d.ts文件,这是声明文件(`.d.ts)。

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

这些在使用不包含任何TypeScript界面、类型或声明文件的节点模块时是有用的,在某种意义上,这些文件的唯一用途是告诉TypeScript如何处理外部代码。

1[label shims.d.ts]
2declare module '*.vue' {
3  import Vue from 'vue'
4  export default Vue
5}

此代码必不可少告诉TypeScript编译器(和IDE)如何处理.vue 文件。

一旦您有使用 TypeScript 的 Vue 项目,您可以配置 tsconfig.json。

步骤 2 – 配置 TypeScript 编译器

您可以根据团队或项目的需求配置TypeScript. 有 许多选项,您可以通过使用 tsconfig.json文件启用或禁用。

您可以自由地尝试这些选项,以找到最有用的对您和您的项目。

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

  • noImplicitAny:在暗示的 any 类型的表达式和声明上引出错误.如果一个论点, const, let 或 var 没有类型,则会引出错误。这更像是对你自己进行心理检查,以为你的代码创建自定义数据类型
  • noImplicitThis: 类似于 no ImplicitAny,但会引发错误与 this 关键字。 另一个心理检查鼓励你输入你所能做的任何东西
  • no ImplicitReturns: 当函数中的所有代码路径都没有返回值时,报告错误。

以下是「tsconfig.json」的例子:

 1[label tsconfig.json]
 2{
 3  "compilerOptions": {
 4    "target": "es5",
 5    "module": "esnext",
 6    "strict": true,
 7    "noImplicitAny": true,
 8    "noImplicitThis": true,
 9    "noImplicitReturns": true,
10    "jsx": "preserve",
11    "importHelpers": true,
12    "moduleResolution": "node",
13    "skipLibCheck": true,
14    "esModuleInterop": true,
15    "allowSyntheticDefaultImports": true,
16    "sourceMap": true,
17    "baseUrl": ".",
18    "types": [
19      "webpack-env"
20    ],
21    "paths": {
22      "@/*": [
23        "src/*"
24      ]
25    },
26    "lib": [
27      "esnext",
28      "dom",
29      "dom.iterable",
30      "scripthost"
31    ]
32  },
33  "include": [
34    "src/**/*.ts",
35    "src/**/*.tsx",
36    "src/**/*.vue",
37    "tests/**/*.ts",
38    "tests/**/*.tsx"
39  ],
40  "exclude": [
41    "node_modules"
42  ]
43}

有关tsconfig.json的更多信息可在 官方文件中找到。

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

TypeScript 支持 12 种基本类型:

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

您将使用的更常见的类型是原始类型:‘ string’、‘number’、‘boolean’、‘null’、‘undefined’和‘void’。

但是,会有一些时候你需要创建一个自定义数据类型,在这些情况下,你可以创建一个TypeScript称之为界面的东西。

在您的根目录中,创建一个目录,并命名它为类型:

1mkdir types

在这个新目录中,创建一个名为index.ts的新文件,您可以用interface的关键字声明一个新的界面:

1[label types/index.ts]
2export interface User {
3
4}

<$>[注] **注:**使用CamelCase用于命名公约被认为是最佳做法。

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

 1[label types/index.ts]
 2export interface User {
 3  firstName: string,
 4  lastName: string,
 5  twitterHandle: string,
 6  location: {
 7    city: string,
 8    state: string
 9  }
10}

在本示例中,您有一个界面,其中包含一个对象(位置),可以通过嵌入界面来进一步分解。

您也可以通过添加一个?来使任何属性成为可选的,这意味着该属性可能或可能没有值。

以下是以前的index.ts重写这些更改:

 1[label types/index.ts]
 2export interface User {
 3  firstName: string,
 4  lastName: string,
 5  twitterHandle?: string,
 6  location: Location
 7}
 8
 9export interface Location {
10  city: string,
11  state: string
12}

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

步骤 4 — 在单文件视图组件(SFC)中使用自定义数据类型

以下是使用用户界面并显示firstName和lastName的App.vue的示例:

 1[label src/App.vue]
 2<template>
 3  <p>{{ fullName }}</p>
 4</template>
 5
 6<script lang="ts">
 7  export default {
 8    name: 'Home',
 9    data() {
10      return {
11        user: {}
12      }
13    },
14    computed: {
15      fullName() {
16        return `${this.user.firstName} ${this.user.lastName}`
17      }
18    },
19    mounted() {
20      this.user = {
21        firstName: `Sammy`,
22        lastName: `Shark`,
23        twitterHandle: `@digitalocean`,
24        location: {
25          city: `New York City`,
26          state: `NY`
27        }
28      }
29    }
30  }
31</script>

要在该组件中使用 TypeScript,您需要在组件的脚本标签中添加一个lang属性,该属性的值应该是ts。

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

由于您不会使用类型语法,您将使用as关键字来声明数据为数据类型。

对于const,let,var或函数返回类型等事物,您可以用结肠(:)定义其类型。

在将这些更改应用到App.vue后,它现在看起来像:

 1[label src/App.vue]
 2<template>
 3  <p>{{ fullName }}</p>
 4</template>
 5
 6<script lang="ts">
 7  import { User } from '../types'
 8
 9  export default Vue.extend({
10    name: 'Home',
11    data() {
12      return {
13        user: {} as User
14      }
15    },
16    computed: {
17      fullName(): string {
18        return `${this.user.firstName} ${this.user.lastName}`
19      }
20    },
21    mounted(): void {
22      this.user = {
23        firstName: `Sammy`,
24        lastName: `Shark`,
25        twitterHandle: `@digitalocean`,
26        location: {
27          city: `New York City`,
28          state: `NY`
29        }
30      }
31    }
32  })
33</script>

此代码导入用户界面并声明反应性数据为用户类型。

计算属性返回一个字符串,因此定义了一个字符串类型。 安装链不会返回任何东西,因此定义了一个空类型。

填写应用程序:

1npm run serve

当您在浏览器中打开结果时,您应该观察显示的完整名称。

结论

TypeScript是JavaScript. 使用TypeScript,您可以尽可能严格或轻松,因为它有助于保持您的代码库一致和可扩展,因为您的项目继续增长。

TypeScript 也与各种流行的 IDEs 和编辑器(包括 VS Code、WebStorm、Sublime、Vim、Atom 等)密切集成,使用这些编辑器,TypeScript 可以在后台工作,以提供实时线索、建议和函数参数和返回类型的预览。

总的来说,它是一个语言,它继续进入开发人员每天使用的更多工具,库和框架,它有一个强大的开源社区和微软的支持。

如果您想了解更多关于 TypeScript 的信息,请参阅 我们的 TypeScript 主题页面以获取练习和编程项目。

Published At
Categories with 技术
Tagged with
comments powered by Disqus