TypeScript typing and why you should use it

TypeScript typing and why you should use it

I consider TypeScript static typing to be the best single feature in TypeScript. Of course, there are also other useful functionalities like classes, interfaces or generics, but those alone would not make me decide to make the change. In this article we will see how TypeScript typing works and how to use it to our advantage.

About TypeScript Typing timing

TypeScript code cannot be executed directly, it needs to be compiled into JavaScript first. JavaScript is a dynamically typed language. This means that the resulting compiled JavaScript is not typed. So, TypeScript typing is static and gets executed on compile time. Lets see a simple example:

let a: string = "Hello";

We just defined a variable a, of type string, and initialised it with the Hello value. This compiles to the following JavaScript:

var a = "Hello";

As we can see, the type information gets removed.

TypeScript basic data types

TypeScript offers the same data types as JavaScript and some extra useful additions. Lets start with the most basic types: boolean, string and number:

let a: boolean = true;
let b: string = "Hello";
let c: number = 78;

Once we defined a variable with a type, we cannot assign other kind of data to it:

let a: boolean = true;
a = "Hello"; // Error: type "string" is not assignable to type "boolean"

Then, we have arrays. Arrays are defined by appending [] to the type of data in the array:

let d: string[] = ["Hello", "world"];
let e: number[] = [48, 97];

A new type is tuple. A tuple is a type of array where the number and type of data is known from the beginning. It is useful if we need to return multiple data from a function:

let f: [boolean, string] = [true, "Hello"];

We can also define the types for JavaScript plain objects, like we would define a Map in other typed languages:

let g: {[key: string]: string} = { hello: "world" }

The any and void types

Because JavaScript code is also valid TypeScript, explicitly indicating types is not a requirement. TypeScript handles this by assigning the type any when no other type cannot be inferred.

let a;
a = "Hello";
a = 4;

In this example, a becomes of type any. This allows us to assign any type of data to it, like we would in JavaScript.

We can also explicitly set the type to any:

let a: any = "Hello";

This can be useful when dealing with legacy JavaScript code or when using external libraries that do not offer type definitions. Other than that, we should try to define the types of data correctly.

The contrary of any is void. It is mainly used to indicate that a function does not return anything:

let h: () => void = function(): void { 
    console.log("hello"); 
}

Avoid using the any type as much as possible

By default, TypeScript accepts implicit any. This is useful, as we have seen, when working with JavaScript code. When I am dealing with new projects, I always set the compiler noImplicitAny flag to true, and I recommend you do the same. This will alert us when we are not setting the types of our data and TypeScript cannot infer the type for us. This can also be set in the tsconfig.json file of your project.

Even if not necessary, I always try to declare the type, even when TypeScript can automatically infer it from the data. I believe this will allow keeping more easy to understand code, and reduce errors.

Conclusion

The addition of static typing that TypeScript offers, allows us to write more maintainable and easy to understand code. We have seen some basic data types like number, string, boolean, array and how to use them. We have also seen some new TypeScript types, like tuple, and the ability of defining plain object signatures. Finally, we learnt about the any and void types, and why we should avoid the any type and embrace explicit type declaration.

Comments are closed.