Integration with JavaScript

One of the most appealing facets of JavaScript development is the wealth of external JavaScript libraries that have already been published, are tried and tested, and are available for re-use. Libraries such as jQuery, Underscore, Backbone, and Moment have been around for years, are well documented, and can be used to enhance the JavaScript development experience. As we know, TypeScript generates JavaScript, so we can easily use these libraries and frameworks in TypeScript.

JavaScript is also valid TypeScript, and we can even rename a standard JavaScript file to a TypeScript file just by changing the .js file extension to a .ts file extension, if we were converting existing JavaScript files to TypeScript. Remember that the strict typing syntax that is used in TypeScript is entirely optional, and we can therefore slowly start to introduce types into a renamed file. The strict typing syntax is also known as syntactic sugar, which can be sprinkled on top...

Declaration files

A declaration file is a special type of file used by the TypeScript compiler. It is only used during the compilation step and is used as a sort of reference file to describe JavaScript. Declaration files are similar to the header files used in C or C++ or the interfaces used in Java. They simply describe the structure of available functions and properties but do not provide an implementation. In this section of the chapter, we will take a look at these declaration files, what they are, and how to write them.

Global variables

Most modern websites use some sort of server engine to generate the HTML pages that we use. If you are familiar with the Microsoft stack of technologies, then you will know that ASP.NET MVC is a very popular server-side rendering engine. If you are a Node developer, then you may be using one of the popular Node packages to help construct web pages through templates, such as Jade, Handlebars, or Embedded JavaScript (EJS).

Within these...

Declaration file typing

As we have seen, declaration files use the declare and module keywords to define objects and namespaces. We have also seen that we can use interfaces in the same way that we do within TypeScript, in order to define custom types for variables. Declaration files allow us to use the same syntax that we would in TypeScript to describe types. These types can be used everywhere types are used in normal TypeScript, including function overloading, type unions, classes, and optional properties. Let's take a quick look at these techniques, with a few simple code samples, to illustrate this feature further. This section will cover:

• Function overloading
• Nested namespaces
• Classes
• Static properties and functions
• Abstract classes
• Generics
• Conditional types and inference

We'll begin by taking a look at function overloading.

Function overloading

Declaration files allow for function overloads, where the...

Integration compiler options

There are a few compiler options that we can configure in order to help with the integration of JavaScript and TypeScript. These options will allow us to include JavaScript files within the same project as TypeScript files, as well as allowing us to do some type checking on JavaScript files. We are also able to generate declaration files from our TypeScript code, if we are building libraries for general consumption. In this section of the chapter, we will explore these compiler options.

The allowJs and outDir options

The default TypeScript compilation configuration, as seen in the tsconfig.json file, will generate JavaScript files in the same directory as the source TypeScript files. The outDir compilation option is used to specify a different output directory for the generated JavaScript, as follows:

{
    "compilerOptions": {
        "target": "es5", 
        "module": "commonjs", 
      ...

Summary

In this chapter, we explored the integration points that TypeScript allows when using JavaScript. We discussed how to use external JavaScript libraries or external JavaScript code within TypeScript code through the use of declaration files. We then built a declaration file from some JavaScript and learned how to describe the JavaScript types correctly for use within TypeScript. We then had a quick overview of how types are described in declaration files, and found that almost every language construct and keyword in the TypeScript language can be used within a declaration file. Finally, we took a look at how we can use some compiler options to allow both JavaScript and TypeScript files within the same project, and how TypeScript can generate declaration files for us.

In the next chapter, we will take a look at the strict compiler options that are made available to us, and how these can be used to check for potential errors within our code.