解决React18+ts项目导入模块的声明报错

前端小程

已于 2023-07-03 19:03:22 修改

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 react

于 2023-07-03 14:25:34 首次发布

本文链接：https://blog.youkuaiyun.com/CSSAJBQ_/article/details/131514851

在Vite项目中，由于不支持直接将@别名指向src目录，需要在vite.config.ts中手动配置。通过引入path模块并使用resolve.alias设置别名。同时，为了解决TS报错，需安装@types/node并更改import语句。在tsconfig.json中配置baseUrl和paths以实现路径提示。另外，对于React模块导入的错误，可能需要在vite-env.d.ts中进行声明，以及调整tsconfig.json的moduleResolution选项来处理Element与ReactNode类型的不匹配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路径配置

项目路径别名的配置
ts对@指向src的目录提示是不支持的
所以需要手动配置@符号指向
在vite.config.ts

import path from 'path'
export default defineConfig({
	plugins:[react()],
	resolve:{
		alias:{
		"@":path.resolve(__dirname, './src')
		}
	}
})

但这时path模块引入会报错，但是其实我们已经有node所以就已经有path模块，知识缺少声明配置。所以是需要安装关于node这个库的ts声明配置:

npm i -D @types/node

安装后没有爆红，如果import后面的path爆红则修改引入：

import * as  path from 'path'

但是这时输入@是没有提示路径的
则配置路径别名提示，在tsconfig.json 中

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

报错

react 导入模块报错：
导入路径不能以“.tsx”扩展名结束。考虑改为导入“./App.js”
在这里插入图片描述
在声明文件vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.tsx'

报错：类型“Element”的参数不能赋给类型“ReactNode”的参数。
类型“Element”缺少类型“ReactPortal”中的以下属性: key, children, type, props
在这里插入图片描述

在tsconfig.js

 "compilerOptions": {
	//...
    "moduleResolution": "node",
    
  },