React+TS调用Gradient类报initGradient属性不存在类型错误

问题现象 #

• 技术栈：React + TypeScript + Tailwind CSS
• 报错信息：Property 'initGradient' does not exist on type 'Gradient'
• 相同逻辑在原生HTML/CSS环境可正常运行，已完成Gradient.js文件编写、App.css样式配置

原问题代码如下：

function App() {
  <script src="./Gradient"></script>;
  const gradient = new Gradient();
  gradient.initGradient("#gradient-canvas");
  return (

    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-50 h-50"
        ></canvas>
    </div>
  );
}

export default App;

问题根因 #

• JSX中直接写<script>标签不会完成脚本引入，TypeScript无法识别未导入、未做类型声明的Gradient类
• 直接在组件函数体中同步执行实例化逻辑时，canvas节点还未挂载到DOM，就算类型校验通过也会出现找不到节点的问题
• 代码中写的w-50 h-50是无效Tailwind类名，会导致画布尺寸不符合预期

修复步骤 #

• 正确引入Gradient类
  将Gradient.js移动到src目录下（例如src/utils/Gradient.js），在App.tsx顶部通过import语法引入，删除JSX中无效的script标签：

import Gradient from './utils/Gradient'

如果TS提示找不到对应模块，在src根目录新建global.d.ts文件补充类型声明：

declare class Gradient {
  initGradient(selector: string): void;
}
export default Gradient;

• 调整初始化时机
  使用useEffect钩子，等组件挂载完成、canvas渲染到页面后再执行渐变初始化逻辑，避免DOM获取失败。

• 修正无效样式类
  将无效的w-50 h-50替换为合法Tailwind类，例如需要画布铺满父容器就用w-full h-full。

修复后的完整参考代码：

import { useEffect } from 'react';
import Gradient from './utils/Gradient';
import './App.css';

function App() {
  useEffect(() => {
    const gradient = new Gradient();
    gradient.initGradient("#gradient-canvas");
  }, []);

  return (
    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-full h-full"
      ></canvas>
      {/* 页面其余业务内容 */}
    </div>
  );
}

export default App;

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