TS2503: 找不到JSX命名空间，React组件中JSX.IntrinsicElements的等效类型是什么？

先处理TS2503: Cannot find namespace 'JSX'错误 #

出现这个错误通常有几个常见原因，对应解决方法如下：

• 确保组件文件后缀是.tsx，TypeScript仅在TSX后缀的文件中自动启用JSX类型支持。
• 确认已安装匹配版本的@types/react和@types/react-dom（React 18+对应@types/react@18.x.x版本），并在tsconfig.json中正确配置了jsx选项（比如"jsx": "preserve"或"jsx": "react-jsx"）。
• 如果在非TSX文件或服务器组件中使用，可显式导入React类型：import type React from 'react'，以此来获取JSX相关类型定义。

JSX.IntrinsicElements的等效类型 #

当全局JSX命名空间无法被识别时，React.JSX.IntrinsicElements是完全等效的替代类型。

举个例子，如果你之前的代码是：

type ValidHtmlTag = keyof JSX.IntrinsicElements;

修改为：

import type React from 'react';

type ValidHtmlTag = keyof React.JSX.IntrinsicElements;

在最新的TypeScript和React类型体系中，JSX命名空间被挂载到了React命名空间下，显式使用React.JSX前缀能避免全局类型识别问题，同时保持功能完全一致。

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari