如何实现TSX全局引入typed-html，无需手动导入？

你遇到的核心问题是只完成了TypeScript的类型声明，但没有在运行时将tHTML真正挂载到全局环境中，导致浏览器找不到该变量。以下是具体的解决步骤：

1. 在运行时挂载全局变量 #

在你的框架初始化入口文件（比如framework-boot.ts）里，导入tHTML并挂载到globalThis（兼容浏览器和Node.js的通用全局对象）：

import * as tHTML from 'typed-html';

// 将tHTML挂载到全局对象，确保运行时可访问
globalThis.tHTML = tHTML;

2. 完善TypeScript全局类型声明 #

修改你的global.ts文件，确保类型与运行时变量匹配，且文件被标记为模块（必须包含export {}）：

import type * as tHTML from 'typed-html';

declare global {
  // 声明全局变量tHTML的类型
  var tHTML: typeof tHTML;
}

// 导出空对象，让TypeScript识别该文件为模块
export {};

这样既消除TypeScript的命名报错，也能保留完整的类型提示。

3. 优化TSX配置（可选） #

如果希望直接编写TSX标签而无需手动调用tHTML.createElement，可以在tsconfig.json中配置JSX转换规则：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 使用自动JSX导入模式
    "jsxImportSource": "typed-html", // 指定JSX处理库为typed-html
    // 其他编译配置...
  }
}

配置后，TSX代码会自动由typed-html处理，无需额外导入即可使用标签语法。

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