关于Vue新搭档TypeScript快速入门实践

前言

Vue 是一个用于构建用户界面的渐进式框架，广泛应用于 Web 开发。而 TypeScript 是 JavaScript 的超集，它为 JavaScript 提供了类、接口、枚举类型等语法特性，让 JavaScript 的开发更具规范和可维护性。本文将介绍如何在 Vue 项目中使用 TypeScript 进行开发。

安装

首先，确保你的系统中已经安装了 Node.js 和 Vue CLI。然后，在命令行中执行以下命令来创建一个基于 TypeScript 的 Vue 项目：

vue create my-app --default --babel --router --typescript

上述命令中，my-app 是你的项目名称，--default 表示使用默认配置创建项目，--babel 表示使用 Babel 转译器，--router 表示安装 Vue Router 路由插件，--typescript 表示使用 TypeScript 语言。

配置

创建完项目后，我们需要对其进行配置。在 tsconfig.json 文件中，将 compilerOptions 的 target 属性改成 esnext，以支持最新的 JavaScript 语法特性：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

此外，还需要在 vue.config.js 文件中进行如下配置：

module.exports = {
  chainWebpack: config => {
    config.module.rule('ts').use('ts-loader')
      .loader('ts-loader')
      .tap(options => ({
        ...options,
        transpileOnly: true,
        experimentalWatchApi: true,
      }));
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-typescript',
                ],
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.ts', '.json', '.tsx'],
    },
  },
};

示例

组件

在 TypeScript 中定义 Vue 组件，需要使用 vue-class-component 和 vue-property-decorator 两个库。例如，以下是一个 Counter 组件的示例：

<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Counter extends Vue {
  @Prop({ default: 0 }) initialValue!: number;

  count = this.initialValue;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}
</script>

在上述示例中，我们使用了 @Component 装饰器来定义 Counter 类，并将其导出，使其成为一个可重用的组件。在组件中，我们定义了一个 @Prop 装饰器将 initialValue 属性作为组件的输入，然后在组件的 data 对象中添加了 count 状态。在 increment 和 decrement 方法中分别对 count 进行加一和减一操作。

接口

在 TypeScript 中定义接口，可以使用以下语法：

interface Foo {
  bar: number;
  baz: string;
}

以上示例定义了一个名为 Foo 的接口，该接口包含两个属性：bar 是一个数字类型，baz 是一个字符串类型。我们可以在组件中使用该接口：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

interface Foo {
  bar: number;
  baz: string;
}

@Component
export default class SomeComponent extends Vue {
  foo: Foo = {
    bar: 42,
    baz: 'Hello, TypeScript!',
  };
}
</script>

在上述示例中，我们在组件中导入了 Foo 接口，并定义了一个 foo 属性，该属性的类型是 Foo 接口。

结语

本文介绍了在 Vue 项目中使用 TypeScript 进行开发的步骤和示例。通过 TypeScript，我们可以使 Vue 项目变得更加规范和可维护，增强其代码健壮性和可读性，提高开发效率。