できない.dev

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.jsonjsx オプションを react-jsx に設定します。

npm i -D @types/react @types/react-dom
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

よくある原因

  1. @types/react 未インストール: React 本体(react パッケージ)と型定義(@types/react)は別パッケージなので、本体だけ入れると JSX.IntrinsicElements が解決できず TS7026 が出る。
  2. jsx オプション未設定: tsc --init のままだと jsx は未設定で、type checker が JSX を解釈できない。
  3. types を狭めすぎた: tsconfig.json"types": ["node"] のように明示すると、@types/react が型解決対象から外れる。
  4. モノレポの 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-dom

2. tsconfig.jsonjsx を指定

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 の .npmrcpublic-hoist-pattern[]=*types* を入れる、または各 workspace の devDependencies@types/react を直接書くと安定します。

この記事は役立ちましたか?