An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
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.
Type Aliases
There are several way to define a Type
in Typescript:
// Defining a typetype Person = { age?: number; // Optional property name: string; id: ID;};// Defining union typetype ID = number | string;// Combining typestype 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 parameterconst 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 .
Original Link: https://dev.to/ogzhanolguncu/must-know-types-in-typescript-ljo
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To