关于typescript改造旧项目的一些坑

‘@/‘ 引入组件报红问题

• 使用 ‘@/xxx/xxx’ 引入组件，vetur报红 找不到module，但是可以正常运行问题
• 解决办法：1.把项目目录放工作区根目录；2.项目一定排列在第一位

引入第三方包报红

• 引入第三方库 报红找不到module，无法正常使用包，如qs、jQuery
• 解决办法1：使用@types进行包管理，然后正常引入

npm i @types/qs
import qs from 'qs'

• 解决办法2：有些包不能用@types管理，自己写声明 XX.d.ts 不推荐

router配置里引入component组件的时候必须添加.vue后缀

Element表单验证报红问题

// 报错信息如下
// Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.
// Property 'validate' does not exist on type 'Vue'.

// 解决办法
import { Form } from "element-ui";
( this.$refs.loginForm as Form ).validate((valid: boolean ) => {
  ...
 });

// 如果不引入Form，把Form换成any也可以，但是typescript会报警告⚠

• 使用axios封装的请求，然后解构请求结果报错

// 报错信息
// Property 'XXX' does not exist on type 'AxiosResponse<any>'

// 解决办法
// 新建axios.d.ts文案，添加如下内容，重启项目
import * as axios from 'axios'

declare module 'axios' {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>
  }
}
@typescript/esline 报错 xxx_x is not in camel case

关闭esline驼峰校验

// 在.eslinetrc.js中配置如下：
rules: {
  ...
  '@typescript-eslint/camelcase': 'off',
}

TS使用”require”报错

• 提示报错信息：Cannot find name ‘require’. Do you need to install type definitions for node? Try ‘npm i –save-dev @types/node’
• 解决方案：
  • 1.安装@types/node，npm i –save-dev @types/node；
  • 2.在tsconfig.json中的compilerOptions中的types添加”node”；
  • 3.在使用require前面添加declare var require:any

TS使用”this.xxx”报错

// 使用"this.$router.push("/xxx")" => Property '$router' does not exist on type 'Experiment'.
// 解决：
(this as any).$router.push("/xxx")
this.$refs.mainVideo => Property 'clientWidth' does not exist on type 'Vue | Element | Vue[] | Element[]'.
// Property 'clientWidth' does not exist on type 'Vue'
// 解决：
(this.$refs.mainVideo as any).clientWidth