What are Typings in Typescript

Question

I am new to Angular2 and I'm enjoying it so far but there is one problem: Typings. I can't figure out how to use them and what exactly they are. Some places say to use typings, others say to use npm to install definitions.

I'm confused!!

Answer 1

JavaScript is untyped, meaning that we can pass around and use data, objects and functions with no constraints. We can write code that calls methods that don't exist on an object, or reference variables that we don't have. These kinds of mistakes can be hard to discover when you are writing code, and it can lead to unstable and buggy code. Doing big changes of your code can become difficult and risky as you don't immediately see if some changes conflicts with the rest of the code somewhere else.

TypeScript is mainly about adding types to JavaScript. That means that TypeScript requires you to accurately describe the format of your objects and your data. When you do that, that means that the compiler can investigate your code and discover errors. It can see that you are trying to call a function with the wrong kinds of arguments, or reference a variable that is not accessible in the current scope.

When you write TypeScript yourself, this formal description of the code is part of the code itself.

However, when you use external libraries like jQuery or moment.js, there are no information of the types in that code. So in order to use it with TypeScript, you also have to get files that describe the types of that code. These are the type declaration files, most often with the file extension name .d.ts. Fortunately people have written those kinds of type declaration files for most common javascript libraries out there.

Typings was just a tool to install those files. It is now best practice to just use npm.

When you have installed those files, which basically only means downloading them and placing them in your project, the TypeScript compiler will understand* that external code and you will be able to use those libraries. Otherwise you would only get errors everywhere.

_{* Depending on how you have set up your project and configured it, you might have to configure typescript to look for those files specifically, or it might just work without any configuration from your part.}

Answer 2

What are typings?

In short, TypeScript adds static typing to JavaScript. Since JavaScript alone does not define such type definitions, they must be written and included in the TypeScript compilation process through additional mechanisms. In other words, a JavaScript library may define a function:

export function createPerson(name, age, initScore) { ... }  

But in the statically typed environment of TypeScript, it would be much more useful for the developer to have something like this:

interface Person {
    name: string,
    age: number,
    score: number
}

export function createPerson(name: string, age: number, initScore?: number): Person;

The purpose of type declarations, often called typings, type definitions or just types, is to fill in these details over implementations, thus identifying API misuses even across libraries. They usually reside in files with the .d.ts extension, and can be built from .ts files using the compiler. When programs were not written in TypeScript however, these declarations are usually written manually.

---

With that said, your confusion is somewhat justified: more than one approach to installing and managing TypeScript declarations were made over time. Right now however, there is an official (and therefore recommended) means of installing and using declaration files, and it's documented here:

In TypeScript 2.0, it has become significantly easier to consume declaration files, in acquiring, using, and finding them. This page details exactly how to do all three

[...]

Getting type declarations in TypeScript 2.0 and above requires no tools apart from npm.

As an example, retrieving declarations for Angular is as simple as installing this dependency in your project:

npm install --save @types/angular 

Packages in the @types namespace will be automatically considered by the compiler for retrieving type declarations. Furthermore, if these declarations are already embedded in the npm package, you don't have to do anything else other than installing that package (an example of such a package is redux). For more information, see the docs on tsconfig.json. There is also a whole section about authoring your own declaration files, which is a recommended read to all developers wishing to add type declarations to their own libraries.

Answer 3

I will try to explain it with simple example. If you are using third party libraries like jQuery in Angular or typescript projects

You can directly refer jquery file(angular.json file) in Angular projects and write the code by declaring $ or jQuery as shown below

as shown below

declare var $: any;
ngOnInit() {
   $(document).ready(function() {
     alert('I am Called From jQuery');
   });
}

The code will work. But the problem is typescript is all about type checking and discover errors in code at the time of compilation only.

As typescript does not know anything about jquery library it cannot perform static type checking. the below code compile without any errors

ngOnInit() {
   $(document).ready(function() {
     $('#my-button').click(1);
 });
}

I am passing wrong parameter to click function of jquery and the above code will compile and at run time whenever we click on button element it will throw an error.

Thats where typings comes into picture. But if you have type definations for jquery plug in those kind of error can be caught at the time of compilation only.

Install jquery typings from node packages and refere it in code

npm install --save jquery
npm install --save @types/jquery

And import jquery object in the code as shown below

import * as $ from 'jquery';

And now the above code wont compile and throws error saying

Argument of type ‘1’ is not assignable to parameter of type ‘false | EventHandlerBase<HTMLElement, ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>>’

You can read more at How To Install And Use JQuery In Angular Projects

Answer 4

I've only worked with TypeScript in an ASP.NET (classic) project, so I can't tell you what the typical way to do this is. But there are a couple of somewhat unorthodox options:

• Find the *.d.ts files yourself and just copy them into your project somewhere. They won't auto-update along with your libraries, though.
• Declare whatever the library gives you as any. For example, you could do this for JQuery, if you don't have JQuery typings installed yet: declare var $: any;