在 TypeScript 1.0 中向 Array 添加方法 [英] Add method to Array in TypeScript 1.0

问题描述

我正在尝试为 ASP.NET Ajax 库创建 TypeScript 1.0.2 (VS 2013 Update 2 RTM) 定义文件，但我对如何定义 MS Ajax 添加的其他方法感到困惑基本 JS 类型，例如 Array.我创建了一个 AspNetAjax.d.ts 和一个 AspNetAjax-tests.ts 文件.当我尝试在测试文件中使用add"方法时，我收到下面列出的编译器错误.

I'm trying to create a TypeScript 1.0.2 (VS 2013 Update 2 RTM) definition file for the ASP.NET Ajax library, and I'm getting hung up on how to define the additional methods that MS Ajax adds to base JS types such as Array. I created a AspNetAjax.d.ts and a AspNetAjax-tests.ts file. When I attempt to use the "add" method in the test file, I get the compiler error that is listed below.

AspNetAjax.d.ts

interface Array<T> {
    add(array: T[], item: T): void;
}

AspNetAjax-tests.ts

///<reference path="AspNetAjax.d.ts" /> 

var a: string[] = ['a', 'b', 'c', 'd'];
Array.add(a, 'e');
console.log(a.toString());

错误 1 ​​属性 'add' 不存在于类型 '{ isArray(arg: any): boolean;原型:任何[];(arrayLength?: number): any[];(arrayLength: number): T[];(...项目: T[]): T[];new(arrayLength?: number): any[];new(arrayLength: number): T[];new(...items: T[]): T[];}'.c:\path\AspNetAjax-tests.ts 4 7 TypeScriptHTMLApp1

Error 1 The property 'add' does not exist on value of type '{ isArray(arg: any): boolean; prototype: any[]; (arrayLength?: number): any[]; (arrayLength: number): T[]; (...items: T[]): T[]; new(arrayLength?: number): any[]; new(arrayLength: number): T[]; new(...items: T[]): T[]; }'. c:\path\AspNetAjax-tests.ts 4 7 TypeScriptHTMLApp1

来自同一个 d.ts 文件的其他定义在测试文件中起作用，所以我知道引用在物理上起作用.TypeScript 也没有抱怨我声明 d.ts 文件的方式(那里没有红色波浪线).

Other definitions from the same d.ts file are working in the tests file so I know that the reference is physically working. TypeScript also doesn't complain about the way I've declared the d.ts file (no red squiggles there).

我知道这些其他问题，我以为我正在按照他们的建议做，但它们似乎是从 2012 年末/2013 年初开始的，所以也许从那时起这样做的方式发生了变化?

I am aware of these other questions and I thought I was doing what they suggested, but it seems they're from late 2012/early 2013 so perhaps the way to do this has changed since then?

在 TypeScript 中扩展数组

在 Typescript 中向数组添加属性

如何添加静态方法到现有类型?

我需要对 d.ts 进行编码，以便 .ts 文件中的代码能够工作.有什么想法吗?

I need to code the d.ts so that the code in the .ts file will work. Any ideas?

推荐答案

在@basarat 和@Ryan-Cavanaugh 的回答之间，我想出了一个适用于 TypeScript 1.0 的对用户来说最小的解决方案，只要你愿意接受修改内置 JS 对象通常是个坏主意，所以如果在 TypeScript 中支持它有点尴尬，那就可以了.

Between @basarat and @Ryan-Cavanaugh's answers I was able to come up with a minimally-horrible-to-the-user solution that works with TypeScript 1.0, as long as one is willing to accept that modifying the built-in JS objects is generally bad idea so it's OK if supporting that in TypeScript is slightly awkward.

假设我在内置 JS Array 对象上定义了 ASP.NET AJAX 扩展:

Assuming that I am defining the ASP.NET AJAX extensions on the built-in JS Array object:

• 我将在 d.ts 文件中声明一个名为 AspNetAjaxExtensions
的模块
• 我将在名为 JavaScriptArray
的模块声明中创建一个非导出接口
• 我将在名为 Array 的模块声明中创建一个导出接口，该接口extends JavaScriptArray
• 我会将 Array 和 Array 的所有定义从 TypeScript 附带的 lib.d.ts 复制到新的 JavaScriptArray<;T> 界面.
• 然后，我可以继续对新的 Array 接口内的扩展功能进行建模.

• I will declare a module in the d.ts file called AspNetAjaxExtensions
• I will create a non-exported interface inside that module declaration called JavaScriptArray<T>
• I will create an exported interface inside that module declaration called Array<T> that extends JavaScriptArray<T>
• I will copy all of the definitions for Array and Array<T> from the lib.d.ts that ships with TypeScript into the new JavaScriptArray<T> interface.
• I can then proceed to model out only the extended functionality inside the new Array<T> interface.

这对 d.ts 作者来说有点反 DRY，但实际上这些东西很少改变，并且从 lib.d.ts 复制的 JavaScriptArray 中的东西是 self- 包含.从技术上讲，甚至可以创建一个构建步骤来动态填充此界面.

This is somewhat anti-DRY for the d.ts author, but in reality these things very infrequently change and the stuff in JavaScriptArray<T> that was copied from lib.d.ts is self-contained. Technically, a build step could even be created to dynamically fill-in this interface.

对于用户来说，他们必须改变他们的代码来调用扩展的 Array 对象:

For the user, they have to change their code that calls the extended Array object from this:

//will be an error in TypeScript 1.0
Array.add(x, 'thing');

为此:

//This works in TypeScript 1.0 after importing the above-described d.ts file.
(<AspNetAjaxExtensions.Array<string>>Array).add(x, 'thing');

甚至可以用 (<AspNetAjaxExtensions.Array<any>>Array).add(.

他们只需要在调用内置 Array 对象上的任何扩展方法时执行此操作(这将被 TypeScript 语法错误调用).对普通 Array 方法的调用仍将使用 lib.d.ts 中的普通"定义.

They only need to do this whenever any of the extended methods on the built-in Array object are called (which will be called out by TypeScript syntax errors). Calls to normal Array methods will still use the "normal" definition in lib.d.ts.

新的 AspNetAjax.d.ts 文件示例:

Example new AspNetAjax.d.ts file:

declare module AspNetAjaxExtensions {

    /** This interface definition was copied from lib.d.ts */
    interface JavaScriptArray<T> {
        new (arrayLength?: number): any[];
        new <T>(arrayLength: number): T[];

        /* -- Snip out many copied and pasted lines of code from lib.d.ts -- */

    }

    /** JavaScript Array object as extended by ASP.NET Ajax */
    export interface Array<T> extends JavaScriptArray<T>  {

        /** Adds an element to the end of an Array object.  This function is static and is invoked without creating an instance of the object.
          http://msdn.microsoft.com/en-us/library/bb310854(v=vs.100).aspx
          @param array The array to add the item to.
          @param item The object to add to the array.
        */
        add(array: T[], item: T): void;

        /* -- etc... defining remaining extended methods -- */
    }
}

这篇关于在 TypeScript 1.0 中向 Array 添加方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！