在新的打字稿文件中使用現有的AMD js模塊（0.9）

我嘗試使用使用TypeScript v0.9的新TypeScript文件使用純JavaScript編寫的現有AMD。我已經把它分解成一個非常簡單的AMD來證明這個問題。在新的打字稿文件中使用現有的AMD js模塊（0.9）

首先，我現有的AMD（activityProperty.js）：

define([], 
    function() { 
     var activityProperty = function (key, value) { 
      var self = this; 

      self.key = key; 
      self.value = value; 

      return self; 
     }; 

     return activityProperty; 
    });

其次，我創建activityProperty.d.ts與現有AMD的接口definiton：

export interface IActivityProperty { 
    key: string; 
    value: string; 
}

最後，我創建了一個全新的TypeScript類（PropertyBag.ts），我希望使用我以前的activityProperty AMD：

import PropertyModule = require("activityProperty"); 

class PropertyBag { 
    private properties: Array<PropertyModule.IActivityProperty>; 

    constructor() { 
     this.properties = new Array<PropertyModule.IActivityProperty>(); 

     //this is where my problem is... 
     //this.properties.push(???new activityProperty()???); 
    } 
}

我不能爲我的生活弄清楚如何使用舊的AMD定義來創建一個新的類實例activityProperty。我錯過了一些微不足道或明顯的東西嗎？

感謝您的幫助！

來源

2013-06-21 Steve Danner

當前你的聲明只有一個接口。將其聲明爲類以顯示它可以被新增和/或擴展...

declare class ActivityProperty { 
    constructor(public key: string, public value: string); 
}

您可以決定是否保留接口。

來源

2013-06-22 00:28:34 Fenton

感謝您的回答史蒂夫。不過，我只是把它作爲一個小規模的例子，因爲我們的AMD定義比較大，我正在尋找一種方法來以這種方式使用它們而不需要重寫。所以想象界面甚至不在那裏。有沒有辦法使用TypeScript中第一個'define'語句中定義的類？ –

好的，這是大部分答案，但我必須添加新的'export = activityProperty;'才能讓類被使用它的新TypeScript類識別。感謝你和@ stephen-chung的幫助！ –

您的代碼不會編譯爲JavaScript，它將直接與您的外部AMD模塊一起工作，因爲您的AMD模塊自身導出類，而不是具有指向您的類的IActivityProperty屬性的名稱空間。

您需要定義你的系統是這樣的：

activityProperty.d.ts：

declare module "activityProperty" 
{ 
    class activityProperty { 
     constructor(key: KeyType, value: ValueType); 
     key: KeyType; 
     value: ValueType; 
    } 

    export = activityProperty; 
}

PropertyBag.ts：

/// <reference path="activityProperty.d.ts" /> 
import activityProperty = module("activityProperty"); 

this.properties = new Array<activityProperty>(); 
this.properties.push(new activityProperty(key, value));

這將直接編譯成JavaScript與工程您的外部AMD模塊。不過，我想你真正想要的是：

activityProperty.d.ts：

declare module "activityProperty" 
{ 
    class activityProperty<K, T> { 
     constructor(key: K, value: T); 
     key: K; 
     value: T; 
    } 

    export = activityProperty; 
}

PropertyBag.ts：

/// <reference path="activityProperty.d.ts" /> 
import activityProperty = module("activityProperty"); 

var x = new activityProperty("hello", 123); // Type inferred to be activityProperty<string, number>

來源

2013-06-23 06:25:19

雖然在這個例子中非常容易地在TypeScript中重寫AMD，但還有其他的AMD根本就不是微不足道的。我正在尋找使用現有的JS AMD定義與新的TypeScript文件。 –

在這種情況下，您可能會取消TypeScript的大部分優點，即靜態類型。爲了使用靜態類型，你總是需要一個.d.ts定義文件......否則，一個簡單的「declare var activityProperty;」或任何外部根對象可以讓你與外部JavaScript進行互操作，但沒有類型檢查的好處。 –

另外，請注意，您*不必*必須在TypeScript中重寫AMD。在你的例子中，activityProperty.js保持原樣。您只需要一個與您的js匹配的定義文件（例如activityProperty.d.ts）。通過以我描述的格式對其進行編碼，編譯後的JavaScript（即propertyBag.js）會在您的AMD加載程序運行時自動加載您的activityProperty.js。 –

在新的打字稿文件中使用現有的AMD js模塊（0.9）

回答

相關問題