DEV Community

Cover image for Must Know Types in Typescript
Oğuzhan Olguncu
Oğuzhan Olguncu

Posted on • Originally published at ogzhanolguncu.com

Must Know Types in Typescript

Introduction

Types are the number one reason why we use Typescript in the first place and there are lots of 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;
Enter fullscreen mode Exit fullscreen mode

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 }) => {};
Enter fullscreen mode Exit fullscreen mode

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' },
};
Enter fullscreen mode Exit fullscreen mode

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' },
};
Enter fullscreen mode Exit fullscreen mode

So if we are aiming for full control over key and property types Record's are the 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',
};
Enter fullscreen mode Exit fullscreen mode

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">'
};
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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',
};
Enter fullscreen mode Exit fullscreen mode

Thanks for reading 🥳🥳🥳.

Top comments (1)

Collapse
 
ertankara profile image
Ertan Kara

Great post, keyof seems like good canidate for this list, could be useful to add