vue项目引入TypeScript（防踩坑）_vue引入typescript

1、切换成淘宝镜像

先把npm 切换成淘宝镜像

npm config set registry https://registry.npm.taobao.org

验证是否成功

npm config get registry

2、安装typescript及loader

cnpm install typescript ts-loader --save-dev

cnpm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

cnpm install ignore-loader

vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts

vue-property-decorator：基于vue-class-component扩展更多装饰器

ts-loader：让webpack能够识别ts文件

tslint-loader：tslint用来约束文件编码

tslint-config-standard： tslint 配置 standard风格的约束

ignore-loader：忽略加载器
在构建webpack应用程序时忽略某些文件。(运行时如果报错TypeScript emitted no output for就添加此依赖)

3、配置文件修改

webpack配置
vue cli 3.0创建的项目：
在vue.config.js中添加下面代码

configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果配置这个rules报错换成如下：（需要安装igore-loader）

module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules|\.d\.ts$/,
            options: {
              appendTsSuffixTo: [/\.vue$/],
            },
          },
          {
            test: /\.d\.ts$/,
            loader: 'ignore-loader',
          },
        ],
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、编写tsconfig.json

在根目录下新建tsconfig.json
添加如下代码：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "experimentalDecorators": true
  }
}
1
2
3
4
5
6
7
8
9
10

5、在src文件夹下添加文件xxx.d.ts(只要是以.d.ts结尾即可)

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在src文件夹目录下（与main.js同级）

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
1
2
3
4

6、在vue文件中使用

<script lang='ts'></script>
1

7、代码案例

<template>
  <div>123 {{ h1 }}</div>
</template>
<script lang="ts">
  export default {
    data: function () {
      return {
        h1: 'String',
      }
    },
    created() {
      let strjs = '测试js'
      let strts: string = '测试ts'
      console.log(strts)
      console.log(strjs)
    },
  }
</script>
<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行效果

到这就算引入成功啦！