如何在启用verbatimModuleSyntax时定义自定义JSX命名空间？

问题原因 #

开启verbatimModuleSyntax后，TypeScript会严格遵循ES模块规范，禁止使用export import JSX = JSXInternal这类混合旧式命名空间与ES模块的语法，这就是你遇到报错的核心原因。

解决办法 #

方法1：用类型别名替换旧式导出

直接在h的命名空间内用类型别名关联JSXInternal，完全符合ES模块规范：

// h.ts
import type { JSXInternal } from './jsx.js';

export function h(props: any): any {}

export namespace h {
  // 用类型别名替代不被允许的export import语法
  export type JSX = JSXInternal;
}

方法2：模块级别导出JSX命名空间（推荐）

如果不需要把JSX类型嵌套在h的命名空间下，直接在模块级别导出JSX命名空间并继承JSXInternal的类型，结构更清晰：

// h.ts
import type { JSXInternal } from './jsx.js';

export function h(props: any): any {}

// 模块级别导出JSX命名空间，继承内部定义的元素类型
export namespace JSX {
  export interface IntrinsicElements extends JSXInternal.IntrinsicElements {}
  // 若JSXInternal包含其他类型（比如Element、组件Props），也需在此继承
}

配套TS配置调整

在tsconfig.json里配置JSX相关选项，让TypeScript正确识别你的自定义渲染器：

{
  "compilerOptions": {
    "verbatimModuleSyntax": true,
    "jsx": "react", // 或react-jsx，根据你的渲染逻辑选择
    "jsxFactory": "h", // 指定JSX转换使用的工厂函数为h
    "jsxImportSource": "./path-to-your-module" // 指向你的模块路径或包名
  }
}

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