Search code examples
requirejstypescriptamd

Using non-modular scripts in Typescript


I'm using Typescript AMD and Requirejs in Visual Studio 2013 and I want to use a non-modular script in my Typescript class. How can I achieve this:

define(["require", "exports", 'slickgrid'], function(require, exports, slickgrid){
    ...
});

I can't use the following syntax:

import slickgrid = require('slickgrid');
export class myClass {
    ...
}

When I do I get 2 errors

Unable to resolve external module '"slickgrid"
Module cannot be aliased to a non-module type.

Config looks like this

require.config({
    baseUrl: 'scripts',
    paths: {
        jquery: 'jquery-1.10.2',
        jqueryui: 'jquery-ui-1.10.4',
        dragevent: 'jquery.event.drag',
        slickcore: 'SlickGrid/slick.core',
        slickgrid: 'SlickGrid/slick.grid',
    },
    shim: {
        jquery: { exports: '$' },
        jqueryui: ['jquery'],
        dragevent: ['jquery'],
        slickcore: ['jqueryui'],
        slickgrid: {
            deps: ['slickcore', 'dragevent'],
            exports: 'Slick'
        },
    }
});

Solution

  • Use this definition file : https://github.com/borisyankov/DefinitelyTyped/blob/master/slickgrid/SlickGrid.d.ts

    And add the following in some .d.ts file to tell typescript about your requirejs config:

    declare module 'slickgrid'{
        export = Slick 
    }
    

    This will allow you to do:

    import slickgrid = require('slickgrid');