5 useful Typescript tips and tricks

In this artical we will be exploring 5 useful tips and tricks of the TypeScript and some of with React.JS.

###1. React.ReactNode vs JSX.Element

The type of ReactNode infer that type which react render that can be number, string, undefiend, HTMLElement.

For example

code
COPY
import React from 'react'
const reactNode: React.ReactNode[] = [
    'khalid',
    undefiend,
    123,
    <div />
]

But in JSX.Element it only refer to htmlElements

For example

code
COPY
const jsxElement: JSX.Element[] = [
    <div />,
    <span />,
]

###2. Generics

This is the best example of how generics can make the simple function far more useful.

code
COPY
// using any...
async function retry(
  fn:()=>Promise<any>,
  retries: number = 5
) {
try {
return await fn();
} catch (error) {
if(retries > 0){
console.log('Retrying..')
return await retry(fn, retries -1)
}
throw error

}
}
code
COPY
retry(()=>Promise.resolve('hello')).then((str)=>
// 2. resulting any
console.log(str)
)

For the same function using the generics

code
COPY
async function retry<T>(
fn:()=>Promise<T>,
retries: number = 5
) {
try {
return await fn();
} catch (error) {
if(retries > 0){
console.log('Retrying..')
return await retry(fn, retries -1)
}
throw error

}
}
code
COPY
retry(()=>Promise.resolve('hello')).then((str)=>
// 2. The type is infered
console.log(str)
)

###as const

as const is most underrated feature it makes the types readonly that can be array, object and strings etc.

For example

code
COPY
// without as const
const routes = {
home: "/",
about:"/about",
service: "/service"
}
// can be changed
routes.home = '/whatever'
// with as const
const routes = {
home: "/",
about:"/about",
service: "/service"
} as const;
// can't  be changed it warn us
routes.home = '/whatever'
const OPACITY = 0.5 as const;

###4. ElementRef

ElementRef is veryful for finding the right type for the useRef in react.

code
COPY
import {useRef, ElementRef} from 'react';
const Comp = ()=>{
const divRef = useRef<ElementRef<'div'>>(null);
return (
    <div ref={divRef}>
        hello useRef
        </div>
)
}

###5. Destructing the types in typescript

This example explain the that how we can destructure the type in from object and arrays.

code
COPY
const roles = ['admin', 'superadmin', 'user']
// adapt if we add more roles to array
const Role1 = (typeof roles)[0 | 1 | 2];
code
COPY
// this works no matter how many roles we have in array
const Role2 = (typeof roles)[number]

HAPPY TYPES 😇