Understanding type inference

Adding type annotations to our code is extra code we need to write, which consumes a little more of our time and bloats our code. TypeScript has something called type inference, which means, in many cases, it can work out a variable's type without it having a type annotation. In this lesson, we'll learn how and when we can use type inference.

Using type inference on variable declarations

TypeScript will automatically infer the type for a variable if a type annotation hasn't been specified. Let's explore type inference in an exercise.

Open exercise in CodeSandbox

The code in the editor declares a variable and initializes it with the value 10 with no type annotation.

• Hover over the score variable.

TypeScript can automatically infer the type of a variable from the value it is assigned.

Nice!

• Let's try a variable that is assigned to a value of a different type. Copy the code from below and paste it in the code editor:

Copy
let dateOfBirth = new Date(1990, 4, 7);

TypeScript can infer types that don't exist in JavaScript.

Neat!

• Let's try a variable defined with const. Copy the code from below and paste it in the code editor:

Copy
const firstName = "Bob";

TypeScript infers the type of a string constant to the value of the constant rather than the wider string type. This is because a string constant can only be that value. This is called a string literal type.

• Does this apply to all constants, though? Try the code below:

Copy
const age = 31;
const created = new Date(2019, 11, 6);

When a constant is initialized from a primitive type, TypeScript infers it to be a literal type of the specific value assigned. However, when a constant is initialized from a non-primitive type, TypeScript only infers it to be of the same type as assigned.

• What about when the value is assigned from another variable? try the code below:

Copy
const last = "Smith";
const surname = last;

• What if we use let to declare surname? Try the code below:

Copy
const last = "Smith";
let surname = last;

It doesn’t matter whether we assign a variable to another variable or a specific value; TypeScript will still infer the type in the same manner.

• What if a variable is assigned to an expression? Try the following:

Copy
const first = "Bob";
const last = "Smith";
const fullName = `${first} ${last}`;

TypeScript doesn't execute our code during the type checking process, so it doesn't know the resulting value of an expression - it just knows the type of the resulting value.

• What if we don't assign any value to a variable when it is declared? Try the following:

Copy
let counter;
counter = 10;

If there is no assignment in a variable declaration, then TypeScript infers the variable to be of type any. any is the broadest type in TypeScript's type system, and we'll learn more about it later in this course.

Now that we have a good understanding of how TypeScript can infer the types of variables. Let's turn our attention to functions in the next section.

Using type inference with functions

Type inference happens on functions as well. Let's carry out the following steps to explore type inference with functions.

• Copy and paste the code below into the code editor we used for the last section:

Copy
function add(a: number, b: number) {
  return a + b;
}
const ten = add(5, 5);

TypeScript can infer the return type of a function. TypeScript also infers the type of a variable in a declaration where the assignment is from a function.

Cool!

• What if we don't have type annotations on the function parameters? Try the following example:

Copy
function addTen(a) {
  return a + 10;
}
const fourteen = addTen(4);

TypeScripts inference breaks down on functions when no type annotations are defined on their parameters.

• What if the function parameter has a default value? Try the following example:

Copy
function addTen(a = 1) {
  return a + 10;
}
const fourteen = addTen(4);

TypeScript can infer the type of a function parameter if it has a default value.

So, it is best practice to include type annotations for function parameters if they don't have default values.

Summary

TypeScript’s smart type inference can save us time and arguably make our code more readable by not having type annotations for every declaration.

If we don’t specify a type annotation, TypeScript will infer the type from the value assignment. It is essential to be aware of this and check that the inferred type is as required.

Next up is a quiz on what we have learned in this module.