DEV Community

Nikolas ⚡️
Nikolas ⚡️

Posted on

Most common types in Typescript and its usage

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` // ✅
Enter fullscreen mode Exit fullscreen mode

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

let breakfast: 'scrambled eggs'
breakfast = 'chia pudding' // ❌
Enter fullscreen mode Exit fullscreen mode
  • number is for numbers:
let year: number = 2022
year = 1945 // ✅
year = 2137 // ✅
year = "1410" // ❌
Enter fullscreen mode Exit fullscreen mode

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 ✅
Enter fullscreen mode Exit fullscreen mode
  • boolean can only store one of these two values: true or false
const isAdmin: boolean = true
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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] // ❌
Enter fullscreen mode Exit fullscreen mode

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 // ❌
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
  • 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] // ❌
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)