一、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"
],
}
}
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”,