@vue/cli 安装VUE+TypeScript+Scss踩坑记录
in 前端 with 0 comment

@vue/cli 安装VUE+TypeScript+Scss踩坑记录

in 前端 with 0 comment

相关环境

node v10.15.3
@vue/cli v3.5.5

踩坑记录

webstorm创建vue文件与eslint规则冲突,提示 expected indentation of 0 spaces but found 2

修改webstorm配置
路径: File => Setting => Editor => Code Style => HTML
在add Do not indent children of中新增 script 标签

20180715070147720.png

ts中类似这样的 var1: string = 'hello' 代码会提示 Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)

原因:tslint觉得自己根据右边的'hello'判断出var1的类型已经是string了,认为再写string是多此一举。
于是把 ": string" 删除即可。

scss 报错ValidationError: Invalid options object. Sass Loader has been initialised using an options ...

vue.config.js如下:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/global.scss";`
      }
    }
  }
}

当@vue/cli版本大于4.0.0且sass-loader大于8.0.2时,把data修改为prependData即可解决。但我按照这样改却仍旧报错。

后来发现我本地环境过低,需要把sass-loader和node-sass包进行降级,即可解决问题。

代码提示 Unterminated statement

WebStorm 去除分号警告提示步骤:

Setting->Inspections->搜索Unterminated statement->取消勾选

Cannot find module './xxx/xxx' or its corresponding type declarations.

ts识别不了vue组件。如果引入了相应的vue组件,请在结尾加上".vue"

// 错误的写法
import TestLayout from './components/test-layout'

// 正确的写法
import TestLayout from './components/test-layout.vue'

在作用域外调用this时,代码提示报错

  1. 把函数改为箭头函数时,this可用

ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)

安装vant配置按需加载时报了这个错,在stackoverflow查到可以通过以下方式解决报错。

eslintrc.js中的rule属性新增以下内容:

module.exports = {
  ...
  rules: {
    ...
    '@typescript-eslint/no-var-requires': 0,
  }
}

vue+ts中vant修改的vue.config.js报错 TypeError: merge is not a function

修改这一行内容即可解决

const merge = require('webpack-merge')
// 改为
const { merge } = require('webpack-merge')

'xxx' is never reassigned. Use 'const' instead prefer-const

有2种情况:

  1. 参数定义后未修改值,此时可以把 let 修改为 const

  2. 有些时候在for循环中、数组的一些方法修改值时,ts未检测出来。此时在eslintrc.js中的rule属性新增以下内容:

module.exports = {
  ...
  rules: {
    ...
    'prefer-const': 0
  }
}

Property 'result' does not exist on type 'EventTarget'

封装indexedDB时遇到的,onupgradeneeded事件的event没办法正确通过TS验证

this._handler.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    // 报错:Property 'result' does not exist on type 'EventTarget'
    let db: IDBDatabase = event.target.result;
    // 改为
    let db: IDBDatabase = (e.target as any).result;  
    ...
}

Type 'xxx | undefined' is not assignable to type 'xxx'

场景如下:

// interface
export interface xxx{
  name: string;
  value?: string;
}

// js部分代码 errorItem 为 Array<xxx>

errorData: xxx = { 'name': 'demo111', 'value': 'demo222' }
if (errorItem) {
    this.errorData = errorItem.shift()
}

因为xxx的接口定义中value是可能为undefined的,此时尝试通过errorItem.shift()来获取结果会报错。
后来在stackoverflow上找到了可以通过在行尾加上!来忽略内容可能为undefined的错误。

修改后如下:

// 修改前
this.errorData = errorItem.shift()
// 修改后
this.errorData = errorItem.shift()!

尝试使用this.$route.query时,即使TS验证通过,webstorm也会存在红色感叹号提示的Unresolved variable

找到了一种比较坑的解决办法,如下:

let name = this.$route.query.name // 提示Unresolved variable

let name = Object(this.$route.query).name // TS、webstorm均通过

目前还没找到能否通过webstorm来忽略这个问题

参考资料

  1. Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)
  2. expected indentation of 0 spaces but found 2 . vue eslint规则和idea冲突
  3. [解决]ValidationError: Invalid options object. Sass Loader has been initialised using an options ob...
  4. WebStorm 去除分号,变量和方法警告提示
  5. TypeScript 使用this关键字 在其他类的内部方法中调用本类的方法
  6. ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)
  7. TS----Property 'result' does not exist on type 'EventTarget'
  8. Typescript: Type 'string | undefined' is not assignable to type 'string'
Comments are closed.