Basic types in Typescript

Everyday types

Learn and understand the most common types in Typescript. See the differences between Javascript types and its corresponding Typescript values.

The primitives

In everyday life we use three main Javascript primitves: string, number and boolean. All of them have corresponding type in Typescript.

• string represents string values:

const singleQuotes: string = 'single' // ✅
const doubleQuotes: string = 'double' // ✅
const backTicks: string = `${singleQuotes} backticks` // ✅

We can also define type using specific strings - it is called string literal type:

let breakfast: 'scrambled eggs'
breakfast = 'chia pudding' // ❌

• number is for numbers:

let year: number = 2022
year = 1945 // ✅
year = 2137 // ✅
year = '1410' // ❌

The number can be decimal (base 10), hexadecimal (base 16) or octal (base 8)

let hexadecimal: number = 0x37cf // 14287 ✅
let octal: number = 0o377 // 255 ✅
let binary: number = 0b111001 // 57 ✅

• boolean can only store one of these two values: true or false

const isAdmin: boolean = true

Defining types using String, Number or Boolean is possible and totally valid but the convention is to use lowercased names: string, number and boolean.

Non-primitives

Arrays

You can specify the type of an array two ways:

const array: number[] = [1, 2, 3, 4]
const genericArray: Array<number> = [5, 6, 7, 8]

The first syntax is more frequent. The number[] means that we expect the array of numbers, for the array of strings we would use string[] and so on. The second line means the same thing but it uses the generics syntax which I’ll cover in a different article.

Tuple

A tuple type is another kind of Array type that knows exactly how many elements it contains and exactly what types it contains at defined positions.

let settings: [string, boolean]
settings = ['lightmode', true] // ✅
settings = ['ligthmode', true, 1] // ❌

Object

The object type is the most common sort of types in Javascript along with the primitives from the previous part. Defining an object type is done by listing object’s properties and their types:

let steak: { thickness: number; doneness: string; isVegan: boolean }

steak = {
  thickness: 1, // ✅
  doneness: 'medium-rare', // ✅
  isVegan: false, // ✅
  internalTemp: 165, // ❌
}

We can also store a function as one of the object properties (then we call it a method):

let user: { name: string; sayHi(): string } = {
  name: 'John',
  sayHi() {
    return this.name
  },
}

Enum

This specific type isn’t available in plain Javascript. Enums are data structures of defined length that hold a set of constant values. They are useful for setting properties that can only be a certain number of possible values

• Numeric enums. By default, the first value is initialized with 0 and the following members are auto-incremented from that point on.

enum CardDeck {
  Clubs,
  Diamonds,
  Hearts,
  Spades,
}

CardDeck.Clubs // 0,
CardDeck.Diamonds // 1,
CardDeck[2] // "Hearts"

We can also change the values and their auto-incrementing behaviour:

enum CardDeck {
  Clubs, // 0
  Diamonds = 5,
  Hearts, // 6
  Spades, // 7
}

CardDeck.Clubs // 0,
CardDeck.Diamonds // 5,
CardDeck[6] // "Hearts"

• String enums are similar to number enums but a string enum’s each member has to be initialized with a string literal - they don’t have auto-incrementing behaviour:

enum CardDeck {
  Clubs = "♣️"️,
  Diamonds = "♦️",
  Hearts = "♥️",
  Spades = "♠️",
}

CardDeck.Clubs // "♣️"️
CardDeck[2] // ❌

Summary

These types will surely help you get started with Typescript in your projects. There is much more to be learned but I’ll try to do my best to cover all neccesary Typescript related topics in the next articles. Stay tuned!