SvelteKit中如何让TypeScript识别Konva.Line的扩展方法absY

问题说明 #

我在用Konva开发Canvas功能时，给Konva.Line原型扩展了absY方法来获取绝对Y坐标——因为调用getAbsolutePosition()只能拿到相对Y值，扩展代码如下：

Object.defineProperty(Konva.Line.prototype, "absY", {
    value: function()  {
        return this.getSelfRect().y + this.y()
    },
    writable: true,
    configurable: true,
});

功能本身能正常运行，但WebStorm里调用.absY()时一直标红，原因是TypeScript不识别这个新增的方法类型。我试过在app.d.ts里加下面的声明，但没用，IDE还提示“Unused interface Line”：

declare namespace Konva {
    interface Line {
        absY: () => number;
    }
}

想知道在SvelteKit项目里怎么解决这个问题？另外我也清楚这种写法不是最佳实践，纯粹是受Kotlin使用习惯影响😅

解决方法 #

1. 修正类型声明的写法 #

Konva的TypeScript类型是基于模块的，不是命名空间，所以要改成模块扩展的方式。在src/app.d.ts里替换成下面的代码：

import type { Line } from 'konva';

declare module 'konva' {
    interface Line {
        absY(): number;
    }
}

2. 确认类型文件被TS识别 #

检查项目根目录的tsconfig.json，确保include数组里包含了src/app.d.ts或者src/**/*.d.ts，比如：

{
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

3. 刷新IDE缓存 #

修改完类型声明后，WebStorm可能需要重启或者清除缓存（路径：File → Invalidate Caches...），才能识别新增的方法类型。

4. 保证扩展代码的执行顺序 #

把原型扩展的代码放在一个单独的文件里（比如src/lib/konva-extensions.ts），然后在项目的入口文件（比如+layout.svelte）里导入这个文件，确保扩展代码在使用absY方法之前执行：

<script>
  import '$lib/konva-extensions';
</script>

补充 #

虽然原型扩展确实不是TypeScript推荐的最佳实践（更建议用工具函数或者包装类实现类似功能），但如果习惯这种写法，按上面的步骤就能解决类型标红的问题。

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