如何在不导入的情况下引用类型

Question

我不确定这是代码、配置还是 IDE 问题。使用 Jetbrains Rider。

我正在尝试在非模块化 JavaScript 中使用 KonvaJS，这让我抓狂。我正在进行的项目正在重新架构，因此虽然它最终将包含模块，但目前还没有。

我希望能够使用 Konva 类型，IDE 似乎不会自动识别它们。我希望能够像这样声明一个变量

let stage : Konva.Stage

在这种情况下，Rider 会尝试自动导入 Konva 命名空间。

import Konva from “konva”

这确实会导致 IDE 正确识别类型，但是一旦编译了 typescript，我就会收到语法错误Cannot use import statement outside a module

我的脚本不在模块中，请注意我通过 CDN 引用 Konva JavaScript 文件并且不希望在本地编译它可能很重要。我只是想让 IDE 识别类型。

我在 Konva 的 commonjs 网站上看到了这个：

const Konva = require('konva/cmj').default;

这也给了我require is undefined

但是，当我尝试执行 let stage : Konva.Stage 时，无法识别 Konva 命名空间（尽管在表达式中似乎可以访问）。我也尝试过使用或只是将.d.ts 文件放在同一目录中，但无济于事。

我对 JQuery 没有任何问题，这是我唯一的其他外部依赖项。

如果我不导入或不需要任何东西，只是让IDE充满错误，代码编译后实际上运行完美

最小可重现示例：

这是一个设计为使用 Rider 打开的 .NET 解决方案，但是这可以专门通过 typescript 完成。相关文件都在wwwroot目录下。 @types/jquery 和 konva 是已安装的 npm 包，尽管这两个库都被使用的本地文件/CDN 引用。

https://www.icloud.com/iclouddrive/0vOxLlg9JB0nJQpAbClrbg8hA#KonvaTest

编辑：我将我的几个代码文件放入模块中并设置所有内容以使用它。事情变得更糟了，再次具体到导入 konva！我在很大程度上得出的结论是，我将不得不编写自己的 Canvas 库（可能是目前最快的解决方案）或编写类型声明文件。考虑到 konva 类型的文件数量，这是一项繁琐而艰巨的任务。如果有人想以 100 美元左右的价格做到这一点，请告诉我????

Answer 1

Konva 类型专为模块使用而设计。您可能需要使用一些变通方法才能使其在其他情况下发挥作用。

可能最简单的方法是修改默认的 Konva 类型并使用您自己的本地版本：

// filters
import { Blur } from 'konva/lib/filters/Blur';
import { Brighten } from 'konva/lib/filters/Brighten';
import { Contrast } from 'konva/lib/filters/Contrast';
import { Emboss } from 'konva/lib/filters/Emboss';
import { Enhance } from 'konva/lib/filters/Enhance';
import { Grayscale } from 'konva/lib/filters/Grayscale';
import { HSL } from 'konva/lib/filters/HSL';
import { HSV } from 'konva/lib/filters/HSV';
import { Invert } from 'konva/lib/filters/Invert';
import { Kaleidoscope } from 'konva/lib/filters/Kaleidoscope';
import { Mask } from 'konva/lib/filters/Mask';
import { Noise } from 'konva/lib/filters/Noise';
import { Pixelate } from 'konva/lib/filters/Pixelate';
import { Posterize } from 'konva/lib/filters/Posterize';
import { RGB } from 'konva/lib/filters/RGB';
import { RGBA } from 'konva/lib/filters/RGBA';
import { Sepia } from 'konva/lib/filters/Sepia';
import { Solarize } from 'konva/lib/filters/Solarize';
import { Threshold } from 'konva/lib/filters/Threshold';

