How I improve my skills in Typescript #1 : Typeguard & Type Utils
Tags: typescript, node, webdev, javascript
Published: 2021-03-06 16:08:53

I will share with us some tips that improved my skill in Typescript !

### Typeguard

Typeguard allow you to validate the type of an object within a conditional block.

```typescript
interface Fish {
  swim: () => void
}

interface Bird {
  fly: () => void
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined
}
```
We can be sure thanks to the condition, that pet object is a `Fish`.

**Why and where use this ?**

It's very useful when you need to check the type of an object among other type. In the example above, the typeguard `isFish` can be use like that.

```typescript
function toto(pet: Fish | Bird) {
  if (isFish(pet)) {
     pet.swim() // At this moment, TS know that pet is `Fish` and no a `Bird`
  }
}


function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined
}
```

### Type `this` as argument in function

A small tips, you can type `this` object in a function like this

```typescript
function toto(this: { a: string }, arg: number) {
  console.log(this.a, arg) // "toto",  55 
}

toto.bind({ a: 'toto' })(55) // Don't forget to bind `this`

```

### Utility Types

Typescript allow us to use utility type, it's a very usefull feature ! you have the full list at *https://www.typescriptlang.org/docs/handbook/utility-types.html*

I will show you the common utility type that I used !

**Partial** :

Constructs a type with all properties of Type set to optional.

```typescript
interface Toto { a: string, b: string }
// Partial type equal to -> interface Partial<Toto> { a?: string, b?: string }

const partialToto: Partial<Toto> = { a: 'a' }
```

**Pick** & **Omit** :

`Pick` is used to extract some keys from a type in order to create a new type.

```typescript
interface Toto { a: string, b: string }
// Pick type equal to -> interface Pick<Toto, 'a'> { a: string }

const pickToto: Pick<Toto, 'a'> = { a: 'a' }
```

`Omit` is used to remove some keys from a type in order to create a new type.

```typescript
interface Toto { a: string, b: string }
// Pick type equal to -> interface Omit<Toto, 'a'> { a: string }

const omitToto: Omit<Toto, 'a'> = { b: 'b' }
```

With three utility types, you can create new very smart type ! And very useful to understand for other developers.

**Record** :

You can construct an object with typed keys and type and make useful type like this 

```typescript
type TotoKeys = 'a' | 'b' | 'c'
interface Toto { name: string, age: number }

const toto: Record<TotoKeys, Toto> = {
   a: { name: 'a', age: 55 },
   b: { name: 'b', age: 44 },
   c: { name: 'c', age: 33 },
}
```

I love records since you can use enum for typing keys !

```typescript
enum TotoEnum { 
  A = 'A',
  B = 'B',
  C = 'C'
}
interface Toto { name: string, age: number }

const toto: Record<TotoEnum, Toto> = {
   [TotoEnum.A]: { name: 'a', age: 55 },
   [TotoEnum.B]: { name: 'b', age: 44 },
   [TotoEnum.C]: { name: 'c', age: 33 },
}
```

I hope you learn and improves your skills during this article !

If you have other suggestions or questions, don't hesitate to put it in comment bellow !

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!