TypeScript で TSX の JSX 要素が implicit any になる(TS7026)
`JSX element implicitly has type 'any'` は `@types/react` 未インストール、または `tsconfig.json` の `jsx` オプション未設定が原因。
React なら `@types/react` を追加し `jsx` を `react-jsx` に指定する。
#jsx#tsx#types#react
公開:
要約
JSX element 'div' implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. の TS7026 が出る場合、TypeScript が React の型定義を見つけられていません。
まず @types/react を入れ、tsconfig.json で jsx オプションを react-jsx に設定します。
npm i -D @types/react @types/react-dom{
"compilerOptions": {
"jsx": "react-jsx"
}
}よくある原因
@types/react未インストール: React 本体(reactパッケージ)と型定義(@types/react)は別パッケージなので、本体だけ入れるとJSX.IntrinsicElementsが解決できず TS7026 が出る。jsxオプション未設定:tsc --initのままだとjsxは未設定で、type checker が JSX を解釈できない。typesを狭めすぎた:tsconfig.jsonで"types": ["node"]のように明示すると、@types/reactが型解決対象から外れる。- モノレポの hoist 失敗: pnpm / yarn workspaces で
@types/reactが深い位置に置かれ、TypeScript が moduleResolution の探索範囲外で拾えない。
解決策
1. 型定義を入れる
npm i -D @types/react @types/react-dom
# pnpm の場合
pnpm add -D @types/react @types/react-dom2. tsconfig.json で jsx を指定
React 17 以降の新 JSX Transform を使うなら react-jsx(公式 tsconfig リファレンス)。
{
"compilerOptions": {
"jsx": "react-jsx",
"moduleResolution": "bundler"
}
}古い構成で import React from "react" を毎回書きたい場合は "jsx": "react" のままでも動作します(JSX ドキュメント)。
3. types を絞っているなら React 用を追加
{
"compilerOptions": {
"types": ["node", "react", "react-dom"]
}
}types を未設定にすれば全 @types/* が自動で拾われるので、絞る必要が無いなら削除するのが楽です。
4. モノレポでの hoist
pnpm の .npmrc で public-hoist-pattern[]=*types* を入れる、または各 workspace の devDependencies に @types/react を直接書くと安定します。