Software Development

4 Shocking TypeScript Tricks to Exercise your Mind

Quick Tips to Improve your Code ⚡

Published on Jun 12, 24 by:
Daniel Craciun
4 min read
4 Shocking TypeScript Tricks to Exercise your Mind
This image has been generated by AI.

TypeScript is a programming language full with hidden tips and tricks.

In this article, we will discuss 4 Shocking Tips I discovered while learning TypeScript.⚡

So without further ado... Let's jump right in!

1. Extracting Array Member Types

Here is a classic tip to extract every array member as a union type.

Let's take a look at the example below:

const names = ["Shah Rukh Khan", "Chris Bumstead", "Justin Bieber"] as const

// type Name = "Shah Rukh Khan" | "Chris Bumstead" | "Justin Bieber"
type Name = (typeof names)[number]

This is a very simple tip, yet under-used by the TypeScript community.

  1. First we get the type of the names array through (typeof names)
  2. Then we index into the array using [number], which gives us all the values in the array as a type.

2. TODO Type Alias

This is a very simple yet effective tip:

type TODO = any

Here I aliased the type any to TODO.

type TODO acts as a placeholder that you can search-and-replace globally.

Here is an example of how I would use it:

type TODO = any

// Construct a point object without thinking about
// types at the moment.
const point: TODO = {
  x: 1,
  y: 2,
}

// When you are ready, construct the Point type
type Point = {
  x: number
  y: number
}
// Then replace the TODO type 
// with the Point type globally.
const point: Point = {
  x: 1,
  y: 2,
}
PRO TIP: In vscode, select the TODO type and press shift+alt+f12 to find all references to it in every file!

3. ElementRef (React Only)

For all the React users out there, this tip will save you a lot of time.

ElementRef<T> is a type you import from the react package that returns a reference type based on it's name.

Here is an example:

import { ElementRef, useRef } from "react"

function Ref() {
  // No longer need to look for the corresponding ref type.
  const buttonRef = useRef<ElementRef<"button">>(null)

  return <button ref={buttonRef}>press me</button>
}
  • Here we use ElementRef<"button"> to get the correct type for the useRef hook.
  • This tip works for every JSX element, e.g. audio, anchor...

4. Const Generic Parameters

To understand const Generic Parameters, lets first look at basic Generics:

// Without const T
declare function getRandomName<Name>(names: Name[]): Name

// const name: string
const name = getRandomName([
  "Shah Rukh Khan",
  "Chris Bumstead",
  "Justin Bieber",
])

Here we use the Generic Parameter Name to represent the input and output type for this function getRandomName.

However, even though we pass in three literal names, the return type is string.

We want the type to be more accurate here, so let's add a const generic parameter to achieve this:

// With const T
declare function getRandomNameConst<const Name>(names: Name[]): Name

// const nameConst: "Shah Rukh Khan" | "Chris Bumstead" | "Justin Bieber"
const nameConst = getRandomNameConst([
  "Shah Rukh Khan",
  "Chris Bumstead",
  "Justin Bieber",
])

The only difference here is that we use const Name instead of just Name.

This lets us narrow down the type from string to the union of the three names.

Conclusion

These were 4 Shocking TypeScript tips that should exercise your mind.⚡

I hope you found these useful, and I will write more articles like this to help you get better at TypeScript fast.

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐

References

1