In this section, we will cover type inference in TypeScript. Namely, we’ll discuss where and how types are inferred.
\nIn TypeScript, there are several places where type inference is used to provide type information when there is no explicit type annotation. For example, in this code
\n\ntslet x = 3;
The type of the x variable is inferred to be number.\nThis kind of inference takes place when initializing variables and members, setting parameter default values, and determining function return types.
In most cases, type inference is straightforward.\nIn the following sections, we’ll explore some of the nuances in how types are inferred.
\nWhen a type inference is made from several expressions, the types of those expressions are used to calculate a “best common type”. For example,
\n\ntslet x = [0, 1, null];
To infer the type of x in the example above, we must consider the type of each array element.\nHere we are given two choices for the type of the array: number and null.\nThe best common type algorithm considers each candidate type, and picks the type that is compatible with all the other candidates.
Because the best common type has to be chosen from the provided candidate types, there are some cases where types share a common structure, but no one type is the super type of all candidate types. For example:
\n\ntslet zoo = [new Rhino(), new Elephant(), new Snake()];
Ideally, we may want zoo to be inferred as an Animal[], but because there is no object that is strictly of type Animal in the array, we make no inference about the array element type.\nTo correct this, instead explicitly provide the type when no one type is a super type of all other candidates:
\ntslet zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];
When no best common type is found, the resulting inference is the union array type, (Rhino | Elephant | Snake)[].
Type inference also works in “the other direction” in some cases in TypeScript.\nThis is known as “contextual typing”. Contextual typing occurs when the type of an expression is implied by its location. For example:
\n\ntswindow.onmousedown = function(mouseEvent) {\n console.log(mouseEvent.button); //<- OK\n console.log(mouseEvent.kangaroo); //<- Error!\n};
Here, the TypeScript type checker used the type of the Window.onmousedown function to infer the type of the function expression on the right hand side of the assignment.\nWhen it did so, it was able to infer the type of the mouseEvent parameter, which does contain a button property, but not a kangaroo property.
TypeScript is smart enough to infer types in other contexts as well:
\n\ntswindow.onscroll = function(uiEvent) {\n console.log(uiEvent.button); //<- Error!\n};
Based on the fact that the above function is being assigned to Window.onscroll, TypeScript knows that uiEvent is a UIEvent, and not a MouseEvent like the previous example. UIEvent objects contain no button property, and so TypeScript will throw an error.
If this function were not in a contextually typed position, the function’s argument would implicitly have type any, and no error would be issued (unless you are using the --noImplicitAny option):
\ntsconst handler = function(uiEvent) {\n console.log(uiEvent.button); //<- OK\n};
We can also explicitly give type information to the function’s argument to override any contextual type:
\n\ntswindow.onscroll = function(uiEvent: any) {\n console.log(uiEvent.button); //<- Now, no error is given\n};
However, this code will log undefined, since uiEvent has no property called button.
Contextual typing applies in many cases.\nCommon cases include arguments to function calls, right hand sides of assignments, type assertions, members of object and array literals, and return statements.\nThe contextual type also acts as a candidate type in best common type. For example:
\n\ntsfunction createZoo(): Animal[] {\n return [new Rhino(), new Elephant(), new Snake()];\n}
In this example, best common type has a set of four candidates: Animal, Rhino, Elephant, and Snake.\nOf these, Animal can be chosen by the best common type algorithm.