Skip to main content

TypeScript reminders

Snippets

Typed iterator key (instead of default “any” type)

TypeScript throws a warning when we try to use a string to look up values in an array

let key: keyof SimpleAddress;
for (key in updatedAddress.current) {
	console.log("Value: ", cachedAddress?.current?.[key]);
}

“Disable” certain props from Props

// Omit (optional) `id` from `BaseProps`, and make it a mandatory prop on `Props`
export interface Props extends Omit<BaseProps, 'id'> {
	id: string;
}

Use Template Literal Type

type EasingFunction = 'easeInSine' | 'easeOutSine' | 'easeInOutSine';
type EasingFunctionObjectType = {
	[key in EasingFunction]: `${number}, ${number}, ${number}, ${number}`;
}

const EasingFunctions: EasingFunctionObjectType = {
	easeInSine: '0.12, 0, 0.39, 0',
	easeOutSine: '0.61, 1, 0.88, 1',
	easeInOutSine: '0.37, 0, 0.63, 1',
};

Turn enum into a type

enum ApplicationStatus {
	APPROVED = 'approved',
	COMPLETED = 'completed',
};

type ApplicationStatusType = `${ApplicationStatus}`; // 'approved' | 'completed'

Turn const into immutable const (const assertion)

const ApplicationStatus = {
	APPROVED: 'approved',
	COMPLETED: 'completed',
} as const;

Turn constant object keys into type

const VIEW_STATES = {
  NOT_COMPLETE: 'not-complete',
  COMPLETE: 'complete',
} as const;
type View = keyof typeof VIEW_STATES; // 'NOT_COMPLETE' | 'COMPLETE'

Create union type of all the HTML attributes of HTMLButtonElement

type ButtonAttributes = React.HTMLAttributes<HTMLButtonElement>;

Create union type from one dimensional array values

const c = ['hello', 'wow'] as const;
type C = typeof c[number] // 'hello' | 'wow'

Record with optional (or empty) keys

type EditUrlId = 'flights' | 'carRental' | 'travelInsurance';
type EditUrlField = Partial<Record<EditUrlId, string>>;

Turn constant object values into type

const VIEW_STATES = {
  NOT_COMPLETE: 'not-complete',
  COMPLETE: 'complete',
} as const;
type View = typeof VIEW_STATES[keyof typeof VIEW_STATES]; // 'not-complete' | 'complete'

Tuple type

Type for an array with fixed number of elements

type TPagination: [string, { pageSize: number; pageNumber: number }];

const getPaginatedProducts = ({
  queryKey,
}: QueryFunctionContext<TPagination]>) => {
	const [_key, { pageSize, pageNumber }] = queryKey;
  ...
}

Strict typed arrays

type FunnelJourneyGroupItem = {
  fieldKey: string;
  iconId: string;
  url: string;
};

type GroupItems = [string, FunnelJourneyGroupItem];

const groupItems: Array<GroupItems> = [
  ['Flights', { fieldKey: 'PickFlightsText', iconId: 'flight-icon', url: '/buy/flights' }],
  ['Family seats', { fieldKey: 'SeatSelectionText', iconId: 'seat-icon', url: '/buy/seats/familyseats' }],
];

Set the type of ref

import { RefObject, useRef } from 'react';
const ref: RefObject<HTMLInputElement> = useRef(null);

Create a mutable ref

import { MutableRefObject, useRef } from 'react';
const ref: MutableRefObject<number> = useRef<number>(2);
ref.current = 3;

Typing Event handlers (with React)

Change event

import { ChangeEvent } from 'react';
onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;

Focus/Blur events

import { FocusEvent } from 'react';
onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;

Keyboard events

import { KeyboardEvent } from 'react';
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;

Resources