DEV Community: Sharif

Mastering TypeScript Utility Types

Sharif — Fri, 25 Jul 2025 15:57:57 +0000

When working with TypeScript, one of the most powerful tools in our developer toolkit is utility types. These built-in helpers let us transform types, enforce constraints, and write more flexible, safer code.

In this blog, we’ll break down the most common TypeScript utility types with simple, real-world examples, making them easier to understand and apply in our own codebase.

Common TypeScript Utility Types

1. `Partial<T>`

Makes all properties in a type optional.

Use case: When updating only part of an object (e.g. a PATCH API).

type User = {
  name: string;
  email: string;
};

const updateUser = (id: string, data: Partial<User>) => {
  // data can contain name, email, or both (or neither)
};

updateUser("1", { email: "new@example.com" });

2. `Required<T>`

Makes all properties in a type required, even if they were optional before.

type User = {
  name?: string;
  email?: string;
};

const createUser = (user: Required<User>) => {
  // name and email must be provided
};

createUser({ name: "John", email: "john@example.com" });

3. `Readonly<T>`

Makes all properties read-only — they can’t be changed after being set.

type User = {
  name: string;
};

const user: Readonly<User> = { name: "Alice" };

// user.name = "Bob"; ❌ Error: Cannot assign to 'name'

4. `Record<K, T>`

Creates an object type with keys of type K and values of type T.

Use case: Creating a mapping object.

type Role = "admin" | "user" | "guest";

const permissions: Record<Role, string[]> = {
  admin: ["create", "read", "update", "delete"],
  user: ["read"],
  guest: [],
};

5. `Pick<T, K>`

Creates a new type by picking a subset of properties from T.

type User = {
  id: number;
  name: string;
  email: string;
};

type PublicUser = Pick<User, "id" | "name">;

const user: PublicUser = {
  id: 1,
  name: "John",
};

6. `Omit<T, K>`

Creates a type by excluding one or more properties from T.

type User = {
  id: number;
  name: string;
  email: string;
};

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
  id: 1,
  name: "John",
};

7. `Exclude<T, U>`

Removes from T the types that are assignable to U.

type Roles = "admin" | "user" | "guest";
type LimitedRoles = Exclude<Roles, "guest">;

// "admin" | "user"

8. `Extract<T, U>`

Keeps from T only the types that are assignable to U.

type Roles = "admin" | "user" | "guest";
type StaffRoles = Extract<Roles, "admin" | "user">;

// "admin" | "user"

9. `NonNullable<T>`

Removes null and undefined from a type.

type MaybeUser = string | null | undefined;
type User = NonNullable<MaybeUser>; // string

10. `ReturnType<T>`

Extracts the return type of a function.

const getUser = () => {
  return { id: 1, name: "Alice" };
};

type User = ReturnType<typeof getUser>; // { id: number; name: string }

11. `Parameters<T>`

Extracts the parameter types of a function into a tuple.

function greet(name: string, age: number) {
  return `Hello ${name}, age ${age}`;
}

type GreetParams = Parameters<typeof greet>; // [string, number]

12. `ConstructorParameters<T>`

Extracts the types of a class constructor's parameters.

class Person {
  constructor(public name: string, public age: number) {}
}

type PersonArgs = ConstructorParameters<typeof Person>; // [string, number]

13. `InstanceType<T>`

Gets the instance type of a class constructor.

class Car {
  wheels = 4;
}

type CarInstance = InstanceType<typeof Car>; // Car

14. `Awaited<T>`

Unwraps the type of a Promise, recursively if needed.

async function fetchUser(): Promise<{ name: string }> {
  return { name: "Alice" };
}

type User = Awaited<ReturnType<typeof fetchUser>>; // { name: string }

15. `NoInfer<T>`

Prevents TypeScript from inferring a type too early. Useful in generic helpers. It is not built-in but often used via workaround.

type NoInfer<T> = [T][T extends any ? 0 : never];

function useDefault<T>(value: T, fallback: NoInfer<T>): T {
  return value !== undefined ? value : fallback;
}

Wrapping Up

TypeScript’s utility types are secret weapon to write clean, reusable, and safe type definitions without unnecessary duplication. By using them, we can simplify code and boost our productivity.

References

Understanding the types of JavaScript errors

Sharif — Tue, 12 Dec 2023 13:20:58 +0000

JavaScript, the language that powers the interactive and dynamic aspects of the web, has become an integral part of modern web development. While coding in JavaScript, developers often encounter errors that can be challenging to debug.

Errors are like friendly notes from your computer, telling you where your code might need a little help. Think of them as clues that point to specific issues. These errors come in different types, each with its own way of saying, "Hey, something's not quite right here." Understanding these types is like having a special guide to fix problems and make sure your code works smoothly. In this blog post, we will explore the types of JavaScript errors, and discuss strategies to effectively handle and debug them.

