Vue3 之 vue3与TS的相爱相杀（代码报错提示的修复，持续更新）

vue ts 项目中无法找到模块“qs”（等依赖包）的声明文件

确保安装了 @types/qs 类型定义包

npm install --save-dev @types/qs

或者

npm install -D @types/qs

这两个命令都是一个意思，都是安装依赖包到 package.json 中的 devDependencies

 

‘AxiosInstance’ is a type and must be imported using a type-only import when ‘verbatimModuleSyntax’ is enabled

原代码写法：

import axios, {
  AxiosError,
  AxiosInstance,
  AxiosRequestHeaders,
  AxiosResponse,
  InternalAxiosRequestConfig
} from 'axios'

上述代码报错信息很明显，就是字面意思：AxiosInstance, AxiosRequestHeaders, AxiosResponse, InternalAxiosRequestConfig是一个类型，当启用verbatimModuleSyntax时只能以type的方式导入，所以需使用type关键字的方式导入即可；
修改后的写法：

import axios from 'axios'
import type {
  AxiosError,
  AxiosInstance,
  AxiosRequestHeaders,
  AxiosResponse,
  InternalAxiosRequestConfig
} from 'axios'

 

找不到名称“Recordable”

直接在类型声明文件中声明一个类型即可，没有类型声明文件直接新建一个（types文件夹下新建global.d.ts文件）

declare type Recordable<T = any> = Record<string, T>

 

vite + ts + vue3 prettier.config.js或 .prettierrc.js 不生效？？？

这里需要查看一下package.json 文件中的type是什么？当设置为"module"时，type字段允许包指定ES模块中的所有.js文件。如果省略“type”字段或将其设置为“commonjs”，则所有.js文件都被视为commonjs。

所以问题找到，就是这个type导致的。

• 解决方案1：直接删掉这个type

• 解决方案2：将prettier.config.js或 .prettierrc.js的后缀.js改成.cjs
  官网说明
  

 

元素隐式具有 “any” 类型,因为类型为 “string” 的表达式不能用于索引类型

• 报错代码

<div class="child-menu-title mb-8 flex items-center">
  <!-- 这行代码提示：元素隐式具有 "any" 类型,因为类型为 "string" 的表达式不能用于索引类型 -->
  <span>{{ childMenu[showChildMenuType].title }}</span>
</div>

const childMenu = {
  'first': {
    title: '标题',
    list: []
  }
}

• 修正后的代码

<div class="child-menu-title mb-8 flex items-center">
  <span>{{ childMenu[showChildMenuType].title }}</span>
</div>

interface ChildMenuItem {
  title: string
  list: Array<{ title: string; content: string }>
}
interface ChildMenu {
  [key: string]: ChildMenuItem
}
const childMenu: ChildMenu = {
  'first': {
    title: '标题',
    list: []
  }
}

vue3中使用v-model绑定的值须得是ref函数，如果使用reactive函数可能会导致赋值失效！