This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
TypeScript is a superset of JavaScript that adds static typing and other features to the language. One of the most powerful features of TypeScript is its support for utility functions, which allow developers to manipulate types in powerful ways. In this article, we will explore six must-know TypeScript utility functions for developers, with examples and explanations of each.
Partial<T>
The Partial utility function allows you to create a new type by making all properties of the original type T optional. This can be useful when you have a complex type with many properties, but you only need to provide some of them in a particular context.
For example, suppose you have a Person interface with several required properties:
interface Person {
firstName: string;
lastName: string;
age: number;
address: Address;
}
interface Address {
street: string;
city: string;
state: string;
zip: string;
}If you want to create a new type that has the same properties as Person, but with all properties optional, you can use the Partial utility function like this:
type PartialPerson = Partial<Person>;
Now you can create a variable of type PartialPerson and only provide the properties you need:
const partialPerson: PartialPerson = {
firstName: 'John',
lastName: 'Doe'
};Required<T>
The Required utility function creates a new type by making all properties of the original type T required. This can be useful when you have a type with optional properties, but you want to ensure that all properties are provided in a particular context.
Continuing with the Person interface from the previous example, suppose you want to create a new type that has all properties of Person required. You can use the Required utility function like this:
type RequiredPerson = Required<Person>;
Now you can create a variable of type RequiredPerson and ensure that all properties are provided:
const requiredPerson: RequiredPerson = {
firstName: 'John',
lastName: 'Doe',
age: 30,
address: {
street: '123 Main St',
city: 'Anytown',
state: 'CA',
zip: '12345'
}
};Readonly<T>
The Readonly utility function creates a new type by making all properties of the original type T readonly. This can be useful when you have a type that should not be modified after it is created.
For example, suppose you have a User interface with several properties:
interface User {
id: number;
username: string;
email: string;
password: string;
}If you want to create a new type that has the same properties as User, but with all properties readonly, you can use the Readonly utility function like this:
type ReadonlyUser = Readonly<User>;
Now you can create a variable of type ReadonlyUser and ensure that none of its properties can be modified:
const user: ReadonlyUser = {
id: 1,
username: 'johndoe',
email: 'john.doe@example.com',
password: 'password123'
};
user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.Record<K, T>
The Record utility function creates a new type by mapping keys of type K to values of type T. This can be useful when you want to create a type that represents a set of values with specific keys.
For example, suppose you have a set of error codes that you want to represent as an object, where the keys are the error codes and the values are the error messages:
type ErrorCode = 'E001' | 'E002' | 'E003';
type ErrorMessages = Record<ErrorCode, string>;
const errorMessages: ErrorMessages = {
E001: 'An error occurred.',
E002: 'Another error occurred.',
E003: 'Yet another error occurred.'
};
Now you can access the error messages by their corresponding error code:
const errorMessage = errorMessages['E001']; // 'An error occurred.'
Exclude<T, U>
The Exclude utility function creates a new type by excluding all types in the union U from the type T. This can be useful when you want to define a type that only includes certain types.
For example, suppose you have a Color type that includes several possible color values:
type Color = 'red' | 'green' | 'blue' | 'yellow';
If you want to define a type that excludes certain color values, you can use the Exclude utility function like this:
type PrimaryColor = Exclude<Color, 'green' | 'purple'>;
Now you can create a variable of type PrimaryColor and ensure that it only includes primary colors:
const primaryColor: PrimaryColor = 'red'; // OK
const secondaryColor: PrimaryColor = 'green'; // Error: Type 'green' is not assignable to type 'PrimaryColor'.
Omit<T, K>
The Omit utility function creates a new type by omitting the specified properties K from the original type T. This can be useful when you have a type with many properties, but you want to create a new type without certain properties.
For example, suppose you have a User interface with several properties:
interface User {
id: number;
username: string;
email: string;
password: string;
}If you want to create a new type that has all the properties of User except for password, you can use the Omit utility function like this:
type UserWithoutPassword = Omit<User, 'password'>;
Now you can create a variable of type UserWithoutPassword without providing the password property:
const userWithoutPassword: UserWithoutPassword = {
id: 1,
username: 'johndoe',
email: 'john.doe@example.com',
};In conclusion, TypeScript utility functions are a powerful tool for developers that allow for more flexible and reusable code.
By understanding and using these utility functions effectively, developers can create more robust and maintainable TypeScript code. These functions are just a small part of the TypeScript language, but they can have a big impact on the quality of your code and the productivity of your development team.
💡 You can use an open-source toolchain like Bit to improve code quality and the productivity of your dev team. With Bit you can easily share, discover, and reuse TypeScript utility functions and individual components across different projects, which can significantly reduce code duplication and improve code quality.
Find out more:
Sharing Types Between Your Frontend and Backend Applications
With this knowledge in hand, you can take your TypeScript skills to the next level and create more powerful, reliable applications.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
6 Must-Know TypeScript Utility Functions for Developers was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
Brian Ridolce | Sciencx (2023-03-27T03:05:36+00:00) 6 Must-Know TypeScript Utility Functions for Developers. Retrieved from https://www.scien.cx/2023/03/27/6-must-know-typescript-utility-functions-for-developers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.