CODEWITHSUNDEEP
javascripttypescriptamd
Steve Danner
Steve Danner

Reputation: 22188

Using an existing AMD js module in a new typescript file (0.9)

I am trying to use an existing AMD written in pure javascript with a new TypeScript file using TypeScript v0.9. I've broken it down to a very simple AMD to demonstrate the issue.

First, my existing AMD (activityProperty.js):

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

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

            return self;
        };

        return activityProperty;
    });

Second, I created activityProperty.d.ts with an interface definiton of the existing AMD:

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

Finally, I created a brand new TypeScript class (PropertyBag.ts) where I wish to use my old 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()???);
    }
}

I cannot for the life of me figure out how to use the old AMD definition to create a new instance of the activityProperty class. Am I missing something trivial or obvious?

Thanks for any and all help!

Upvotes: 3

Views: 902

Answers (2)

Stephen Chung
Stephen Chung

Reputation: 14605

Your code won't compile to JavaScript that will work straight with your external AMD module, because your AMD module exports the class itself, not a namespace with an IActivityProperty property pointing to your class.

You need to define your system this way:

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

This will compile straight to JavaScript that works with your external AMD modules. However, I think what you really want is:

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>

Upvotes: 2

Fenton
Fenton

Reputation: 251252

Currently your declaration only has an interface. Declare it as a class to show it can be newed and/or extended...

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

You can decide whether to keep your interface or not.

Upvotes: 1

Related Questions