关于umi4的导出的模块的类型和一些自定义目录名称

[SilentFlute]

1. umi4的导出的模块的类型问题:

umi4用到现在感觉还是很顺手的, 但有个问题一直在困扰着我, 就是umi4导出的模块的类型, 比如:

import { Helmet, useLocation, connect } from 'umi';

然后编辑器会在导出的这3个变量下方显示红色波浪线, 意为: 模块“"umi"”没有导出的成员“xxx”。

这个问题倒不影响使用, 但看起来很难受, 有没有什么方法能解决这个问题呢? 目前umi用的是最新版4.0.57, 是需要装个@types/xxx这种吗? 但我找了下, 似乎只有umi3的类型包

2. 自定义目录问题:

另外就是我突发奇想, 将自定义hooks放到了如下的文件夹中:

这个/src/hooks目录不会对umi的约定目录造成什么影响吧? 目前开发倒是没遇到什么问题, 以及文档中没有提及这样的目录

大佬求解答@fz6m, 蟹蟹

[fz6m]

如果你用的是 umi + 插件，从 umi 导入各种功能即可，如果用的是 max ，需要从 @umijs/max 导入，否则没有类型提示。

[SilentFlute]

我没用@umijs/max, 这是我的配置和package:
config/config.ts:

// import { defineConfig } from "umi";
// import proxy from './proxy';

//不使用defineConfig则能在其他地方获取这些配置
export default {
  plugins: [
    '@umijs/plugins/dist/dva'
  ],
  // proxy,
  dva: {},
  title: 'xxx',
  favicons: [
    '/favicon.svg'
  ]
};

package.json:

{
  "private": true,
  "scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "setup": "umi setup",
    "postinstall": "umi setup",
    "prepare": "husky install"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@ant-design/pro-components": "^2.4.1",
    "antd": "^5.3.1",
    "axios": "^1.3.4",
    "dva": "^2.6.0-beta.22",
    "umi": "^4.0.57"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@umijs/fabric": "^3.0.0",
    "@umijs/plugins": "^4.0.57",
    "eslint": "^8.36.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">18.0.0",
    "yarn": "=1.22.x"
  }
}

然后也是像你说的那样从umi导入各种功能, 但是无论我怎么导入, 都提示: 模块"umi"没有导出成员"xxx":

如图所示, 提示模块"umi"没有导出"Outlet", "Link", "useLocation", "connect", "ConnectProps"
求指点

[fz6m]

你写的 paths 会覆盖 extends 里面的，如果要自定义 tsconfig ，需要把里面的 paths 拷贝一份出来，再改一下路径才行。

[SilentFlute]

666, 可以了, 感谢~
以及我在/src下建了一个/hooks的目录, 这个对umi自带的目录约定不会造成什么影响吧?

[SilentFlute]

还是说自定义hooks也放/src/utils下呢?

[fz6m]

umi 没有约定 src/hooks 目录，无需在意。

[SilentFlute]

ok, thx

[ByYogi]

关键代码是 "@@/*": ["src/.umi/*"]. 定义了这个，umi类型就会正确引用。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["src/*"],
      "@@/*": ["src/.umi/*"],
      "@umijs/max/typings": ["src/.umi/typings"]
    }
  }
}