typescript 定义。全局变量和模块名称相同

Question

我只是想在 TypeScript 中弄乱 PaperJS，但找不到定义，所以我正在创建自己的定义。

在处理定义文件时，有一种情况我见过两次。在我的例子中，有一个名为 paper 的全局变量。但似乎也有一个名为 paper 的模块。

如何在不出现重复标识符错误的情况下处理这一问题？

重要提示!也许论文没有模块名称……也许每个函数都在全局范围内。不是很懂the architecture .

paper.d.ts

declare var paper: paper.PaperScope;

declare module paper{
    export class PaperScope{
       ....
    }
}

重复标识符“论文”

Answer 1

在这种情况下，我认为您不需要单独声明 paper 变量然后声明模块 - 只需使用 declare module paper 即可。库中可能有更多内容会改变方法，但我至少能够让初始示例正常工作。

手动生成 TypeScript 定义文件的推荐方法是，将尽可能多的示例从图书馆的网站上复制并粘贴到新的 TypeScript 文件中的单独函数中，该文件具有指向您找到它们的位置的链接。在 VS TypeScript 构建窗口中关闭“允许隐式‘任何’类型”，或使用 --noImplicitAny 命令行开关。然后在顶部引用您的 d.ts 文件并开始逐个处理每个错误。一旦您的 TypeScript 文件编译无误，您就可以确信它至少就您组装的测试而言是正确的。 (您实际上不必“运行”任何测试 - TypeScript 文件编译无误就足够了，因为我们测试的是定义，而不是代码。)

注意:通常需要对样本进行微调以根据需要进行转换。您可以看到我将 canvas 转换为 HTMLCanvasElement。我本可以让声明中的设置方法改为接受常规的 HTMLElement。这不需要从 getElementById() 进行转换，但它也不会将定义的用户推向正确的方向，因此可能涉及一些样式决策。

如果您对库有一个很好的定义，请将它贡献给 GitHub 上的 DefinitelyTyped 库。 http://definitelytyped.org/guides/contributing.html

为了让您开始使用上述策略，我想出了以下办法:

paper-tests.ts

///<reference path="paper.d.ts" />
// tests for hypothetical paper.js definitions file.

/** Test from http://paperjs.org/tutorials/getting-started/using-javascript-directly/#making-the-scope-global */
function settingUpAScope() {
    // Get a reference to the canvas object
    var canvas = <HTMLCanvasElement>(document.getElementById('myCanvas'));
    // Create an empty project and a view for the canvas:
    paper.setup(canvas);
    // Create a Paper.js Path to draw a line into it:
    var path = new paper.Path();
    // Give the stroke a color
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    // Move to start and draw a line from there
    path.moveTo(start);
    // Note that the plus operator on Point objects does not work
    // in JavaScript. Instead, we need to call the add() function:
    path.lineTo(start.add([200, -50]));
    // Draw the view now:
    paper.view.draw();
}

paper.d.ts

declare module paper {

    export class Path {
        strokeColor: string;
        moveTo: (destination: Point) => void;
        lineTo: (destination: Point) => void;
    }
    export class Point {
        constructor(x: number, y: number);
        x: number;
        y: number;
        add: (something: number[]) => Point;
    }

    export interface IView {
        draw: () => void;
    }

    var view: IView;

    function setup(element: HTMLCanvasElement): void;
}