A TypeScript tale - The almighty types
Tags: react, typescript, javascript, howto
Published: 2020-01-17 15:05:42

---
title: A TypeScript tale - The almighty types
published: true
date: 2019-11-12 23:00:00 UTC
tags: reactjs, typescript, javascript, how to
canonical_url: https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types
---

Table of contents:

- Boolean, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#boolean)
- String, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#string)
- Number, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#number)
- Null and Undefined, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#null_and_undefined)
- Void, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#void)
- Any, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#any)
- Never, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#never)
- Array, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#array)
- Enum, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#enum)
- Tuple, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#tuple)
- Object, [go to canonical section](https://www.reactgraphql.academy/react/a-typescript-tale-3-the-almighty-types#object)

> “A type is a syntactic method for enforcing levels of abstraction in programs. The study of type systems, and of programming languages from a type-theoretic perspective, has important applications in software engineering, language design, high-performance compilers, and security.” Benjamin C. Pierce

Types are (almost) all that TypeScript cares about. And even if there are many guides out there with these definitions, I couldn’t imagine writing this ‘TypeScript Tale’ of mine without adding my two cents.

JavaScript distinguishes types between primitives and non-primitives and their fundamental difference is that primitives are immutable. All the others are objects. We won’t be digging into this topic for now but you can have a look at the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).

_Note: We shouldn’t use Number, String, Boolean, Symbol, or Object to define types in TypeScript. These types refer to non-primitive objects that 99.9% of the times, will not have the effect we are trying to get from number, string, boolean or symbol. For instance, the global object String (with capital S) is a constructor for strings or a sequence of characters. It’s different from string (with capital s), which refers to a variable that holds a literal string (anything in between single/double quotes)._

## Boolean

One of the types we first come across when learning JavaScript. It can be defined as _true_ or _false_.

```
const foo: boolean = true
```

## String

Another of the basic types and it’s a set of characters that can also contain spaces and numbers. It must start and end with quotes (double or single).

```
const foo: string = "bar"
```

## Number

In some programming languages Numbers are divided into Floats, Integers, Doubles or Bignums. In TypeScript we only use _number_.

```
const foo: number = 36
const bar: number = 1.84
```

## Null and Undefined

These are well-known types and often misunderstood. They mean different things:

- **null** : something that is currently unavailable
- **undefined** : something that hasn’t been initialized

By definition they are subtypes of the other types. This means they can be assigned to _number_ or _string_, for instance. These types are not very useful in TypeScript. Especially if we turn the — strictNullChecks on. In this mode, _null_ and _undefined_ cannot be used unless assigned to themselves or the _any_ type. I encourage this option to be used because it protects us from referencing nulls or undefined values in code.

```
const foo: undefined = undefined
const bar: null = null
```

## Void

_Void_ is the absence of type. It can be seen in functions that do not return a value, such as a _console.log()_.

```
const foo = (): void => {
  console.log("Hello there")
}
```

## Any

Times will come that we don’t know our variable type while writing code. The reasons might be that we are using a 3rd party library or an API that is not ready yet. The _any_ type, when used, will act as a bypass and let us continue our work. However, what would it be the point of typing _any_ if the whole purpose of TypeScript is to introduce static types in JavaScript? We all know there are times we need to ship fast or we are just frustrated but, in this case, the trade-off might be a run-time error. Shall we skip unit tests if they are important for our codebase?

```
let foo: any = 5
foo = "is it a string?"
foo = true; // it's true that I don't know so it's a boolean
```

## Never

The _never_ type represents the type of values that never occur. We usually use _never_ in a function that throws an exception or that never returns. We can also apply _never_ when using type guards that can never be true.

```
const error(message: string): never {
   throw new Error(message)
}
const infiniteLoop(): never {
   while (true) {
   }
}
```

## Array

TypeScript makes use of _arrays_ in the same way as JavaScript are used to store multiple values in a single variable. It can be used in two different ways. The first using brackets after the element type:

```
let foo: string[] = ['foo', 'bar', 'baz']
```

The second using a generic array type **Array\<** elementType **\>** :

```
let sports: Array<string> = ['foo', 'bar', 'baz']
```

## Enum

_Enum_ or enumerations are used in object-oriented languages like Java and C#. TypeScript allows us to use it too. In simple words, enum is a way of giving more friendly names to sets of values. There are three types:

- Numeric enum
- String enum
- Heterogeneous enum  

```
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
```

By default, the members of an _enum_ start with index 0. But we can change this by manually setting:

The initial value:

```
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green
```

Or individual values:

```
enum Color {Red = 1, Green = 6, Blue = 9}
let c: Color = Color.Green
```

The _string enum_ would, obviously, use _string_ instead of _number_:

```
enum Sports {
   Boxing = "BOXING",
   Football = "FOOTBALL",
   Volleyball = "VOLLEYBALL"
}

Sports.Boxing
```

The _Heterogeneous enum_ would be a mix of _strings_ and _numbers_:

```
enum Sports {
   Active = 'ACTIVE',
   howMany = 3
}
```

## Tuple

The _tuple_ will allow us to determine a fixed and heterogeneous collection of values, such as _string_ and _number_ in an _array_. This is especially useful if we want a representation of key-value pairs.

```
let foo: [string, number] = [“bar”, 36]
```

We can access it also with its index:

```
console.log(foo[0]); // "bar"
```

## Object

_Object_ is a type that represents the non-primitive type, i.e. anything that is not _number_, _string_, _boolean_, _symbol_, _null_, or _undefined_.

With _object_ type, APIs like _Object.create_ can be better represented. For example:

```
declare function create(o: object | null): void;

create({ prop: 0 }) // OK
create(null) // OK

create(42) // Error
create("string") // Error
create(false) // Error
create(undefined) // Error
```

So far we’ve had a grasp of the types available to us. It might not look important but these are the building blocks of the TypeScript programming language. During the next episodes we’ll learn not only how to use them, but also how to mix and build powerful typed integrated systems.

#### Related articles

Previous:

[A TypeScript Tale - Episode 1](https://www.reactgraphql.academy/react/a-typescript-tale-episode-1/)

[A TypeScript tale - How to setup and configure](https://www.reactgraphql.academy/react/a-typescript-tale-how-to-set-it-up-and-configure)

Next:

[A TypeScript tale - Interfaces, Classes & Generics](https://www.reactgraphql.academy/react/a-typescript-tale-interfaces-classes-and-generics/)