在Deno中使用nano_jsx定义JSX.IntrinsicElements及解决TS报错

问题根源 #

使用nano_jsx编写JSX时，TypeScript无法找到JSX.IntrinsicElements接口的定义，导致所有原生HTML元素（如<div>）被隐式推断为any类型，从而触发deno-ts(7026)错误。

解决办法 #

1. 导入nano_jsx官方类型定义 #

直接引入nano_jsx的类型声明文件，让TypeScript自动识别所有原生HTML元素的类型：

import type { JSX } from "https://cdn.jsdelivr.net/npm/nano-jsx@0.0.35/lib/index.d.ts";

注意：请替换URL中的版本号为你实际使用的nano_jsx版本。

2. 手动声明全局JSX接口（备选方案） #

如果导入官方类型无效，可手动声明JSX.IntrinsicElements接口，但这种方式会丢失属性类型校验，仅适合临时调试：

declare global {
  namespace JSX {
    interface IntrinsicElements {
      div: Record<string, unknown>;
      span: Record<string, unknown>;
      h1: Record<string, unknown>;
      // 按需添加其他HTML元素
    }
  }
}

3. 配置Deno的JSX编译选项 #

在deno.json或deno.jsonc中添加JSX相关配置，让Deno关联nano_jsx的处理逻辑：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://cdn.jsdelivr.net/npm/nano-jsx@0.0.35/lib/index.js"
  }
}

验证修复 #

完成上述操作后，重新运行你的代码：

const problematicCode = <div>Hello world</div>;

此时TypeScript将正确识别<div>的类型，deno-ts(7026)错误会消失。

内容的提问来源于stack exchange，提问作者ThomasReggi