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

路径配置

项目路径别名的配置
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",
    
  },