At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

Type Inference in TypeScript and Its Best Practices

  • By Vignesh M
  • January 22, 2020
  • 2649 Views

Typescript is one of the rapidly growing languages, it is a superset of Javascript which gives us the power of strict typing for Javascript. It helps a developer to easily identify issues that can otherwise only be found in certain critical scenarios.
Typescript is very powerful and flexible when you compare it with other strictly typed languages. Type Inference is one of the features that gives great power and flexibility to typescript.

How types are associated with a variable

In TypeScript, you can set the type of a variable in two different types. They are,

1. Explicit

This is when you define a type of a variable explicitly while creating the variable.

let name: string;
let age: number;

2. Implicit

This is when you don’t mention a type explicitly and typescript tries to infer the type from the value you assigned to the variable.

let name = 'Agira'; // infers type as string because the value is string
let age;
age = 4; // infers type as number because the assigned value is a number

What is Type Inference?

When there is no explicit type that is annotated to a variable typescript, the compiler tries to infer its type from the value or from the usage of the variable. This is known as type inference. Type inference takes place when initializing variables, class members, setting a default value to parameters, and function return types.

How types are inferred in different cases

We have already seen how types are inferred for assignments. Therefore, we’ll see a few other cases and how types are inferred in that case. Function parameters and return types work similarly to the assignments.

Expressions

When the value of a variable is derived from expression, the type is inferred from the result of that expression when it is executed.

let number1 = 100;
let number2 = 10;
let number3 = number1 + number2; // this is a number type as result will be a number

Objects

Objects are complex data types by nature. So, it is a little different than how other values are treated. For instance, the object will not be inferred to a common type. But, each property in the object will be typed according to their values.

let company = {
  name: "Agira",
  year: 4
};
Employee.year = "Technologies"; // Error "'Technologies'" is not assignable to type 'number';

In the above code block, the name property will be of string and the year will be of number type respective to their values.

ALSO READ: Functional Programming in Typescript

Arrays

The array is another interesting data type that infers the type from the assigned values.

let employees = ['Sundar', 'Pichai, 'Sathya']; // type is a string[];
Employees[0] = null; // resulting type error

But what if an array has a few different types of elements in it? How does the typescript compiler know which data type the array belongs to? So, it enters the best common type.

Best Common Type

When a variable consists of different types of elements, the typescript compiler tries to calculate the best common type for that variable based on the different values.

let elem = [0, 1, 'Hello']; // the best common type is string | number
Elem[3] = ‘World’; // works fine
Elem[3] = null; //type Error

In the above code block, the best common type is calculated from the values in that array. So, trying to assign any other type to that will result in a type error. This is helpful when you are working with complex data types such as arrays or objects where different types of elements are not rare.
Is there a case when the typescript compiler can not arrive at a common type or can’t figure out a type from its value?
Yes, that’s where ImplicityAny comes in.

ImplicitAny

When typescript can’t calculate the type of a variable, it silently assigns “any” as the type to it. A good example of this is,

function sum(x, y) {
return x+y;
}

Typescript can’t figure out whether the arguments will be numbers or strings as + is a valid operation on both. In that case, it’ll just assign “any” to both the arguments and to the return type of this function. But, using “any” as the type is as good as not using typescript at all. So, it is not what we want to happen in most cases.
We can stop typescript from doing this and throw an error when it can’t figure out the type on its own. In your tsconfig.json file, there is an option that lets you tweak to control this behaviour. It is noImplicitAny: true. If you set this in your config file, typescript will not assign “any” when it can’t figure out the type of a variable.
This is how type inference works in typescript. You can use this to your advantage and assign types only when it is necessary. Let the typescript compiler do the heavy lifting for you. But for me, I would rather choose to define the type of each variable on my own because I always like to keep my codebase uniform across different areas.
Get in touch with Agira technologies to hire the best web developers in the industry for building a state-of-the-art web and mobile applications for your business.

Looking for a Tech partner to dominate the digital world?

Vignesh M

An energetic Fullstack developer/Tech Lead and has a strong desire in Programming. With 6.5 years of experience in Angular, Javascript, Laravel PHP, Ionic, and Flutter, he always strives to come up with Smart Solutions to accomplish complex tasks.He is also interested in Video games, Motorcycles, Books, Movies, History.