如何引用不导入的类型

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充满错误，代码实际上在编译后完美运行

最小可复制示例:

这是一个。net解决方案，设计为使用Rider打开，但是这可以完全通过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: '',
});