Hello.tsx代码报错TS7026

Question

这段代码报错,h1 标签 TS7026: JSX element implicitly has type ‘any’ because no interface ‘JSX.IntrinsicElements’ exists.

interface HelloProps {
    msg: string;
}

const Hello = (props: HelloProps) => {
    return (
        <h1>
            Hello {props.msg}
        </h1>
    )
};

Hello.props=['msg'];

export default Hello

Answer 1

张轩 2024-05-15 07:13:32

同学你好

感觉是依赖没有装好，或者编辑器没有识别JSX，可以先重新 reoload 编辑器试试看：

https://stackoverflow.com/questions/37674017/how-to-solve-jsx-element-implicitly-has-type-any-error

Ctrl+Shift+P 然后选择 Developer: Reload Window




• 提问者 979811597 #1

  我用的是webstorm，没有生效，后来在shims-vue.d.ts 中，加了这个：declare namespace JSX {
    interface IntrinsicElements {
      [elemName: string]: any;
    }
  }，就好了。对于webstorm，老师有没有Vue相关插件安装的推荐

• 提问者 979811597 #2

  老师，我TS的基础比较差，不知道为什么在shims-vue.d.ts，declare namespace JSX {
    interface IntrinsicElements {
      [elemName: string]: any;
    }
  }，就消除了报错，这个老师可以讲解一下吗，我只知道这个是处理类型的，比如以前在TS中处理vue文件，就是在这里加上，于是就模仿着试了试，没想到报错就消除了，但是不知道原理是什么，虽然好了，但觉得心里不踏实。

• 张轩 回复 提问者 979811597 #3

  同学你好 webstorm 应该是不用安装任何插件就可以支持 vue 的，而且支持应该还不错。

Answer 2

张轩 2024-05-16 09:52:35

这个错误是因为在 TypeScript 中，当你在 JSX 中使用元素时，需要定义相应的接口类型。在我们的代码中，并没有对应的定义，所以用了一个自己的手动定义，可以通过声明 JSX.IntrinsicElements 接口，使编译器知道如何处理 JSX 元素。通过这样的声明，编译器就知道在 JSX 中使用的元素类型，并且不会出现隐式类型 'any' 的错误。

所以这里应该是 JSX 的类型没有安装完整，不清楚是什么原因，可以按照这样的步骤安装一下

npm install --save-dev @types/react

保证 tsconfig 中的 comilerOptions 中的 jsx 设置为 react
    "compilerOptions": 
    {    "jsx": "react",    // 其他配置项...
  },

可以去看一下 4-13 4-14 两个小节去了解一下定义文件的基础知识。