Learn TypeScript

Understanding type inference

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.

TypeScriptOpen 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.
πŸ€”

What has TypeScript inferred the type of score to be?

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:
let dateOfBirth = new Date(1990, 4, 7);
πŸ€”

What has TypeScript inferred the type of dateOfBirth to be?

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:
const firstName = "Bob";
πŸ€”

What is the type of firstName? Surely it is string?

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:
const age = 31;
const created = new Date(2019, 11, 6);
πŸ€”

What are the types of age and created?

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:
const last = "Smith";
const surname = last;
πŸ€”

What do you think TypeScript has inferred the type of surname to be?

  • What if we use let to declare surname? Try the code below:
const last = "Smith";
let surname = last;
πŸ€”

What is the type of surname now?

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:
const first = "Bob";
const last = "Smith";
const fullName = `${first} ${last}`;
πŸ€”

What is the type of fullName?

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:
let counter;
counter = 10;
πŸ€”

What is the type of counter in the above example?

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:
function add(a: number, b: number) {
return a + b;
}
const ten = add(5, 5);
πŸ€”

What is the return type of the add function? Also, what is the type of the ten variable?

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:
function addTen(a) {
return a + 10;
}
const fourteen = addTen(4);
πŸ€”

What is the type of the a parameter? What is the return type of addTen? What about the type of fourteen?

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:
function addTen(a = 1) {
return a + 10;
}
const fourteen = addTen(4);
πŸ€”

What are the types now?

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.

Did you find this lesson useful?

Share this lesson on twitter
Β© 2020 Carl Rippon
Privacy Policy
This site uses cookies. Click here to find out more