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

I am just trying to mess around with PaperJS in TypeScript and I could not find a definition so I am creating my own one.

我只是试着在打字稿中乱写一些PaperJS，我找不到定义，所以我在创建自己的定义。

There is a situation that I have seen twice when dealing with definition files. In my case, there is a global variable called paper. But there also appears to be a module called paper too.

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

How does one deal with this without getting a duplicate identifier error?

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

Important Note! Perhaps paper does not have a module name.... Maybe every function is on the global scope. I do not really understand the architecture.

重要提示!也许纸没有模块名称....也许每个函数都在全局范围内。我真的不懂建筑。

paper.d.ts

paper.d.ts

declare var paper: paper.PaperScope;

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

Duplicate Identifier 'paper'

重复的标识符“纸”

1 个解决方案

#1

In this case, I don't think you need to separately declare the paper variable and then declare the module - it works to just use declare module paper. There may be more to the library that will change the approach, but I was able to at least get the initial example working.

在这种情况下，我认为您不需要分别声明纸张变量，然后声明模块——它只使用声明模块文件。可能会有更多的库会改变方法，但是我至少能够得到最初的示例工作。

The recommended way to generate a TypeScript definitions file by hand is to copy and paste as many samples as you can find off the library's web site into separate functions in a new TypeScript file that have a link back to where you found them. Turn off "Allow implicit 'any' types" in the VS TypeScript Build window, or use the --noImplicitAny command line switch. Then reference your d.ts file at the top and start working each error one by one. Once your TypeScript file compiles without error, you can have fair confidence that it's correct at least as far as the tests you've assembled. (You don't actually have to "run" any tests - it's sufficient for the TypeScript file to compile without error since we're testing the definition, not the code.)

通过手工生成一个打印文件定义文件的推荐方法是复制和粘贴尽可能多的示例，因为您可以在一个新的TypeScript文件中找到该库的web站点的独立函数，该文件与您找到它们的位置有关联。关闭“允许隐式”在VS . TypeScript构建窗口中的任何“类型”，或者使用——noImplicitAny命令行开关。然后参考你的d。在顶部的ts文件，开始一个一个地处理每个错误。一旦您的TypeScript文件没有错误地编译，您就可以确信它是正确的，至少在您组装的测试中是正确的。(实际上，您不必“运行”任何测试—因为我们正在测试定义，而不是代码，所以对于TypeScript文件来说，编译时没有错误就足够了。)

Note: it is common to have to make minor tweaks to the sample to cast things as needed. You can see that I casted canvas as an HTMLCanvasElement. I could have made the setup method in the declaration accept a regular HTMLElement instead. This would have required no casting from getElementById(), but it would also not nudge the user of the definition in the correct direction, so there can be some style decisions involved.

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

If you come up with a good definition for a library, please contribute it to the DefinitelyTyped library on GitHub. http://definitelytyped.org/guides/contributing.html

如果您为一个库提供了一个很好的定义，请将其贡献给GitHub上的定义式库。http://definitelytyped.org/guides/contributing.html

Here's what I was able to come up with to get you started using the strategy above:

下面是我能想出的让你开始使用上面的策略的方法:

paper-tests.ts

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

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;
}