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

2020/07/24
- 编程
0阅读

踩坑记录

TypeScript

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

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

// false
const var1: string = 'hello'
// true
const var1 = 'hello'

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时，代码提示报错

把函数改为箭头函数时，this可用

Sass

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包进行降级，即可解决问题。

vant 组件

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

修改这一行内容即可解决

1
2
3

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

Eslint & Tslint

webstorm换行时设置4个空格无效

2020.12.16更新，今天终于找到了问题所在：

在根目录下找一下 .editorconfig 文件。

如果存在，增加或者修改indent_size = 4。

如果不存在，则创建.editorconfig文件

内容如下，即可解决4个空格设置不成功得问题：

1 2	[*] indent_size = 4

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 标签

代码提示 Unterminated statement

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

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

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,
  }
}

‘xxx’ is never reassigned. Use ‘const’ instead prefer-const

有2种情况：

参数定义后未修改值，此时可以把 let 修改为 const
有些时候在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

找到了一种比较坑的解决办法，如下：

1
2
3

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

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

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

unused method xxxx

File -> Settings -> 搜索unused global symbol, 把√去掉即可：

ts中开启import花括号间的空格

File -> Settings -> Editor -> Code Style -> Typescript -> Spaces -> Within -> 勾选 ES6 import/export braces

ts中使用单引号和关闭每行结尾的分号

File -> Settings -> Editor -> Code Style -> Typescript -> Punctuation

选择 Use single quotes 和 Don’t use semicolon ….

Unexpected newline between function name and paren [func-call-spacing]

Unexpected newline between function and ( of function call [no-unexpected-multiline]

这是在使用vant时出的问题，代码如下：

1	(this.$refs.tabs as Tabs).scrollTop('xxx') // 报错

正确代码如下：

1 2	const tabs = (this.$refs.tabs as Tabs) tabs.scrollTop('xxx')