TypeScript & Frontend

Why any Defeats the Purpose of TypeScript

TypeScript has irreversibly transformed the frontend and Node.js development ecosystem. By adding static typing to JavaScript’s otherwise loosely typed nature, the language enables developers to catch errors while writing code (compile time) rather than during execution in the browser (runtime).

However, in many large codebases, we see a phenomenon known as “TypeScript fatigue.” Developers struggle with complex data structures, become frustrated with the compiler, and too quickly resort to the escape hatch: the any type. Using any effectively disables the compiler and reintroduces the very bugs that TypeScript was designed to prevent.

To use TypeScript effectively at scale in enterprise applications, especially alongside frameworks such as React or Angular, developers must move beyond basic interfaces and embrace advanced type systems. Features such as Generics, Utility Types, and Conditional Types allow code to remain reusable, dynamic, and fully type-safe.

The Power of Generics in Reusable Code

Generics allow you to write functions or classes that work with different data types without sacrificing type safety. A classic example is an API fetch function.

Without generics, you would either have to mark the response as any or create a separate function for every API endpoint. Generics solve this elegantly:

TypeScript
1
async function fetchApiData<T>(url: string): Promise<T> {
2
const response = await fetch(url);
3
return await response.json();
4
}
5
6
// Usage:
7
const users = await fetchApiData<User[]>(‘/api/users’);
8
// ‘users’ is now perfectly typed as an array of User objects.

By providing the type argument <T>, the compiler knows exactly which properties are available in the returned data. As a result, your code editor (such as VS Code) can provide accurate autocomplete suggestions and warn you about type errors before they make it into production.

Transforming Data with Utility Types

In enterprise applications, you often have data models where only a subset of properties is required for a specific screen or feature.

For example, suppose you have a User interface containing an ID, name, email address, and password. When creating a user update form, you typically do not need the ID or password in the request payload. Instead of creating and maintaining a duplicate interface such as UserUpdateForm, TypeScript provides several powerful built-in Utility Types.

  • Partial<T>: Makes all properties of a type optional. Perfect for update APIs and PATCH requests.
  • Pick<T, Keys>: Selects specific properties from a type.
TypeScript
1
type UserProfile = Pick<User, ‘name’ | ’email’>;
  • Omit<T, Keys>: Excludes specific properties from a type.
TypeScript
1
type SafeUser = Omit<User, ‘password’>;

By using these operators, you maintain a Single Source of Truth. If a field is added to or modified in the central User model in the future, that change automatically propagates to all derived types, resulting in a highly maintainable codebase.

Discriminated Unions and State Management

When managing complex application state, for example in React or Redux, it is crucial to know exactly which stage a process is currently in: loading, success, or error.

Many developers model this using separate boolean flags such as:

TypeScript
1
isLoading: true,
2
hasError: false

This approach can lead to impossible application states. For example, isLoading might be true while data has already been successfully loaded.

A more advanced TypeScript pattern is the Discriminated Union.

By dividing state into strictly separated types connected through a shared identifier, typically a type or status property, the compiler can enforce correct behavior. For example, it ensures that an error message can only be accessed when the state is actually "error".

This advanced compiler support makes many type-validation unit tests unnecessary and helps guarantee a robust, predictable application state.

Learn more about these and other technologies on Frankwatching.

Related articles

Verified by MonsterInsights