Vue3之Typescript错误

前言

这里的错误，基本上都是在使用vue3.0+typescript开发或者编译的时候报的错误。

1.The ‘+’ operator cannot be applied to type ‘symbol’

在模板中使用动态class时，执行build时出现这个错误,这个的意思其实就是说如果menuClass类型是symbol，那么就不能使用+操作符号。

1
2
3
4
5
6
7
8
9
10

<template>
  <div :class="['menu-wrap','menu-'+menuClass]">
  </div>
</template>

<script lang="ts">
const route=useRoute();
let routeName:RouteRecordName| null | undefined=route.name?.toString();
const menuClass:Ref<RouteRecordName | undefined>=ref(routeName||"home");
</script>

【解决方法】
将类型 RouteRecordName 转为 string 类型。

1
2
3

const route=useRoute();
let routeName:string| null | undefined=route.name?.toString();
const menuClass:Ref<string | undefined>=ref(routeName||"home");

【解决】
这个问题可以通过定义变量的类型进行解决

1

const menuClass:Ref<string>=ref(routeName||"home");

2.初始值设定项类型 RouteRecordName | null | undefined 不可分配给变量类型 <>() => any

这个主要是在使用ref进行定义变量的时候报的错

1
2
3
4

const route=useRoute();
let routeName=route.name;
const menuClass=ref(routeName||"home");

【解决方法】
增加类型声明,这个 RouteRecordName 是在 vue-router 中定义的，还有 RouteLocationMatched 等。

1
2
3

const route=useRoute();
let routeName:RouteRecordName | null | undefined=route.name;
const menuClass:Ref<RouteRecordName | undefined>=ref(routeName||"home");

3.Type ‘($event: any) => void’ is not assignable to type ‘MouseEvent’

这个主要是在定义函数的时候出现的问题,menuClick(‘home’) 我的本意就是直接在调用的时候传递一个参数，结果就是死活编译不通过。

1
2
3
4
5
6

<div class="menu-item menu-item-home" @click="menuClick('home')">首页</div>

// 函数
const menuClick=(name)=>{
  router.push({name:name});
}

【解决方法】
我将@type/node 版本从 18.11.7 降为了18.8.0，解决了这个问题

1
2
3
4
5

## 删除
pnpm remove @types/node -D

## 安装
pnpm add @types/node@18.8.0 -D

4.Object literal may only specify known properties, and ‘hidden’ does not exist in type ‘RouteRecordRaw’.

这个问题，主要是因为我在router.ts中，写了这么一个东西，增加了一个不存在的属性hidden，所以导致报错了。

1
2
3
4
5
6
7
8
9

export const constantRoutes:Array<RouteRecordRaw>= [
    {
        path: '/401',
        name:"401",
        component: () => import('@/views/error/401.vue'),
        // 这里有问题
        hidden: true
    },
]

【解决方法】
删除上面的hidden属性就可以了。

5.Parameter ‘row’ implicitly has an ‘any’ type

这个主要就是参数传递的类型不同导致的

1
2
3
4
5
6
7

<el-button size="small" :text="true" type="primary" @click="handleEdit(scope.row)">添加线索</el-button>

<script lang="ts" setup>
const handleEdit=(row)=>{
  console.log(row);
}
</script>

【解决方法】
本来是应该定义一个接口类型的，我这里暂时定义一个any类型

1
2
3

const handleEdit=(row:any)=>{
  console.log(row);
}

6.Type ‘null’ is not assignable to type ‘NodeListOf‘

这个主要就是在清空一个dom变量的时候报错了,我直接将获取到的document制空，本意是想着删除一个dom元素，结果报错了。

1
2
3
4
5

let $els=document.querySelectorAll(".menu-wrap .menu-item");
if($els){
    // ....
    $els=null;
}

【解决方法】
可以定义一个 NodeListOf | null 类型,这样就可以清空了。

1
2
3
4
5

let $els:NodeListOf<HTMLElement> | null=document.querySelectorAll(".menu-wrap .menu-item");
if($els){
    // ....
    $els=null;
}

7.Cannot find module ‘./components/HeaderTop’ or its corresponding type declarations.

这个问题主要就是我引入了一个自定义的模块，但是同样一个目录下的另外一个模块，就没有报这个错误。

1
2
3

// 错误
import HeaderTop from "./components/HeaderTop"
import TopMenu from "./components/TopMenu.vue"

【解决方法】
查看两个不同的组件的声明TopMenu比HeaderTop多了一个.vue，虽然开发的时候不报错，但是在编译的时候，还是会出现错误的，那么响应的解决方法就是添加.vue后缀

1
2
3

// 正确
import HeaderTop from "./components/HeaderTop.vue"
import TopMenu from "./components/TopMenu.vue"

8.Object is possibly ‘undefined’

调用一个可能不存在的方法的时候，出现了这个问题，也就是说 parents.name 可能是未定义

1
2
3
4
5
6

let parents:RouteLocationMatched=routes[1];
let tmenuClass:string="home";
if(parents){
    // 这里有问题
    tmenuClass=parents.name.toString();
}

【解决方法】
在转换字符串的时候，使用?.符号进行操作。

1
2
3
4
5
6

const routes = route.matched;
let parents:RouteLocationMatched=routes[1];
let tmenuClass:string|undefined="home";
if(parents){
    tmenuClass=parents.name?.toString();
}

9.分配的表达式类型 string | symbol | undefined 不可分配给类型 string

这个也是类型推断的问题，主要就是 tmenuClass=parents.name 这句话。

1
2
3
4
5

let parents:RouteLocationMatched=routes[1];
let tmenuClass:string="home";
if(parents){
    tmenuClass=parents.name;
}

【解决方法】
解决方法就是将 parents.name 转换为字符串,使用toString() 方法。

1
2
3
4
5
6

const routes = route.matched;
let parents:RouteLocationMatched=routes[1];
let tmenuClass:string|undefined="home";
if(parents){
    tmenuClass=parents.name?.toString();
}

10.’/App.vue.jsx’ is a JavaScript file. Did you mean to enable the ‘allowJs’ option

这个在编译的时候出现了问题。

【解决方法】
在tsconfig.json中的 compilerOptions 节点，添加 “allowJs”: true。

1
2
3
4
5
6
7
8

{
  "compilerOptions": {
    ...
    "allowJs": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

11.eslintrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains “type”: “module” which declares all .js files in that package scope as ES modules

【解决方案】
将 .eslintrc.js 重命名为 .eslintrc,写成 json 文件格式。