Array Type Inference in TypeScript

Learn via video courses
Topics Covered

Overview

We know that typescript is a typed language. By the word type inference, we mean when the type is not explicitly declared by the user, and the typescript itself has to infer the type on its own. Type inference is very helpful in type checking when there are is no explicit type annotation available in typescript. Typescript has the ability to infer types as soon as we declare the variable and assign the data type of the variable.

What Is Array Type in TypeScript?

The array is a special data type in typescript that is used to store multiple values of different data types sequentially using a special syntax. We can access the array members by using the indexes of the array. Now let's see the ways of typing an array in typescript:

  1. By using the square brackets:

In the following code, the array literal type is string[].

  1. By using the generic type ( that is by using the angular brackets):

Using any of the methods will result to produce the same output.

What are Typescript Inferences?

Typescript is a typed language but it is not always compulsory to declare the types explicitly the compiler can also infer the type on its own when necessary. It is best useful when there is no explicit type annotation available.

Let us understand this with the help of an example:

Output

In the above example, we have printed the type of the variable a without explicitly declaring it as the number, and still while printing the data type of the variable it is showing as a number because typescript has inferred the type of the variable on its own. Run the above code in your editor for a better and clear explanation.

When are Types Inferred by the Typescript Compiler?

Let us read about the conditions when typescript infers the type information are as follows:

  1. The variables and members are initialized
  2. When the values are set as default for parameters
  3. When the function types are determined In most cases, the type of inference is straightforward.

Why Inferring Types of Arrays is Difficult?

We know that arrays in Typescript have two roles they are namely the list and the tuples, this is why it is impossible for TypeScript to always guess the correct return type. Now let us see with the help of an example the best type for fields.

These all are the best cases for the best type of fields. Run the above code in your editor for a better and clear explanation. Now we will read about some examples of array literals and inference in typescript with the help of examples:

Type Inference for Non-Empty Array Literals

When the array list is non-empty, in this case, typescript has its default nature to infer the array list. Let us see this with the help of an example:

In this, the inferred type will be boolean | string that is it returns a union inferred type. Now let's see another example:

In the above code, the inferred type of arr1 is number, while in the last line calc(arr1) it will give an error Argument of type 'number[]' is not assignable to parameter of type '[number, number]'. [...], To override this problem we can use the code below:

We can add the type annotation to the const keyword before the declaration to override this problem because it avoids type inference. Run the above code in your editor for a better and clear explanation.

Type Inference for Empty Array Literals

When the array is declared with no values that are it remains empty, in this case, the typescript infers the value of the variable as any. Now let's see an example:

Here in this example, we have created an empty array named arr_1, since the array is empty so the array is not fixed and we can insert values in it so we have inserted three values in it one is a number and the other two are of string type so the inferred type will be a union type which is [number,string].

We can also write the above code as

By writing like this will also there will be no changes in the code. Let's see another example:

Here it will show an error when we will add elements because if the array is empty then only we can add elements otherwise the array is said to be fixed. Run the above code in your editor for a better and clear explanation.

Const Assertions for Arrays and Type Inference

We can suffix the array if we wish by using the const assertion in typescript. Let's see a few examples to understand this:

Here since we have declared swag_1 using the const so it becomes only read-only and it won't change:

Explanation:

In this code, it will show an error because since the array was read-only (as elements were inserted in it from the start) so we cannot insert any element in it. TypeScript infers the literal types more instead of the general types. That is, the inferred tuple type is not [string, string, string]. Run the above code in your editor for a better and clear explanation.

Conclusion

  • Whenever we access that is an array element via each index, TypeScript always assumes that the index is within range.
  • Type inference in typescript is helpful in type checking when there are no explicit type annotation is available.
  • It is not compulsory to always explicitly declare the type typescript can infer the type on its own if it is not mentioned.
  • In typescript type inference there may arise a situation when an object may be initialized with multiple types.
  • Type inference means the automatic detection of the type of an expression in a formal language.