Primitive and basic types – TypeScript Patterns for Angular

JavaScript, despite not being a strongly typed language, has three types called primitives:

• boolean: Represents the two binary values false and true
• string: Represents a set of characters such as words
• number: Represents numerical values

For each of these primitive types, TypeScript already has a datatype that represents them, namely, Boolean, String, and Number, respectively.

Important

The first letter of the primitive types in TypeScript is in uppercase to differentiate it from the primitive JavaScript types. If you want to check a type at runtime using the typeof function, use the names of the primitives in lowercase.

To declare the variables of these types, just use the : symbol in front of the variable declaration, as in the following example:
export function primitive_example() {
  let name: string;
  let age: number;
  let isAlive: boolean;
  name = “Mario”;
  age = 9;
  isAlive = true;
  console.log(`Name:${name} Age:${age} is alive:${isAlive ?
“yes” : “no”}`);
}

In the preceding example, we declare the name, age, and isAlive variables as string, number, and boolean, respectively. Note that we can use JavaScript type names in TypeScript because TypeScript allows both forms for these primitive types.

In JavaScript, it is very common to use the array data structure. This structure allows us to store and manipulate a list of values for our applications. TypeScript has a type for this structure called Array, where it is possible not only to create a variable with that type but also to typify what kind of values the array will contain:
export function array_example() {
  let names: Array<string>;
  let surnames: string[];
  names = [“Mario”, “Gabriel”, “Lucy”];
  surnames = [“Camillo”, “Smith”];
  names.forEach((name) => console.log(`Name:${name}`));
  surnames.forEach((surname) => console.log(`Surname:${surname}`));
}

In this function, we declare the names array using the Array type and declare that it is a string list because we are informing it between square braquets.. In the surnames array declaration, we make the same declaration but use a TypeScript syntax sugar using [] after the string type. This way of declaring has the same effect; it’s just more succinct.

At the end of the example, we use Array’s foreach method to print the elements of the array. Finally, another basic type that is widely used is the any type. This type tells the TypeScript transpiler not to perform any type checking on it, and its content can be type-changed anywhere in the code, as in the following example:
export function any_example(){
  let information:any;
  information = ‘Mario’;
  console.log(`Name: ${information}`);
  information = 7;
  console.log(`Age: ${information
}`);
}

The information variable is declared as any and then we put the Mario string in it. We subsequently redefine the variable with the value 5.

By default, in TypeScript, every variable that does not have its type declared, or that has its value defined in its declaration, is of type any.

This language rule allows, for example, a project with JavaScript code to be incrementally converted to TypeScript by initially declaring all variables of the any type. Another use of the any type is when your code needs the flexibility of JavaScript for some more general algorithm types.

However, it is recommended that Angular developers avoid using any because it partially disables the checks that TypeScript performs in your code, without taking advantage of its power.

We’ll see alternatives throughout the chapter, should you need the flexibility of the any type, without sacrificing type checking and TypeScript inference.