Can Typescript import Webpack UMD?

Question

Using TypeScript, is there some way to import a module that has been wrapped by webpack UMD (Universal Module Definition)? For example:

npm install knockback

The .js file (node_modules/knockback/knockback.js) begins like this:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("knockout"), require("backbone"), ....
    else if(typeof define === 'function' && define.amd)
        define(["knockout", "backbone", "underscore"], function webpackLoadOptionalExternalModuleAmd( ....
        });
    else if(typeof exports === 'object')
        exports["kb"] = factory(require("knockout"), require("backbone"), require("underscore"), (function ....
    else
        root["kb"] = factory(root["ko"], root["Backbone"], root["_"], root["jQuery"]);

When I try to import this into a .ts file, tsc produces an error:

import * as k from 'knockback/knockback';

TS2307: Build: Cannot find module 'knockback/knockback'.

Is there anything I can do, short of editing the knockback.js file, to convince tsc to import this .js? I'm using Typescript 1.8.

Utile

Answer 1

When I try to import this into a .ts file, tsc produces an error:

You can use a type definition file quite easily

file knockback.d.ts

declare module 'knockback/knockback' {
    var foo: any;
    export = foo;
}

Hove

Answer 2

FYI, For anyone else who ends up here trying to use knockback.js via Typescript, there is a pre-existing knockback.d.ts file available from DefinitelyTyped. However, the existing .d.ts does not include an export, so is not usable with external modules. Based on basarat's answer, I modified the .d.ts file as follows:

1) Add the following to the end:

declare module "knockback" {
    export = Knockback;
}

2) Remove declare var kb: Knockback.Static from the end.

3) Remove interface Static extends Utils { wrapper and move everything inside the Static interface to namespace scope. Example:

Old:

interface Static extends Utils {
    ViewModel;
    CollectionObservable;
    collectionObservable(model?: Backbone.Collection<Backbone.Model>, options?: CollectionOptions): CollectionObservable;
    observable(
        /** the model to observe (can be null) */
        model: Backbone.Model,
        /** the create options. String is a single attribute name, Array is an array of attribute names. */
        options: IObservableOptions,
        /** the viewModel */
        vm?: ViewModel): KnockoutObservable<any>;
    ...
}

New:

    function collectionObservable(model?: Backbone.Collection<Backbone.Model>, options?: CollectionOptions): CollectionObservable;
    function observable(
        /** the model to observe (can be null) */
        model: Backbone.Model,
        /** the create options. String is a single attribute name, Array is an array of attribute names. */
        options: IObservableOptions,
        /** the viewModel */
        vm?: ViewModel): KnockoutObservable<any>;
    ...

After these changes, usage looks like this:

import * as kb from 'knockback';

class MyViewModel extends kb.ViewModel {
    public name: KnockoutObservable<string>;

    constructor(model: Backbone.Model) {
        super();

        this.name = kb.observable(model, "name");
    }
}

var model = new Backbone.Model({ name: "Hello World" });
var viewModel = new MyViewModel(model);

kb.applyBindings(viewModel, $("#kb_observable")[0]);

Utile