Most common types in Typescript and its usage
Tags: typescript, tutorial
Published: 2023-03-15 09:00:00

# 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:
```typescript
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:
```typescript
let breakfast: 'scrambled eggs'
breakfast = 'chia pudding' // ❌
```

- `number` is for numbers:
```typescript
let year: number = 2022
year = 1945 // ✅
year = 2137 // ✅
year = "1410" // ❌
```
The `number` can be decimal (base 10), hexadecimal (base 16) or octal (base 8)
```typescript
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`
```typescript
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:
```typescript
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.
```typescript
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:
```typescript
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):
```typescript
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. 
```typescript
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:
```typescript
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:
```typescript
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!