4

I am new to typeScript and I want to be able to use a 3rd party library that does not have definition file. Does typescript allow you to use the external libraries?

The library i am trying to use is filesaver.js https://github.com/eligrey/FileSaver.js/

Do I need to create a definition file for this library?

I just need someone to point me in the right direction.

thanks so much!

1
  • On this documentation of typescript you can check on the section named "Working with Other JavaScript Libraries" To find the solution you seek. Hope this helps. Commented Oct 2, 2014 at 11:46

3 Answers 3

11

Does typescript allow you to use the external libraries?

Very easily. You just need to tell typescript about it. lets look at your case.

The library i am trying to use is filesaver.js

Simple just one function saveAs. The simplest declaration:

declare var saveAs:any; 

and now the following will compile just fine:

declare var saveAs:any; 
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

To write more advanced declrations take a look at: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/declaration%20files/Introduction.md

Note

A more exact but possibly overly restrictive sample :

declare function saveAs(data:Blob , filename:string );
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
Sign up to request clarification or add additional context in comments.

Comments

1

Another way to call external libraries in typescript without compiling error is to use the window"myglobalfunction" notation.

For example:

jQuery call: window["$"]
fileSaver.js : window["saveAs"](blob, "hello world.txt");

etc...

These calls inside typescript don't generate compilation errors, but they are full functioning ways to call the same standard functions.

2 Comments

WARNING: This type of notation should never ever be used in TS as any compiler that either does tree shanking or uglify of code will rename and thus change the name of the function causing such code to fail as the string will not be updated to reflect the uglified function name.
Good point, this code works only on plain code, not on obfuscated code.
0

Out of the pragmatic but perhaps not quite kosher categoy, a less elegant and non-TypeScript approach would be to simply declare but not assign the variable/function you want to use with TypeScript. This does not give you Intellisense, but it does allow you to very quickly use the library without creating any declarations or roll your own d.ts file.

For instance, here's an Angular example to provide OidcTokenManager as a constant on an app.core module:

((): void => {
    angular
        .module('app.core')
        .constant('OidcTokenManager', OidcTokenManager);

})();

This will generate a TS2304 - Cannot find name 'OidcTokenManager' TypeScript error.

However, by simply declaring OidcTokenManager as of type any, TypeScript will let you pass:

((): void => {    
    let OidcTokenManager: any;   

    angular
        .module('app.core')
        .constant('OidcTokenManager', OidcTokenManager);

})();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.