CODEWITHSUNDEEP
javascriptrequirejstypescript
tune2fs
tune2fs

Reputation: 7705

How to import a js library without definition file in typescript file

I want to switch from JavaScript to TypeScript to help with code management as our project gets larger. We utilize, however, lots of libraries as amd Modules, which we do not want to convert to TypeScript.

We still want to import them into TypeScript files, but we also do not want to generate definition files. How can we achieve that?

e.g. The new Typescript file:

/// <reference path="../../../../definetelyTyped/jquery.d.ts" />
/// <reference path="../../../../definetelyTyped/require.d.ts" />
import $ = require('jquery');
import alert = require('lib/errorInfoHandler');

Here, lib/errorInfoHandler is an amd module included in a huge JavaScript library that we do not want to touch.

Using the above code produces the following errors:

Unable to resolve external module ''lib/errorInfoHandler'' 
Module cannot be aliased to a non-module type.

This should actually produce the following code:

define(["require", "exports", "jquery", "lib/errorInfoHandler"], function(require, exports, $, alert) {
...

}

Is there a way to import a JavaScript library into TypeScript as an amd Module and use it inside the TypeScript file without making a definition file?

Upvotes: 68

Views: 59980

Answers (6)

morteza deris
morteza deris

Reputation: 29

how about trying to ignore the typescript error like this

// @ts-ignore
import alert = require('lib/errorInfoHandler');

Upvotes: 1

i.brod
i.brod

Reputation: 4603

Ran into that that problem in 2020, and found an easy solution:

  1. Create a decs.d.ts file in the root of your TS project.

  2. Place this declaration:

    declare module 'lib/errorInfoHandler';

This eliminates the error in my case. I'm using TypeScript 3.9.7

Upvotes: 0

Aditya Kresna Permana
Aditya Kresna Permana

Reputation: 12099

Typically if you just want to need a temporary-faster-solution, that could be done by defining a new index.d.ts in the root of the project folder, then make a module name like described inside package.json file

for example 

// somefile.ts
import Foo from '@awesome/my-module'

// index.d.ts on @awesome/my-module
declare module '@awesome/my-module' {
  const bind: any;
  export default bind;
}

Upvotes: 0

Pure Function
Pure Function

Reputation: 2147

A combination of the 2 answers given here worked for me.

//errorInfoHandler.d.ts
declare module "lib/errorInfoHandler" {
   var noTypeInfoYet: any; // any var name here really
   export = noTypeInfoYet;
}

I'm still new to TypeScript but it looks as if this is just a way to tell TypeScript to leave off by exporting a dummy variable with no type information on it.

EDIT

It has been noted in the comments for this answer that you can achieve the same result by simply declaring:

//errorInfoHandler.d.ts
declare module "*";

See the github comment here.

Upvotes: 33

thomaux
thomaux

Reputation: 19708

Either create your own definition file with following content:

declare module "lib/errorInfoHandler" {}

And reference this file where you want to use the import.

Or add the following line to the top of your file:

/// <amd-dependency path="lib/errorInfoHandler">

Note: I do not know if the latter still works, it's how I initially worked with missing AMD dependencies. Please also note that with this approach you will not have IntelliSense for that file.

Upvotes: 5

Ryan Cavanaugh
Ryan Cavanaugh

Reputation: 220884

Create a file in lib called errorInfoHandler.d.ts. There, write:

var noTypeInfoYet: any; // any var name here really
export = noTypeInfoYet;

Now the alert import will succeed and be of type any.

Upvotes: 2

Related Questions