JSX 元素隐式具有类型 "any"，因为不存在接口 "JSX.IntrinsicElements"。ts 无法使用 JSX，除非提供了 "--js

阿白的白日梦2025-03-31 14:59

这两个错误是 TypeScript 在处理 JSX 代码时常见的问题，下面为你详细解释并给出解决办法。

错误原因分析

1.JSX 元素隐式具有类型 "any"，因为不存在接口 "JSX.IntrinsicElements" ：这个错误表明 TypeScript 无法识别 JSX 元素的类型。通常，TypeScript 需要相关的类型定义来识别 JSX 元素，要是没有合适的类型定义，就会把 JSX 元素的类型当作 any。
2.无法使用 JSX，除非提供了 "--jsx" 标志 ：此错误意味着 TypeScript 编译器不清楚该如何处理 JSX 代码。在编译 JSX 代码时，TypeScript 要求指定 --jsx 选项，以此明确编译 JSX 代码的方式。

解决办法

配置 tsconfig.json 文件要保证 tsconfig.json 文件包含正确的配置，特别是 jsx 和 lib 选项。以下是一个示例配置：

json 复制代码

{ 
    "compilerOptions": { 
        "target": "ES6", 
        "module": "ESNext", 
        "jsx": "react-jsx", 
        "lib": ["ESNext", "DOM"],
        "strict": true, 
        "esModuleInterop": true, 
        "skipLibCheck": true, 
        "forceConsistentCasingInFileNames": true 
    }, 
    "include": ["src"] 
 }

解释：

jsx: "react-jsx"：指定 TypeScript 以 React 17+ 的新 JSX 转换方式来编译 JSX 代码。
lib: ["ESNext", "DOM"]：包含必要的类型定义，让 TypeScript 能够识别 JSX 元素和 DOM API。
在配置好 tsconfig.json 并安装了必要的类型定义之后，这个组件应该就能正常编译了。按照上述步骤操作，你应该能够解决这两个 TypeScript 错误。要是问题依旧存在，请检查 tsconfig.json 文件的配置以及依赖的安装情况。