如何在非模块化项目中无需导入即可引用Konva类型，解决Rider识别问题

解决方案 #

你遇到的是UMD库全局引入场景下的类型识别问题，无需重写类型定义，按以下步骤操作即可解决：

1. 使用仅类型导入 #

将IDE自动生成的普通导入语句替换为TypeScript专属的仅类型导入：

import type Konva from 'konva';

该导入仅在编译阶段提供类型支持，编译完成后整行代码会被完全删除，不会产生实际运行的导入语句，也就不会出现Cannot use import statement outside a module的报错。

2. 调整tsconfig配置 #

在tsconfig.json的compilerOptions中添加以下配置：

{
  "compilerOptions": {
    "allowUmdGlobalAccess": true,
    "types": ["konva", "jquery"]
  }
}

allowUmdGlobalAccess配置允许TypeScript识别UMD格式库暴露的全局变量，types字段会主动加载对应包的类型定义。

3. （可选）全局变量声明 #

如果完成前两步后IDE依然无法识别全局的Konva变量，在项目根目录新建global.d.ts文件，写入以下内容：

import type Konva from 'konva';

declare global {
  const Konva: typeof Konva;
}

这个声明会显式告知TypeScript全局环境已存在Konva变量，类型与Konva包导出的类型完全一致，不需要额外导入即可直接使用。

你遇到的JQuery类型正常、Konva类型异常的差异，是因为@types/jquery默认就将$和JQuery注册为了全局类型，而Konva的类型定义默认仅支持模块化导入，没有做全局注册，不属于IDE或者配置错误。

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