Introduction

Types are the number one reason why we use Typescript in the first place and there are lots them we can benefit from. As a Frontend developer specialized in React, there some trick that I utilize to make everything seamlessly work with types. With these tips and tricks Typescript will become a breeze instead of a burden to carry.

1. Type Aliases
2. Object Type
3. Record Type
4. Omit Type
5. Pick Type
6. Union Type
7. Typeof Type

Type Aliases#

There are several way to define a Type in Typescript:

// Defining a type
type Person = {
  age?: number; // Optional property
  name: string;
  id: ID;
};

// Defining union type
type ID = number | string;

// Combining types
type Person = {
  age: number;
  name: string;
  id: ID;
};

type Car = {
  color: string;
  year: number;
};

type CarAndPersonCombined = Person & Car;

Object Type#

If type is not a complex one and easy to write, we simply:

// Directly inside parameter
const foo = (id: { id: string | number }, car: { color: string; year: number }) => {};

Record Type#

A Record<K, T> is an object type whose property keys are K and whose property values are T. So, we make sure Records key type, and, of course, property types won't be something we did not anticipate..

const colorMap: Record<string, { color: string; hover: string }> = {
  nextjs: { color: '#0A7B83E2', hover: '#09686dE2' },
  javascript: { color: '#F5B50FE2', hover: '#d69e0cE2' },
};

The example above tells us keys will always be string, color and hover properties will be string as well. If we try to supply them with a number, we'll receive an error below.

const colorMap: Record<string, { color: string; hover: string }> = {
  nextjs: { color: 1234, hover: 1245 }, // Type 'number' is not assignable to type 'string'.ts
  javascript: { color: '#F5B50FE2', hover: '#d69e0cE2' },
};

So if we are aiming for full control over key and property types Record's are way to go.

Omit Type#

If you already have a type but want to delete some properties? Omit can make this happen.

type Person = {
  name: string;
  age: number;
  salary: number;
};

type PersonWithoutSalary = Omit<Person, 'salary', 'age'>;

const personObj: PersonWithoutSalary = {
  name: 'Foo',
};

We've deleted salary and age from Person type now all we have is name.

Pick Type#

So you want to Pick properties instead of omitting things you don't want to have?

type Person = {
  name: string;
  age: number;
  salary: number;
};

type PersonWithoutSalary = Pick<Person, 'salary'>;

const personObj: PersonWithoutSalary = {
  salary: 10000,
  age: 19, // Type '{ age: number; }' is not assignable to type 'Pick<Person, "salary">'
};

If you try to use a property that is not included in Pick, Typescript will throw an error.

Union Type#

type TodoProps = {
  id: string;
  desc: string;
  state: StateTypes;
};

type StateTypes = 'Active' | 'All' | 'Completed';

A to-do state is a perfect example of the Union type. If all you need is one out of a list of conditions, then we utilize Union. By doing that we restrict other options and make IntelliSense work in our favour.

Typeof Type#

If you are so lazy to create a new type, and you already have an object to map out your types:

const Person = {
  name: 'John',
  age: '20',
};

type PersonType = typeof Person;

const newPersonObj: PersonType = {
  name: 'Smith',
  age: '21',
};