Bits and Bytes: Adding TypeScript Support to an Existing Project

Sign in to queue

Description

In the previous Bits and Bytes, we looked at Getting Started with TypeScriptnow we will see how we can add TypeScript support to existing projects.

Similar to getting up and running we are going to need to make sure Node.js and our TypeScript compiler is installed. Once that is complete we can add a tsconfig.json file to support our compiler options. For info on getting up and running check out Getting Started with TypeScript.

Once we have TypeScript support we can code away within our project. But most developers have third party JavaScript libraries to help with their website development. From jQuery support to full single page applications using React or Angular. In any of the cases, you still can create custom TypeScript libraries but the interaction with the third party libraries will be limited.

Here is how you can fix that.

Typings

In order for TypeScript to perform the type checking, the types of these libraries need to be defined somewhere. This is where type definition files help. They provide the compiler a definition file of the JavaScript code that is not typed a "definition" of how it should be. We can add each definition file in the typings directory under a library of choice (ie angular, jquery..etc.). and the file extension for such a file is .d.ts, where d stands for definition.

So where can we get these files? DefinitelyTyped.org or theGitHub repository. There are 1000's of libraries out there and documentation on how you can create your own.

Once you find your .d.ts file, add it to your project and you should be able to enjoy the benefits from TypeScript from autocompletion, to syntax errors to member documentation.

Try it out and let me know what you think.

Tag:

TypeScript

Embed

Download

The Discussion

  • User profile image
    Robert

    Joshua, I can't believe how you were adding TypeScript declaration files to the project. It would have been better to point out how to use the NPM module tsd Install tsd:
    `npm install -g tsd`

    Then you just cd to the project directory and run:
    `tsd angular`

    This pulls down the TypeScript declaration file directly form the DefintelyTyped Github repository. It also pulls down any dependency declaration files as well.

  • User profile image
    jdruid

    Great comment! I was trying to show the typescript definition for all of the different libraries. I will be sure to add that to my blog post and another video.

    Here is a link to the tsd that was mentioned above for all interested: http://definitelytyped.org/tsd/ most libraries are there.

  • User profile image
    Laurent​Duveau

    Using VS Code you can also just click on the light-bulb (while typing angular.??) to automatically get the typing file.

Add Your 2 Cents