declare global {
  export namespace Konva {
    export let enableTrace: number;
    export let pixelRatio: number;
    export let dragDistance: number;
    export let angleDeg: boolean;
    export let showWarnings: boolean;
    export let capturePointerEventsEnabled: boolean;
    export let dragButtons: Array<number>;
    export let hitOnDragEnabled: boolean;
    export const isDragging: () => boolean;
    export const isDragReady: () => boolean;

    export type Vector2d = import('konva/lib/types').Vector2d;

    export const Node: typeof import('konva/lib/Node').Node;
    export type Node = import('konva/lib/Node').Node;
    export type NodeConfig = import('konva/lib/Node').NodeConfig;

    export type KonvaEventObject<EventType> =
      import('konva/lib/Node').KonvaEventObject<EventType>;

    export type KonvaPointerEvent =
      import('konva/lib/PointerEvents').KonvaPointerEvent;

    export type KonvaEventListener<This, EventType> =
      import('konva/lib/Node').KonvaEventListener<This, EventType>;

    export const Container: typeof import('konva/lib/Container').Container;
    export type Container = import('konva/lib/Container').Container<Node>;
    export type ContainerConfig = import('konva/lib/Container').ContainerConfig;

    export const Transform: typeof import('konva/lib/Util').Transform;
    export type Transform = import('konva/lib/Util').Transform;

    export const Util: typeof import('konva/lib/Util').Util;

    export const Context: typeof import('konva/lib/Context').Context;
    export type Context = import('konva/lib/Context').Context;

    export const Stage: typeof import('konva/lib/Stage').Stage;
    export type Stage = import('konva/lib/Stage').Stage;
    export const stages: typeof import('konva/lib/Stage').stages;

    export const Layer: typeof import('konva/lib/Layer').Layer;
    export type Layer = import('konva/lib/Layer').Layer;
    export type LayerConfig = import('konva/lib/Layer').LayerConfig;

    export const FastLayer: typeof import('konva/lib/FastLayer').FastLayer;
    export type FastLayer = import('konva/lib/FastLayer').FastLayer;

    export const Group: typeof import('konva/lib/Group').Group;
    export type Group = import('konva/lib/Group').Group;

    export const DD: typeof import('konva/lib/DragAndDrop').DD;

    export const Shape: typeof import('konva/lib/Shape').Shape;
    export type Shape = import('konva/lib/Shape').Shape;
    export type ShapeConfig = import('konva/lib/Shape').ShapeConfig;
    export const shapes: typeof import('konva/lib/Shape').shapes;

    export const Animation: typeof import('konva/lib/Animation').Animation;
    export type Animation = import('konva/lib/Animation').Animation;

    export const Tween: typeof import('konva/lib/Tween').Tween;
    export type Tween = import('konva/lib/Tween').Tween;
    export type TweenConfig = import('konva/lib/Tween').TweenConfig;
    export const Easings: typeof import('konva/lib/Tween').Easings;

    export const Arc: typeof import('konva/lib/shapes/Arc').Arc;
    export type Arc = import('konva/lib/shapes/Arc').Arc;
    export type ArcConfig = import('konva/lib/shapes/Arc').ArcConfig;
    export const Arrow: typeof import('konva/lib/shapes/Arrow').Arrow;
    export type Arrow = import('konva/lib/shapes/Arrow').Arrow;
    export type ArrowConfig = import('konva/lib/shapes/Arrow').ArrowConfig;
    export const Circle: typeof import('konva/lib/shapes/Circle').Circle;
    export type Circle = import('konva/lib/shapes/Circle').Circle;
    export type CircleConfig = import('konva/lib/shapes/Circle').CircleConfig;
    export const Ellipse: typeof import('konva/lib/shapes/Ellipse').Ellipse;
    export type Ellipse = import('konva/lib/shapes/Ellipse').Ellipse;
    export type EllipseConfig =
      import('konva/lib/shapes/Ellipse').EllipseConfig;
    export const Image: typeof import('konva/lib/shapes/Image').Image;
    export type Image = import('konva/lib/shapes/Image').Image;
    export type ImageConfig = import('konva/lib/shapes/Image').ImageConfig;
    export const Label: typeof import('konva/lib/shapes/Label').Label;
    export type Label = import('konva/lib/shapes/Label').Label;
    export type LabelConfig = import('konva/lib/shapes/Label').LabelConfig;
    export const Tag: typeof import('konva/lib/shapes/Label').Tag;
    export type Tag = import('konva/lib/shapes/Label').Tag;
    export type TagConfig = import('konva/lib/shapes/Label').TagConfig;
    export const Line: typeof import('konva/lib/shapes/Line').Line;
    export type Line = import('konva/lib/shapes/Line').Line;
    export type LineConfig = import('konva/lib/shapes/Line').LineConfig;
    export const Path: typeof import('konva/lib/shapes/Path').Path;
    export type Path = import('konva/lib/shapes/Path').Path;
    export type PathConfig = import('konva/lib/shapes/Path').PathConfig;
    export const Rect: typeof import('konva/lib/shapes/Rect').Rect;
    export type Rect = import('konva/lib/shapes/Rect').Rect;
    export type RectConfig = import('konva/lib/shapes/Rect').RectConfig;
    export const RegularPolygon: typeof import('konva/lib/shapes/RegularPolygon').RegularPolygon;
    export type RegularPolygon =
      import('konva/lib/shapes/RegularPolygon').RegularPolygon;
    export type RegularPolygonConfig =
      import('konva/lib/shapes/RegularPolygon').RegularPolygonConfig;
    export const Ring: typeof import('konva/lib/shapes/Ring').Ring;
    export type Ring = import('konva/lib/shapes/Ring').Ring;
    export type RingConfig = import('konva/lib/shapes/Ring').RingConfig;
    export const Sprite: typeof import('konva/lib/shapes/Sprite').Sprite;
    export type Sprite = import('konva/lib/shapes/Sprite').Sprite;
    export type SpriteConfig = import('konva/lib/shapes/Sprite').SpriteConfig;
    export const Star: typeof import('konva/lib/shapes/Star').Star;
    export type Star = import('konva/lib/shapes/Star').Star;
    export type StarConfig = import('konva/lib/shapes/Star').StarConfig;
    export const Text: typeof import('konva/lib/shapes/Text').Text;
    export type Text = import('konva/lib/shapes/Text').Text;
    export type TextConfig = import('konva/lib/shapes/Text').TextConfig;
    export const TextPath: typeof import('konva/lib/shapes/TextPath').TextPath;
    export type TextPath = import('konva/lib/shapes/TextPath').TextPath;
    export type TextPathConfig =
      import('konva/lib/shapes/TextPath').TextPathConfig;
    export const Transformer: typeof import('konva/lib/shapes/Transformer').Transformer;
    export type Transformer =
      import('konva/lib/shapes/Transformer').Transformer;
    export type TransformerConfig =
      import('konva/lib/shapes/Transformer').TransformerConfig;
    export const Wedge: typeof import('konva/lib/shapes/Wedge').Wedge;
    export type Wedge = import('konva/lib/shapes/Wedge').Wedge;
    export type WedgeConfig = import('konva/lib/shapes/Wedge').WedgeConfig;

    export const Filters: {
      Blur: typeof Blur;
      Brighten: typeof Brighten;
      Contrast: typeof Contrast;
      Emboss: typeof Emboss;
      Enhance: typeof Enhance;
      Grayscale: typeof Grayscale;
      HSL: typeof HSL;
      HSV: typeof HSV;
      Invert: typeof Invert;
      Kaleidoscope: typeof Kaleidoscope;
      Mask: typeof Mask;
      Noise: typeof Noise;
      Pixelate: typeof Pixelate;
      Posterize: typeof Posterize;
      RGB: typeof RGB;
      RGBA: typeof RGBA;
      Sepia: typeof Sepia;
      Solarize: typeof Solarize;
      Threshold: typeof Threshold;
    };
  }
}

然后在你的 ts 文件中：

/// <reference path="./konva.d.ts" />

var stage = new Konva.Stage({
  container: '',
});