Is it possible for Typescript to utilize Webpack's UMD feature for importing

Question

Is it possible for Typescript to utilize Webpack's UMD feature for importing

Is there a method in TypeScript to import a module wrapped by webpack UMD (Universal Module Definition)? For instance:

npm install knockback

The file .js (

node_modules/knockback/knockback.js

) starts 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 attempting to import this into a .ts file, tsc gives an error:

import * as k from 'knockback/knockback';

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

Are there any alternatives besides modifying the knockback.js file to make tsc recognize and import this .js? My Typescript version is 1.8.

typescript webpack knockback.js

Answer 1

Answer №1

Whenever I attempt to import this into a .ts file, tsc throws an error:

A simple solution is to utilize a type definition file

such as knockback.d.ts

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

Answer 2

Whenever I attempt to import this into a .ts file, tsc throws an error:

A simple solution is to utilize a type definition file

such as knockback.d.ts

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

Answer 3

Answer №2

Just a heads up, for those who find themselves here attempting to utilize knockback.js with Typescript, there is an existing knockback.d.ts file accessible from DefinitelyTyped. However, the current .d.ts file does not have an export, making it incompatible with external modules. Following the advice from basarat's response, I made adjustments to the .d.ts file as outlined below:

1) Add the following to the end:

declare module "knockback" {
    export = Knockback;
}

2) Eliminate declare var kb: Knockback.Static at the end.

3) Remove the interface Static extends Utils { wrapper and relocate all contents within the Static interface to namespace scope. For 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>;
...

With these modifications, usage will resemble the following:

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

Answer 4

Just a heads up, for those who find themselves here attempting to utilize knockback.js with Typescript, there is an existing knockback.d.ts file accessible from DefinitelyTyped. However, the current .d.ts file does not have an export, making it incompatible with external modules. Following the advice from basarat's response, I made adjustments to the .d.ts file as outlined below:

1) Add the following to the end:

declare module "knockback" {
    export = Knockback;
}

2) Eliminate declare var kb: Knockback.Static at the end.

3) Remove the interface Static extends Utils { wrapper and relocate all contents within the Static interface to namespace scope. For 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>;
...

With these modifications, usage will resemble the following:

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

Is it possible for Typescript to utilize Webpack's UMD feature for importing

Answer №1

Answer №2

Old:

New:

Similar questions

The test function is not recognized by Cordova when the device is ready

What is the subclass of all object literal types in TypeScript?

Error: Unable to locate metadata for the entity "BusinessApplication"

Is there a way to ensure my react app remains operational despite the presence of lint errors?

Storing redux dispatch action using the useRef hook in Typescript

Refreshing Angular 9 component elements when data is updated

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

Having trouble converting the JSON object received from the server into the necessary type to analyze the data

What is the process for using infer to determine the return type of a void function?

Angular 4 and the process of HTML encoding

Handling HTTP errors in Angular when receiving a JSON response

What is the best way to incorporate a TypeScript function within a JQuery function?

Can you explain the purpose of this TypeScript code snippet? It declares a variable testOptions that can only be assigned one of the values "Undecided," "Yes," or "No," with a default value of "Undecided."

What is the reason for the lack of overlap between types in an enum?

Utilizing data from the home component in another component: A guide

A guide to implementing unit tests for Angular directives with the Jest testing framework

Exporting a constant as a default in TypeScript

The name 'console' could not be located

Fix the TypeScript issue encountered during a CDK upgrade process

When the button is clicked, a fresh row will be added to the table and filled with data