TypeScript Tutorial: Using Typings (Chapter 9)

TypeScript can understand JavaScript (respectfully) functions as they are with that old reference syntax. But, it really loves the taste of its own flavours. There are many ways you can use a JavaScript library with TypeScript and make it all work, whereas using Typings it makes yours and TypeScripts life really easy. In this chapter we are going to see what are Typings and how they makes the life of developer easy.

A TypeScript Tutorial for beginners on TypeScript

What are Typings?

Just consider Typings as the interface for TypeScript to understand the vast world of JavaScript. A Typings file includes the definition of all the functions in a JavaScript library. In other words it is defnition of a JavaScript Library consumed by the TypeScript compiler and Intellisense so that they know what a function does and what all properties of an object are.

Why Typings?

Take an example of a library, used and known today to almost every web developer … jQuery. That library is pure JavaScript (In our upcoming chapters in practical use of TypeScript, we will be using jQuery too) and exposes a single variable in the global scope ‘$’. This single variable has the definition of all the functions this library supports.

What if in our application written in TypeScript need to use that library? Well, there is no one stopping you to do that. The only caveat here is that your compiler will not know it and will warn you about that. And your IDE will not help you find the available methods in that library. You will be able to still compile and use the output JS in your program as you know that you have included jQuery as a script tag. Let’s build a smaller example. Say you have a JavaScript library which defines a function like below.

File: jsLib.js

function SayHello (name) {
    console.log("Hello! " + name);
}

and we want to use that function in our TypeScript code like this.

File: testTypings.ts

module tester {
    export var useJSFunction = function() {
        SayHello('Mark');
    }
}
tester.useJSFunction();

If you compile the above code you will see that compiler will complain “not able to find the name ‘SayHello'”. If you include these both files in your web page and run, you will be able to see the output without any issue and your application will run just fine.

Now, you may say when the output is there and your application is running the way it should, what else you need?

Using Typings

Probably you are missing the point here … the core USP of TypeScript … definition of types. Means you and compiler knows what the code should look and behave like. So its time to introduce our library’s definition over here.

File: jsLib.d.ts

declare function SayHello(name:string): any;

and reference this file in the testTypings.ts file.

///<reference path="./jsLib.d.ts" />

module tester {
    export var useJSFunction = function() {
        SayHello('Mark');
    }
}
tester.useJSFunction();

By using Typings makes both you and compiler happy, as you know what you are coding and compiler knows what it is compiling. Below screenshot proves this with the intellisense.

All the definition files are saved with a file extension ‘.d.ts’ and by only being there in the TypeScript project environment, they are automatically available for the compiler and intellisense (We still include the reference for the clarity of the developers).

Getting Type Definitions of the External Libraries

Coming back to the jQuery, this is a huge code and there are hundreds of functions over there. Do you need to convert all those jQuery functions into the type definitions?

The Answer is No! … If you are lucky enough or using a popular library in your project, you can get the definition files from internet. There are npm and bower packages and repositories like DefinitelyTyped or typings, which can help you get your hands on the typings of your favorite library. Once you get the typings, its as simple as including that file in your project along with the js library.

Using Typings makes it possible to work with these libraries as if they are available right there in your project, even if you are including them from CDN later at the client side.

There is More

The intention over here is to keep these tutorials simple as much as possible and help you do an easy transition from JavaScript to TypeScript. If you have searched the web, you might have seen the “include” or “require” syntax. Trust me that’s a different level of talk. We will be talking all about those techniques in our upcoming series on Advanced TypeScript.

With this I am concluding this series here on Beginning with TypeScript. I remember that I have told you all about the practical use of TypeScript at the End of this tutorial. I am not ditching that. In the next post we will start building a simple ToDo Application using TypeScript. Here is the sneak peak of the same.

In case you are interested in that, I would recommend you to subscribe to this blog, so that you are notified as soon as this or any new topic is published here. Hope you enjoyed this little tutorial. Please leave your feedback or any queries you have, below in the comments. I will be really happy to help you out with your queries.

Have a nice day and happy learning!

Go to Beginning with TypeScript Tutorial Index page.

YouTube Channel

Hi All,

I am happy to announce that a new youtube channel has been started with the same intention as of this blog … spread technology awareness. The list of all latest videos can be viewed here. Follow me to … “Let Me Make You Think Like Me”

Follow me :

youtubefacebooktwittergoogleplus

Installing Nokia PC Suite on Windows Server 2003

lost this post some how … sorry.