1. Syntax Error:

Syntax errors occur when there is a mistake in the structure of your code.
These errors are detected by the JavaScript engine during the parsing phase.
Common causes include missing parentheses, mismatched braces, or typos in variable/function names.
The error message usually points to the line where the syntax violation occurred.

// Example with missing closing parenthesis
console.log('Hello World';

console.log('Hello World';
            ^^^^^^^^^^^^^
SyntaxError: missing ) after argument list

2. Reference Error:

Reference errors occur when trying to reference a variable or function that hasn't been declared.
It often happens when using a variable before it's defined or trying to access properties on undefined or null values.
Properly declaring variables and ensuring they are in scope helps prevent reference errors.

// Example referencing an undeclared variable
console.log(undefinedVariable);

console.log(undefinedVariable);
            ^^^^^^^^^^^^^^^^^
ReferenceError: undefinedVariable is not defined

3. Type Error:

Type errors occur when an operation is performed on an inappropriate data type.
Examples include attempting to call a method on a non-function or accessing a property on a non-object.
Type errors are often resolved by validating the types of variables before performing operations.

// Example calling a number as a function
let number = 42;
number();

number();
^^^^^^
TypeError: number is not a function

4. Range Error:

Range errors occur when a numeric value is not within an allowed range. Typically associated with methods or operations that expect a specific numeric range.
Range errors are often resolved by Validating input values before using them in operations that have specific numeric requirements.
Use conditional statements to check whether a value falls within the acceptable range before performing an operation.

// Example creating an array with a negative length
let arr = new Array(-1);

let arr = new Array(-1);
          ^^^^^^^^^^^^^
RangeError: Invalid array length

5. URI Error

URI errors occur when encodeURI() or decodeURI() are passed invalid parameters.
These errors are related to encoding and decoding Uniform Resource Identifiers (URIs), such as URLs.
Ensure that input strings provided to encodeURI() or decodeURI() adhere to URI standards. Validate user-generated input to prevent the passing of malformed URIs.

// Example attempting to decode an invalid URI
decodeURI('%');

decodeURI('%');
           ^
URIError: URI malformed

6. Internal Error

These errors might be caused by limitations or bugs in the JavaScript engine, memory issues, or other unforeseen internal problems.
For example, this error occurs most often when there is
- too many switch cases
- too many parentheses in regular expression
- array initializer too large
- too much recursion.
- too much data and the stack exceeds its critical size.
In the mentioned scenarios, the JavaScript engine becomes overwhelmed, leading to the occurrence of an Internal Error.

switch(condition) {
    case 1:
    ...
    break
    case 2:
    ...
    break
    case 3:
    ...
    break
    case 4:
    ...
    break
    case 5:
    ...
    break
    case 6:
    ...
    break
    case 7:
    ...
    break
    ... up to 500 cases
    }

7. Evaluation Error (Deprecated):

EvalError is deprecated and not commonly used in modern JavaScript. It was intended to represent errors that occur with the eval() function.
Current JavaScript engines and EcmaScript specifications do not throw this error.
However, it is still available for backward compatibility. The error is called when the eval() backward

// Example of eval error
try{
  throw new EvalError("'Throws an error'")
}catch(error){
  console.log(error.name, error.message)
}

EvalError 'Throws an error'

To wrap it up, dealing with JavaScript errors is like having a helpful friend guide you in your coding adventure. Instead of seeing errors as big problems, think of them as tips showing you how to make your code stronger. When you learn about and fix these issues, you're not just making things right; you're getting really good at making sure your code talks nicely to the computer. Keep enjoying your coding journey!

Important Links:

What is Firebase? Products, Features & Preference.

Sharif — Wed, 01 Mar 2023 16:43:16 +0000

What is Firebase

Firebase is an application development platform which offers active Backend-as-a-Service (BaaS) for building dynamic web and mobile applications. Firebase was developed by Firebase, Inc. in 2011 which is now acquired by Google.

Firebase Products

Firebase provides a wide range of products or services that include:

Real-time Database: A cloud-based NoSQL database that allows developers to store and sync data across multiple devices in real-time.
Authentication: A set of tools that allow developers to easily implement user authentication in their apps, including email and password authentication, as well as support for popular social media platforms such as Google, Facebook, and Twitter.
Cloud Firestore: A flexible, scalable NoSQL cloud database that stores and syncs data in real-time.
Cloud Storage: A scalable and secure object storage service for storing and retrieving files, such as images and videos.
Cloud Functions: A serverless platform for building and deploying backend code, such as triggers for events in the Firebase Real-time Database or Cloud Storage.
Hosting: A fully-managed hosting service for deploying web apps and static content to a global network of edge locations.
Analytics: A powerful analytics platform that allows developers to track and understand user behavior in their apps, including demographics, user engagement, and revenue.
Crashlytics: A real-time crash reporting service that allows developers to quickly identify and fix issues in their apps.
ML Kit: A set of machine learning tools that allow developers to add advanced features such as text recognition, image labeling, and face detection to their apps.

Why do most people prefer Firebase?

Many people use Firebase because it provides a comprehensive and easy-to-use set of tools and services that help them build and deploy their apps quickly and easily. The platform is particularly popular with web & mobile app developers, as it allows them to easily add features such as user authentication, real-time data syncing, and analytics to their apps without having to build and maintain their own backend infrastructure. Additionally, Firebase is built on Google's infrastructure and is therefore highly scalable and secure.

Conclusion

In short, Firebase is a powerful and flexible platform that provides a wide range of services to help developers build and deploy their apps quickly and easily, making it one of the most popular development platforms available today.

HTTP Methods In A Nutshell

Sharif — Sun, 23 Oct 2022 10:50:51 +0000

The HyperText Transfer Protocol is designed to enable communications between clients and servers. The protocol works by clients sending requests to the servers and servers responding to the requests. We do CRUD operations by sending HTTP requests with different HTTP methods. Sometimes it is also called HTTP verbs.

Types of HTTP Methods:
GET
POST
PUT
PATCH
DELETE
HEAD
OPTIONS
TRACE
CONNECT

GET Method
If we want to retrieve data from a resource like websites, servers or APIs, we send them a GET Request. For example, we send a GET request to the server if we want a list of our users or a specific user from the database.

Example:

POST Method
The POST method creates a new resource on the backend. The request body carries the data we want to the server. It is neither a safe nor idempotent method. We don't expect to get the same result every time we send a POST request.

Example:

PUT Method
With the PUT request method, we can update an existing resource by sending the updated data as the content of the request body to the server. The PUT method updates a resource by replacing its entire content completely.

Example:

PATCH Method
PATCH is another HTTP method which is similar to PUT. But it is used to update data partially and not entirely. Such as, a product has some properties like name, price, type, brand, etc. We want to update the value of product price by PATCH method not the whole product properties.

Example:

body JSON: {
“price” : 299,
}

DELETE Method
The DELETE method deletes resources. The DELETE method is idempotent; regardless of the number of calls, it returns the same result.

Example:

HEAD Method
The HEAD method is similar to the GET method. But it does not have any response body, so if it mistakenly returns the response body, it must be ignored. One of the advantages of the HEAD method is that we can test the server if it is available and accessible as long as the API supports it, and it is much faster than the GET method because it has no response body.

OPTIONS Method
Options method is used to get information about the possible communication options (Permitted HTTP methods) for the given URL in the server to refer to the entire server. This method is safe and idempotent. Modern browsers widely use the OPTIONS method to check whether the CORS (Cross-Origin Resource Sharing) operation is restricted on the targeted API or not.

TRACE Method
The TRACE method is used to perform a message loop-back test that tests the path for the target resource. It is useful for debugging purposes. The TRACE method could be dangerous because it could reveal credentials. A hacker could steal credentials, including internal authentication headers, using a client-side attack.

CONNECT Method
The Connect method is for making end-to-end connections between a client and a server. It makes a two-way connection like a tunnel between them. For example, we can use this method to safely transfer a large file between the client and the server.

DEV Community: Sharif

Mastering TypeScript Utility Types

Common TypeScript Utility Types

1. Partial<T>

2. Required<T>

3. Readonly<T>

4. Record<K, T>

5. Pick<T, K>

6. Omit<T, K>

7. Exclude<T, U>

8. Extract<T, U>

9. NonNullable<T>

10. ReturnType<T>

11. Parameters<T>

12. ConstructorParameters<T>

13. InstanceType<T>

14. Awaited<T>

15. NoInfer<T>

Wrapping Up

References

Understanding the types of JavaScript errors

1. Syntax Error:

2. Reference Error:

3. Type Error:

4. Range Error:

5. URI Error

6. Internal Error

7. Evaluation Error (Deprecated):

Important Links:

What is Firebase? Products, Features & Preference.

What is Firebase

Firebase Products

Why do most people prefer Firebase?

Conclusion

HTTP Methods In A Nutshell

1. `Partial<T>`

2. `Required<T>`

3. `Readonly<T>`

4. `Record<K, T>`

5. `Pick<T, K>`

6. `Omit<T, K>`

7. `Exclude<T, U>`

8. `Extract<T, U>`

9. `NonNullable<T>`

10. `ReturnType<T>`

11. `Parameters<T>`

12. `ConstructorParameters<T>`

13. `InstanceType<T>`

14. `Awaited<T>`

15. `NoInfer<T>`