打字稿定义。全局变量和模块名称相同

Question

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

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

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

重要提示！也许纸没有模块名称......也许每个函数都在全局范围内。我不太明白the architecture。

paper.d.ts

declare var paper: paper.PaperScope;

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

重复的标识符'paper'

Answer 1

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

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

注意：通常必须对示例进行细微调整以根据需要进行投射。你可以看到我将canvas 转换为HTMLCanvasElement。我本可以让声明中的 setup 方法接受常规的 HTMLElement。这不需要从 getElementById() 进行强制转换，但它也不会将定义的用户推向正确的方向，因此可能会涉及一些样式决策。

如果您对库提出了一个好的定义，请将其贡献给 GitHub 上的 distinctlyTyped 库。 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;
}