vue中如何使用typescript

一、typescript安装使用

1.安装依赖包

npm i typescript ts-loader --save-dev

注意：请保证ts-loader版本与webpack版本相匹配，否则会报错；ts-loader@4+需要结合webpack4版本。

2.项目根目录下添加tsconfig.json文件

方式一：在项目目录下执行命令，会自动生成tsconfig.json文件；

tsc --init

方式二：手动创建tsconfig.json文件；

3.配置tsconfig.json文件

{
  //"include"和"exclude"属性指定一个文件glob匹配模式列表。
  "include": [
    "src/*",
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "strictPropertyInitialization": false,
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 以严格模式解析
    "strict": true,
    // 启用装饰器
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    // 允许编译javascript文件
    "allowJs": true,
    // 采用的模块系统
    "module": "esnext",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 如何处理模块
    "moduleResolution": "node",
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": true,
    "sourceMap": true,
    "pretty": true
    //如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es5",
      "es6",
      "es7"
    ],

  }
}

参考官方tsconfig.json配置文档

4.在webpack.base.conf.js文件的rules中添加 ts-loader

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

5.在webpack.base.conf.js文件的extensions中添加.ts

  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],    // 增加.ts
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

6.将main.js修改为main.ts；入口文件’./src/main.js’改为’./src/main.ts’；然后需要将对应的文件都改为ts文件；

entry: {
  app: './src/main.ts'
},

7.在src目录下添加vue.shim.d.ts文件，内容如下

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

---

二、踩坑记录

1.You may be using an old version of webpack; please check you’re using at least version 4

描述：webpack版本过时，请至少安装webpack4版本；ts-loader版本与webpack版本不匹配；我的ts-loader安装的是6.0以上的版本，所以需要将webpack升级到4以上；但是这里我建议还是将ts-loader进行版本降级处理。

解决方案一：将webpack版本升级到4以上；这是个大工程，需要修改相当多的配置，一不小心就出错了还找不着原因；webpack版本升级详情。(不推荐使用)

(1)升级webpack4

npm i webpack@4 webpack-dev-server@3 --save-dev

(2)运行报错

compilation.mainTemplate.applyPluginsWaterfall is not a function

因为时间有限，就没有在进行下去了，于是我执行了方案二。

解决方案二：将ts-loader进行版本降级。(推荐)

(1)卸载当前版本

npm uninstall ts-loader

(2)安装ts-loader@3及以下版本

npm install ts-loader@3.2.0 --save-dev

---

2.System.register is not supported by webpack.

解决方案：修改tsconfig.json文件的module属性值。

---

3.引入模块时，找不到模块(Cannot find module)

(1)看引入模块时是否有加.vue后缀

import App from './App.vue'

(2)在src下创建文件vue.shim.d.ts，添加下面代码

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

---

4.找不到依赖的模块

解决方法：tsconfig.json文件中添加"moduleResolution": “node”,