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.
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 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',
};
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',
};
Thanks for reading 🥳🥳🥳.
Top comments (1)
Great post,
keyof
seems like good canidate for this list, could be useful to add