Quick Tip – TypeScript Declare Keyword

July 22, 2013

7 comments

Quick Tip – TypeScript Declare Keyword

Quick Tip – TypeScript Declare KeywordLast week, Yaniv Rodenski and I delivered a TypeScript session in WDC.IL user group. One of the things we showed during the session was the declare keyword. In this short quick tip, I’ll describe what is this keyword and where to use it.

If It Doesn’t Exists, Declare It

Not all JavaScript libraries/frameworks have TypeScript declaration files. On the other hand, we might want to use libraries/frameworks in our TypeScript files without getting compilation errors. What can we do?
One solution is to use the declare keyword. The declare keyword is used for ambient declarations where you want to define a variable that may not have originated from a TypeScript file.

For example, lets imagine that we have a library called myLibrary that doesn’t have a TypeScript declaration file and have a namespace called myLibrary in the global namespace. If you want to use that library in your TypeScript code, you can use the following code:

declare var myLibrary;

The type that the TypeScript runtime will give to myLibrary variable is the any type. The problem here is that you won’t have Intellisense for that variable in design time but you will be able to use the library in your code. Another option to have the same behavior without using the declare keyword is just using a variable with the any type:

var myLibrary: any;

Both of the code examples will result in the same JavaScript output but the declare example is more readable and expresses an ambient declaration.

Summary

The TypeScript declare keyword is used to declare variables that may not have originated from a TypeScript file.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

7 comments

  1. iraJanuary 4, 2014 ב 12:41

    Hi
    I tried the same and I am still getting compilation error
    I had some code like this in the ts file
    var define:any;

    // Durandal 2.x assumes no global libraries. It will ship expecting
    // Knockout and jQuery to be defined with requirejs. .NET
    // templates by default will set them up as standard script
    // libs and then register them with require as follows:
    define(‘jquery’, function () { return jQuery; });
    define(‘knockout’, ko);

    define([‘durandal/app’, ‘durandal/viewLocator’, ‘durandal/system’, ‘plugins/router’, ‘services/logger’], boot);

    I am getting this error
    Subsequent variable declarations must have the same type. Variable ‘define’ must be of type ‘RequireDefine’, but here has type ‘any’

    Can you please tell me what I am doing wrong here
    Thanks
    Ira

    Reply
    1. Gil Fink
      Gil FinkJanuary 5, 2014 ב 21:18

      Hi Ira,

      Try to change the var define: any; to var define: RequireDefine;.

      Gil

      Reply
      1. iraJanuary 5, 2014 ב 23:35

        Hi Gil
        I did as you suggested changed to
        var define: RequireDefine;

        then the subsequent statements with define
        define(‘jquery’, function () { return jQuery; });
        define(‘knockout’, ko);

        define([‘durandal/app’, ‘durandal/viewLocator’, ‘durandal/system’, ‘plugins/router’, ‘services/logger’], boot);

        are failing with error
        Supplied parameters do not match any signature of call target:
        Types of property ‘concat’ of types ‘String’ and ‘string[]’ are incompatible:
        Call signatures of types ‘(…strings: string[]) => string’ and ‘{ (…items: U[]): string[]; (…items: string[]): string[]; }’ are incompatible. C:\WebApplications\TestHotTowel\TestHotTowel\App\main.ts 25

        Could not select overload for ‘call’ expression.

        Please help, I am going mad with this.

        Thanks
        Ira

        Reply
        1. Gil Fink
          Gil FinkJanuary 7, 2014 ב 15:29

          Hi Ira,

          I don’t understand what you are trying to do.
          When you use RequireJS, you should separate each define in it’s own file.
          Also, why are you calling define with jQuery and Knockout? if the libraries are configured using requires.config function, you don’t have to define them.
          The error you are getting is created because you are not using the RequireJS API appropriately.
          Please refer to the RequireJS documentation at the library website: requirejs.org

          Best Regards,
          Gil

          Reply
  2. Greg GumDecember 28, 2015 ב 19:28

    declare var myLibrary:any; produces different output than var myLibrary:any;

    The one which uses `declare` actually produces NO output which is what you want when you need to silence the compiler in order to use a library with no type definition file.

    If don’t use `declare` then TS outputs var myLibrary which will overwrite the actual library, which is not what you usually want.

    Reply
    1. DanyloJanuary 31, 2018 ב 18:06

      Is it the expected behaviour?

      Reply
  3. differuiDecember 2, 2016 ב 5:38

    How to share global declare stuff in the project?

    Reply