[{"id":"cG9zdDoyNTI=","slug":"4-useful-typescript-tricks","title":"5 useful Typescript tricks","content":"\n

Typescript is a godsend. It is very easy to get started with and for most developers there is no way back once they get the hang of it. Sometimes it can get pretty advanced and intimidating though.

\n\n\n\n

This is why I decided to share 5 of my favourite typescript tips and tricks you might have needed in the past. Some are super basic, some are bit more advanced.

\n\n\n\n

Update 07 Okt 2019 @ 07:53
Reddit user jakeboone02 found an error in the ternary code.

\n\n\n\n

Update 06 Okt 2019 @ 15:06
Reddit user smeijer87 found an error in the code for null coalescing.

\n\n\n\n

Update 06 Okt 2019 @ 14:47
A fiendly reader pointed out excluding interface type are called discriminated unions.

\n\n\n\n

\"\" — Photo by Amador Loureiro on Unsplash

\n\n\n\n

Higher-order Components

\n\n\n\n

In React higher order components (HOC) are very useful tools. Generally they are used to wrap some layout or functionality to some other component. They are simply functions that return another component: basically the same pattern as decorators.

\n\n\n\n

In typescript it can be confusing how to write them maintaining the right props after wrapping the original component. Here you are:

\n\n\n\n

import React from 'react'\n\nfunction withLayout<P extends object>(WrappedComponent: React.ComponentType<P>) {\n  return (props: P) => (\n    <div id='app'>\n      <Header/>\n      <WrappedComponent {...props}/>\n      <Footer/>\n    </div>\n  );\n}

\n\n\n\n

Note also that when using the withLayout you don’t need to specify the generic type explicitly, as typescript will inherit from the function parameter. Super handy!

\n\n\n\n

Smarter constructors

\n\n\n\n

Let’s start by the building block this is based on. It’s a basic Javascript trick, not a typescript exclusive at first.

\n\n\n\n

class Pizza {\n  slices: number\n  name: string\n  \n  constructor(init) {\n    Object.assign(this, init)\n  }\n}\n\nconst pizza = new Pizza({\n  slices: 8,\n  name: 'Margherita',\n})

\n\n\n\n

What is happening here? With the super handy Object.assign simply assigns the object to the class. This is super handy when classes have many constructor parameters. But this is NOT type safe as your IDE/Editor will tell you. How do we fix this?

\n\n\n\n

import { NonFunctionKeys } from 'utility-types'\n\nclass Pizza {\n  slices!: number\n  name?: string\n\n  constructor(init: Pick<Pizza, NonFunctionKeys<Pizza>>) {\n    Object.assign(this, init)\n  }\n\n  eat() {\n    this.slices = 0\n  }\n}\n\nconst pizza = new Pizza({\n  slices: 8,\n  name: 'Margherita',\n})

\n\n\n\n

Let me explain what happens:
This leverages the awesome utility-types package. We first take all the keys that are not a function, so we don’t overwrite the eat method of the class. Then we pick those from the general Pizza type.

\n\n\n\n

This means that slices will be required, while name will be optional, as they are defined.

\n\n\n\n

Type-checking Functions

\n\n\n\n

Did you know you can write functions to tell typescript what type something is? This is awesome!

\n\n\n\n

Suppose we have the following interfaces

\n\n\n\n

interface Food {\n  name: string\n}\n\ninterface Pasta extends Food {\n  type: 'Spaghetti' | 'Fusilli'\n}\n\ninterface Pizza extends Food {\n  slices: number\n}

\n\n\n\n

Now we could write a cook function that accepts both Pasta and Pizza. Typescript itself cannot differentiate between the too.

\n\n\n\n

function cook(what: Food) {\n  if(what === Pizza) ????\n}

\n\n\n\n

Fortunately there is a nice solution built into typescript.

\n\n\n\n

function isPizza(x: Food | Pizza): x is Pizza {\n  return x.hasOwnProperty('slices')\n}\n\nfunction isPasta(x: Food | Pasta): x is Pasta {\n  return x.hasOwnProperty('type')\n}\n\n\nfunction cook(plate: Food) {\n  if (isPizza(plate)) {\n    // Plate is now of type Pizza\n    putInTheOven(plate)\n  }\n  if (isPasta(plate)) {\n    // Plate is now of type Pasta\n    putInThePan(plate)\n  }\n}

\n\n\n\n

Here we define two functions that return x is Sometype and return a boolean value based on the input. It’s up to you of course to define it properly, but this can be very useful in various situations.

\n\n\n\n

Discriminated unions

\n\n\n\n

type Sqlite = {\n  type: 'sqlite',\n  database: string,\n}\n\ntype PostgreSQL = {\n  type: 'postgresql',\n  database: string,\n  host: string,\n  post?: number\n}\n\ntype PossibleConfigs = Sqlite | PostgreSQL\n\nfunction initialize(config: PossibleConfigs) {}

\n\n\n\n

This might look like a simple one, but I often see people putting those sorts of types all into the same interface. By separating the different type of objects you make sure that they are safe. Also the autocomplete will thank you.

\n\n\n\n

Optional Chaining & Null Coalescing

\n\n\n\n

This are future features that will be introduced in Typescript 3.7 that are very useful and will not be lived without after the release in early November 2019.

\n\n\n\n

Optional chaining is an obvious shorthand. Every time you need to check if a property (especially if nested) exists, you need to do lots of repetitive checking. No more!

\n\n\n\n

a && a.b && a.b.c // 🤬\n\na?.b?.c // 🚀

\n\n\n\n

Null coalescing is also a very useful shorthand. You all know the || shorthand, often used to initialise a variable if no value is given.

\n\n\n\n

const option = something || 'default'\n\n// Sugar for\nconst option = !!something ? something : 'default'

\n\n\n\n

The problem is with values that are actual values, but result as falsy.

\n\n\n\n

false || 'default'      // => 'default'\n0     || 'default'      // => 'default'

\n\n\n\n

This is where the Null Coalescing comes in.

\n\n\n\n

const option = something ?? 'default'  // 🚀\n\n// Sugar for\nconst option = (x === null || x === undefined)\n  ? 'default'\n  : x\n\n0     ?? 'default'      // => 0\nfalse ?? 'default'      // => false

\n\n\n\n

Basically it only assign the default value if the provided one is null or undefined so that values like false or 0 don’t get overwritten.

\n","status":"publish","date":"2019-10-06T10:34:03","modified":"2020-09-22T20:50:14","tags":{"nodes":[{"id":"dGVybTo1NQ==","slug":"tips-and-tricks","name":"tips and tricks","count":1},{"id":"dGVybTo1Ng==","slug":"typescript","name":"typescript","count":2}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-300x201.jpg 300w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-1024x685.jpg 1024w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-768x514.jpg 768w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-1536x1028.jpg 1536w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-2048x1371.jpg 2048w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-500x335.jpg 500w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-800x536.jpg 800w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-1200x803.jpg 1200w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-1500x1004.jpg 1500w, https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-2000x1339.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2019/07/amador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg"}}}]