In this article, we will discuss:

  • What are types
  • Two systems to set types in typescript: annotations vs inference
  • Usage of types for primitive values
  • Types with functions: arrow functions, function keyword, anonymous functions
  • Why we should always use annotations to set the return type
  • Types with objects: object destructuring, nested objects

In typescript, any value —anything at all that can be saved to a variable, has a type.

In plain words, we can think of a type as a way to easily refer to the different properties and functions that a value has. When we think of a value having methods, first thing that comes to mind is a class or an object with custom methods in them. But remember, that even primitive types have many built-in methods associated with the type. For example, type of number has toString() method and type of string has charAt() method. When we use proper types for the values, typescript will also check for this built-in methods availability on a certain type.

There are two different systems that are used by typescript to figure out the type of a value, type annotations and type inference, which work side by side.

In essence, when we use type annotations it means that the developer explicitly told the typescript what the type is. On the other hand, type inference means that the typescript “guessed” the type (derived it from the code around the value).


Using types with primitive values

In most cases, it is totally fine to rely on inference system for primitive types. For example, this code will result in the same exact error in both cases:

let apples: number = 5;

let count = 7;
// Type '"plenty"' is not assignable to type 'number'
// Type '"a lot"' is not assignable to type 'number'
apples = 'a lot';
count = 'plenty';

However, there are three cases when we are better off using type annotations and setting the types explicitly. Let’s go over them one by one:

Image for post

Function returns ‘’any” type

The first case is when the function returns type any and we want to clarify it. In this situation JSON.parse returns valid JS from a string. It can be any number of things, depending on the passed string. Here we use type annotation to set explicitly that we expect coords value to be an object with x and y properties; both are a number.

Image for post

Delayed variable initialization

Granted, this is a bit of a strange example; and in reality, we would possibly initialize foundGreen to false or, even better, use includes() array method. However, if for any reason we need to declare a variable before initializing it, we have to use type annotations to specify the type.

Image for post

Type cannot be reasonably inferred

In this example, we want to have a variable with a positive number or false . If we intend for a variable to change type — we have to specify all of the possible types ahead of time.

To sum it up, for primitive values we will rely on type inference as much as we can, and use type annotations for the three cases described above.

#javascript #best-practices #development #typescript #coding #programming

A Walk Through Setting the Types in Typescript: Annotations vs Inference
1.05 GEEK