1、vue 文件中的 script 标签加了 lang="ts" 后无法成功引入[typescript] ts-loader! Module build failed: Error: Could not find source file:原因：主要是由于 vue 文件首
1、vue 文件中的 script 标签加了 lang="ts" 后无法成功引入 [typescript] ts-loader! Module build failed: Error: Could not find source file: 原因：主要是由于 vue 文件首先被 vue-loader 识别，但 vue-loader 内部并没有对内部的 ts 进行处理，所以无法识别 script 中的代码。
解决：只需要在 vue-loader 的 options 中加入一个 ts-loader 就可以了。 { test: /\.vue$/, loader: "vue-loader", options: { loaders: { less: [ "vue-style-loader", "css-loader", "less-loader?indentedSyntax", ], ts: [ { loader: "ts-loader", options: { appendTsSuffixTo: [/\.vue$/], }, }, ], }, }, }
2、ts 文件中无法识别 vue 文件和 window 自定义属性 原因：由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目对应使用目录下（也可在 tsconfig.json 中配置扫描路径），例如 src/vue-shim.d.ts。 解决： // 用于支持 ts 引入 vue文件 declare module "*.vue" { import Vue from "vue"; export default Vue; } // 用于支持 this.$router 这种形式的调用 declare module "vue/types/vue" { interface Vue { $myProperty: string; } } // Window 自定义属性 declare global { interface Window { test:string } }
3、错误 “SyntaxError: Unexpected token } in JSON at position” 原因：主要是因为 json 文件中的格式有问题，导致后面使用 JSON.parse 解析时报错。 解决：复制 json 内容到 FE helper 中检查并修改后再试试。
4、使用 postcss 时样式中的注释报错 原因：主要是因为 loader 加载顺序不对导致的（从右往左解析）。 解决：比如说使用的是 less，只需要调整 loader 的顺序为 "vue-style-loader"，"css-loader", "postcss-loader" 即可。
5、this.$refs 无法识别 原因：typescript 无法识别出 this.$refs.xx 是否含有 xx 方法。
解决：方法比较多： 一劳永逸，直接声明为 any const myRef: any = this.$refs.myModal; 类型断言 (this.$refs.myModal as Vue & {resetFields:Function}).resetFields(); 接口继承 直接引入 vue-class-component，更直观的定义 $refs 的类型 <template> <input ref="input" /> </template> <script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; @Component export default class InputFocus extends Vue { // annotate refs type. // The symbol `!` (definite assignment assertion) // is needed to get rid of compilation error. $refs!: { input: HTMLInputElement; }; mounted() { // Use `input` ref without type cast. this.$refs.input.focus(); } } </script>
6、vue-class-component 和 vue-property-decorator 支持 vue-class-component 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化，vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器。 这 2 个包可以让我们更优雅的书写代码。
npm i -D vue-class-component vue-property-decorator 7、运行测试用例时 vue-jest 报错 Babel bug: .inputSourceMap must be a boolean, object, or undefined & filename is undefined 原因：由于当前安装的 babel 和引用的 babel-core 版本不匹配导致的，babel6 对应 babel-core，babel7 对应 @/babel-core。 解决：通过搜索和查阅文档，发现已在指定版本修复，安装对应版本即可修复。
8、html-webpack-plugin 配置 template 无效 一直使用根目录下的 index.html，且其他配置也无效 原因：主要是由于 webpack 配置中的 publicPath 配置的问题，使用时需要格外注意。 解决：通过判断 process.env.NODE_ENV 分别设置开发和生产环境的资源路径。 output: { path: pathResolve("dist"), publicPath: process.env.NODE_ENV === "production" ? "." : "/", filename: "build.js?[hash:5]", }
9、npm 包版本号导致的各种报错 原因：由于不同的 npm 包适配的环境不一样，使用时需要格外注意。 解决：通过搜索和查阅文档，找到可以正常工作的匹配版本，尽量避免过高或过低的版本。
10、TS 中 any 和 unknown 的区别？ unknown 是 top type ，任何类型都是它的 subtype，也就是说它可以被赋为任何值，但只能赋值给 any 和 unknow 类型的变量。 any 是 top type + bottom type ，任何类型都是它的 subtype，它也是任何类型的 subtype，也就是说 any 基本上就是关闭了类型检查。 参考 Typescript 最佳实践
11、Plugin 与 Preset 执行顺序 preset 相当于包含一个或多个 plugin，可以避免手动安装多个 plugin，提高效率，减少出错几率，比如 @babel/preset-env。 可以同时使用多个 Plugin 和 Preset，此时它们的执行顺序非常重要。 先执行完所有 Plugin，再执行 Preset 多个 Plugin，按照声明次序顺序执行 多个 Preset，按照声明次序逆序执行
12、Jest did not exit one second after the test run has completed 原因：使用 jest 执行完测试用例后，提示 jest 没有自动退出，猜想应该是有异步任务没结束导致的。 解决：改写相关代码，让任务能终止 import { throttle } from "./throttle"; import { timer } from "rxjs"; describe("testing", () => { it("test-throttle", (done) => { let count = 0; function __addCount() { count += 1; } const addCount = throttle(__addCount, 100); let source = timer(0, 10).subscribe((i: number) => { if (i === 100) { expect(count).toBe(12); done(); source.unsubscribe(); // 这里及时停止计时器即可 } else { addCount(); } }); }); });
13、mac 下提示 permission denied 原因：没有执行权限 解决： chmod 是权限管理命令 change the permissions mode of a file 的缩写。 u 代表所有者，x 代表执行权限，+ 表示增加权限。 chmod u+x file.sh 就表示对当前目录下的 file.sh 文件的所有者增加可执行权限。
14、解决 typescript Cannot redeclare block-scoped variable 原因：没有模块化，会有变量污染的问题 解决：只需要在文件末尾加上 export {}
15、Could not find a declaration file for module 'xxx'. 'xxx' implicitly has an 'any'type. 场景：TS 项目中，通过 import 引入 js 文件提示找不到 module 原因：没有对 js 定义模块 解决：只需要在 shim.d.ts 中添加一行 declare module "\*.js";
