Question

我想在打字稿项目中使用OffscreenCanvas，但我不知道如何做到这一点。当我尝试：

let offscreen = new OffscreenCanvas(256, 256);

我的ide说“找不到名字OffscreenCanvas”。

任何提示？

Answer 1

您可以将@types/offscreencanvas安装到项目中。

纱线

yarn add @types/offscreencanvas

npm

npm i @types/offscreencanvas

现在享受吧！

更多https://www.npmjs.com/package/@types/offscreencanvas

Answer 2

暂时，您需要修改lib.dom.d.ts或类似内容。

在node_modules/typescript/lib/lib.dom.d.ts中，找到interface HTMLCanvasElement extends HTMLElement并添加行

interface HTMLCanvasElement extends HTMLElement {
    // ...
    transferControlToOffscreen(): OffscreenCanvas;
}

interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, CanvasDrawPath, CanvasUserInterface, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, CanvasTextDrawingStyles, CanvasPath {
    readonly canvas: OffscreenCanvas;
}
declare var OffscreenCanvasRenderingContext2D: {
    prototype: OffscreenCanvasRenderingContext2D;
    new(): OffscreenCanvasRenderingContext2D;
}
interface OffscreenCanvas extends EventTarget {
    width: number;
    height: number;
    getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D | null;
}
declare var OffscreenCanvas: {
    prototype: OffscreenCanvas;
    new(width: number, height: number): OffscreenCanvas;
}

最后，在Transferable和lib.dom.d.ts中编辑lib.webworker.d.ts定义：

type Transferable = ArrayBuffer | MessagePort | ImageBitmap | OffscreenCanvas;

到那时，您将完成更改所有功能的功能。

还请注意：OffscreenCanvas的{{1}}和width成员是可修改的，并且在使用height的{{1}}和canvas.transferControlToOffscreen()如果更改，元素将在下一帧同步。

请注意，这不适用于webgl上下文，因为这要更深入一些。或者说，要复制的东西太多了，除非您要进行设置，否则这毫无意义。

这很容易，但是可以。理想情况下，您应该回过头来对打字稿内容进行PR，但是现在这已经足够了。

Answer 3

所有变量都需要在Typescript中进行类型定义，因此将其称为Typescript。如果没有对象的类型定义，则可以自己定义类型，也可以使用以下任何一种类型：
lmstrip

请注意，在Typescript中不建议使用any，如果您对每个变量都这样做，则也可能不使用Typescript。

在此处阅读有关声明文件的信息： https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

如何在TypeScript项目

3 个答案: