ts开发问题记录

1、报错 元素隐式具有 "any" 类型，因为类型为 "any" 的表达式不能用于索引类型

代码如下

// 未设置状态码则默认成功状态
   const code = res.data.code || 200;
   const errorCode = {
     401: '认证失败，无法访问系统资源',
     403: '当前操作没有权限',
     404: '访问资源不存在',
     default: '系统未知错误，请反馈给管理员'
   };
   // 获取错误信息
   const msg = errorCode[code] || res.data.msg || errorCode.default;

image.png
最终解决方案如下：

const msg = errorCode[code as keyof typeof errorCode] || res.data.msg || errorCode.default;

解析：keyof
keyof 用于遍历某种类型的属性（可以操作接口、类以及基本数据类型）
首先通过typeof操作符获取errorCode变量的类型，然后通过keyof操作符获取该类型的所有键

2、引入ts文件报错：找不到模块“@/utils/auth”或其相应的类型声明。ts(2307)

image.png
解决方案如下：
在vite.config.ts文件中

...
import { resolve } from 'path';
const pathResolve = (dir: string) => {
  return resolve(__dirname, '.', dir);
};
export default defineConfig({
  ...
  resolve: {
    alias: {
      '@': pathResolve('src/')
    }
  }
});

在tsconfig.json文件中

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  }
}

3、模块 ""path"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入ts(1259)

image.png
image.png
解决方案如下：
在tsconfig.node.json文件中
添加 "allowSyntheticDefaultImports": true
image.png

4、import svgIcon from 'vite-plugin-svg-icons'不可调用

image.png
原因：版本问题当前为vite-plugin-svg-icons@2.0.1
解决方案如下：
在vite.config.ts文件中

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  ...
  plugins: [
    ...
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ],
});

5、类型“NodeRequire”上不存在属性“context”。

import path from 'path';
/********************************自动导包 start********************************/
const file = require.context('./', true, /\.ts/);
const modules = {};
file.keys().forEach((key: string) => {
  const name = path.basename(key, '.ts');
  modules[name] = file(key).default || file(key);
});
/********************************自动导包 end********************************/

export default modules;

解决方法：

5.1第一次使用的解决方案

不报错了，但是运行依然报错

npm i @types/webpack-env -D

在文件tsconfig.json中加入

"types": [...，"webpack-env"]

5.2使用第一种方案报错 Uncaught ReferenceError: require is not defined**

第二种解决方案：

import path from 'path';
// https://cn.vitejs.dev/guide/features.html#glob-import
const files = import.meta.glob('./modules/*.ts');
const modules = {} as any;
for (const key in files) {
  const name = path.basename(key, '.ts');
  modules[name] = files[key];
}

5.3第二种解决方案后运行报错 Module "path" has been externalized for browser compatibility and cannot

原因：原因是 vite 源码中设定了不允许在客户端代码中访问内置模块代码
最终解决方案
安装

npm i path-browserify @types/path-browserify -D

import path from 'path-browserify';
// https://cn.vitejs.dev/guide/features.html#glob-import
/********************************自动导包 start********************************/
const files = import.meta.glob('./*.ts');
const modules = {} as any;
for (const key in files) {
  const name = path.basename(key, '.ts');
  modules[name] = files[key];
}
/********************************自动导包 end********************************/
export default modules;