vue中使用TypeScript的方法

下面将为你详细讲解在vue中使用TypeScript的方法。

1. Vue项目初次使用TypeScript

安装TypeScript

首先，需要全局安装TypeScript：

npm install -g typescript

安装完成后，我们可以通过以下命令来检查是否安装成功：

tsc --version

创建vue项目

创建一个新的vue项目：

vue create my-project

在安装依赖的过程中，选择使用TypeScript：

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TypeScript, Progressive Web App (PWA) Support
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)

即可创建一个支持TypeScript的vue项目。

## 创建TypeScript文件

在src目录下，创建一个名为“index.ts”的TypeScript文件：

```typescript
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

其中，我们使用import语句引入Vue和App组件，然后使用new Vue()创建Vue实例并渲染App组件，最后使用$mount()挂载到指定的DOM元素上。

修改Vue文件

在src目录下的“App.vue”文件中，我们也需要将文件后缀改成“.ts”，并且在script标签中增加lang="ts"属性：

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

@Component
export default class App extends Vue {
  message: string = 'Hello, TypeScript!';
}
</script>

在TypeScript中，可以使用装饰器@Component来对Vue组件进行修饰，从而实现类似于类的写法。在这里，我们定义了一个名为“App”的组件，并在组件中增加了一个message属性，用于展示在页面上。

运行项目

完成以上步骤后，我们就可以在Terminal中运行以下命令来启动项目了：

npm run serve

示例

下面，给出一个简单的Vue组件示例，演示如何在TypeScript中定义一个Vue组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

@Component
export default class MyComponent extends Vue {
  title: string = 'Hello, TypeScript!';
  message: string = 'This is a Vue component.';
}
</script>

在这个示例中，我们定义了一个名为“MyComponent”的组件，并在组件中增加了两个属性：title和message。其中，title用于展示在h1标签中，message用于展示在p标签中。

2. 在已有vue项目中使用TypeScript

安装TypeScript

在已有的vue项目中使用TypeScript，需要分两步完成。首先，我们需要在项目中安装TypeScript依赖：

npm install --save-dev typescript

修改配置文件

然后，我们需要修改项目根目录下的“vue.config.js”文件，将原来的配置项改为以下代码：

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.js', '.vue', '.json'],
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end();
  },
};

这里，我们通过resolve.extensions配置项增加了.ts文件后缀，将TypeScript文件加入webpack的解析范围。然后，通过chainWebpack方法向webpack中增加了一个名为“ts”的rule，将对.ts文件的文件编译交给ts-loader处理。注意，这里我们需要先安装ts-loader：

npm install --save-dev ts-loader

创建TypeScript文件

在src目录下，创建一个名为“index.ts”的TypeScript文件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

修改Vue文件

在src目录下的“App.vue”文件中，我们也需要将文件后缀改成“.ts”，并且在script标签中增加lang="ts"属性：

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

@Component
export default class App extends Vue {
  message: string = 'Hello, TypeScript!';
}
</script>

额外的配置

在以上步骤完成后，我们还需要额外的配置才能让TypeScript文件正常编译和打包。

tsconfig.json

首先，我们需要在项目根目录下创建一个名为“tsconfig.json”的文件，用于配置TypeScript编译器的选项。配置内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

在这个配置中，我们配置了一些常用的选项，例如“target”用于指定编译成什么版本的JavaScript代码，“module”用于指定采用哪种模块方案等等。

typings.d.ts

然后，我们需要在src目录下创建一个名为“typings.d.ts”的文件，用于声明一些额外的类型。例如，我们可以在这个文件中加入以下代码：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

这里，我们声明了一个名为“*.vue”的模块，其默认导出是一个Vue实例。

运行项目

完成以上步骤后，我们就可以在Terminal中运行以下命令来启动项目了：

npm run serve

示例

下面，给出一个简单的Vue组件示例，演示如何在TypeScript中定义一个Vue组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

@Component
export default class MyComponent extends Vue {
  title: string = 'Hello, TypeScript!';
  message: string = 'This is a Vue component.';
}
</script>

在这个示例中，我们定义了一个名为“MyComponent”的组件，并在组件中增加了两个属性：title和message。其中，title用于展示在h1标签中，message用于展示在p标签中。