Using Static Types in TypeScript

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at the use of static types in TypeScript projects.

Static Types

TypeScript types differ from JbaScript types. We can specify many more data types than what JavaScript allows.

JavaScript is dynamically typed. This is an obstacle for programming familiar with other languages.

Values have types instead of variables in JavaScript.

For instance, if we have:

let x = 1;

Then we can get the type of the value of x which is 1, with the typeof operator.

For instance, we can write:

typeof x

and we would get 'number' .

If we don’t assign a value to something then its type would be undefined .

A value with type undefined can only be undefined .

JavaScript only has the following built-in types.

• number — the data type for representing numeric values
• string — the data type for representing text data
• boolean — true or false
• symbol —the data type for representing unique constant values
• null — the value null , used for indicating a nonexistent or invalid reference
• undefined — the data type used when a variable has been defined but haven’t been assigned a value
• object — represents compound values.

Variables can be assigned anything with any of these types.

Function parameter types are also dynamic. This means that parameters can receive any kind of data.

Therefore, to make our lives easier, we can use TypeScript to help us define some types.

Creating a Static Type with a Type Annotation

We can create a static type with type annotations with TypeScript.

The most basic data types in TypeScript are static types.

We can annotate variables and parameters with data type annotations to make our assumptions explicit.

Also, we can do the same for parameters.

For instance, we can write:

const add = (a: number, b: number): number => {
  return a + b;
};

We have the add function which has the parameters a and b , both of which are numbers.

We also return a number after adding them together.

This is the most basic kind of type annotation and it’s useful to prevent making mistakes.

If we pass in anything that isn’t a number, we’ll get errors from the TypeScript compiler.

Likewise, we can add type annotations to variables.

For instance, we can write:

let price: number = 100;

to restrict price to only be assigned numbers.

Implicitly Defined Static Types

If the type is obvious from the value assigned, then we don’t have write the data type annotation explicitly.

For instance, if we have the example above:

let price: number = 100;

We can remove the type annotation and write:

let price = 100;

The TypeScript compiler will infer the type automatically.

Likewise, we can do the same for return types.

For instance, we can write:

const getTax = (price: number) => {
  return (price * 0.2).toFixed(2);
};

const halfTax = getTax(100) / 2;
console.log(tax);

We’ll get the error ‘The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type.ts(2362)’ with the second last line.

This is because the TypeScript compiler knows that we can only divide a number by 2.

If our code has no compiler errors, then the compiler builds the code when we run it.

Photo by Mikhail Vasilyev on Unsplash

any Type

TypeScript doesn’t stop us from being flexible with data types.

It provides us with the any time to bypass the data types checks done by the compiler.

However, it does stop us from using it accidentally.

We can change getTax to:

const getTax = (price: any): any => {
  return (price * 0.2).toFixed(2);
};

so that we return anything we want and accept any kind of parameter we want.

However, we shouldn’t use any too much so that we can take advantage of the benefits of TypeScript.

Conclusion

We can use static data type for basic data type annotations.

TypeScript will also do type inference for obvious situations so we don’t have to always add data type annotations.

Also, it has the any type to let us assign anything to a variable, parameter, or return anything, but we shouldn’t use it too much.