TypeScript has evolved from a simple JavaScript superset to a powerful type system that enables sophisticated type-level programming. This article explores advanced TypeScript features that can transform how you write and maintain code.
Generics: Type-Safe Reusable Code
Generics allow you to create flexible, reusable components that maintain type safety:
// Basic generic function
function identity<T>(arg: T): T {
return arg;
}
// Generic interface
interface Container<T> {
value: T;
getValue(): T;
}
// Generic class
class Queue<T> {
private data: T[] = [];
push(item: T): void {
this.data.push(item);
}
pop(): T | undefined {
return this.data.shift();
}
}
Utility Types: Type Transformations
TypeScript provides powerful utility types for common type transformations:
// Partial - makes all properties optional
type PartialUser = Partial<User>;
// Required - makes all properties required
type RequiredUser = Required<PartialUser>;
// Pick - selects specific properties
type UserCredentials = Pick<User, "email" | "password">;
// Omit - excludes specific properties
type PublicUser = Omit<User, "password" | "ssn">;
// Record - creates object type with specific keys and values
type StatusMap = Record<"loading" | "success" | "error", string>;
// ReturnType - extracts return type of function
type ApiResponse = ReturnType<typeof fetchUser>;
Conditional Types: Dynamic Type Logic
Conditional types enable type-level decision making:
// Basic conditional type
type NonNullable<T> = T extends null | undefined ? never : T;
// Type inference with conditional types
type ElementType<T> = T extends (infer U)[] ? U : never;
// Multiple conditions
type TypeName<T> = T extends string
? "string"
: T extends number
? "number"
: T extends boolean
? "boolean"
: T extends undefined
? "undefined"
: T extends Function
? "function"
: "object";
Mapped Types: Transforming Object Types
Mapped types allow you to transform object types systematically:
// Readonly mapped type
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
// Optional mapped type
type Partial<T> = {
[P in keyof T]?: T[P];
};
// Custom transformations
type Getters<T> = {
[P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
};
// Filtering properties
type MethodsOnly<T> = {
[P in keyof T as T[P] extends Function ? P : never]: T[P];
};
Template Literal Types: String Type Manipulation
Template literal types enable sophisticated string type operations:
// Basic template literal type
type Greeting = `Hello, ${string}!`;
// Union of template literal types
type EventName = `on${Capitalize<"click" | "hover" | "focus">}`;
// Complex string transformations
type PathParams<T extends string> =
T extends `${string}:${infer Param}/${infer Rest}`
? Param | PathParams<Rest>
: T extends `${string}:${infer Param}`
? Param
: never;
// Example usage
type Params = PathParams<"/users/:id/posts/:postId">; // 'id' | 'postId'
Advanced Type Inference
TypeScript's inference system can be leveraged for complex type operations:
// Inferring function parameters
type Parameters<T extends (...args: any) => any> = T extends (
...args: infer P
) => any
? P
: never;
// Inferring return types
type ReturnType<T extends (...args: any) => any> = T extends (
...args: any
) => infer R
? R
: any;
// Inferring promise types
type Awaited<T> = T extends Promise<infer U> ? U : T;
// Inferring array element types
type ArrayElement<T> = T extends (infer U)[] ? U : never;
Type Guards and Narrowing
Advanced type guards for runtime type checking:
// Custom type guard
function isString(value: unknown): value is string {
return typeof value === "string";
}
// Discriminated union type guard
type Shape =
| { kind: "circle"; radius: number }
| { kind: "rectangle"; width: number; height: number };
function isCircle(shape: Shape): shape is Extract<Shape, { kind: "circle" }> {
return shape.kind === "circle";
}
// Exhaustive checking
function assertNever(x: never): never {
throw new Error(`Unexpected object: ${x}`);
}
Advanced Generic Constraints
Complex generic constraints for sophisticated type requirements:
// Constraint with multiple requirements
function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
// Conditional constraints
type Constraint<T> = T extends string ? T : never;
// Recursive constraints
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
// Branded types for type safety
type UserId = string & { readonly brand: unique symbol };
type PostId = string & { readonly brand: unique symbol };
function createUserId(id: string): UserId {
return id as UserId;
}
Type-Level Programming
Advanced techniques for type-level computations:
// Type-level arithmetic
type Add<A extends number, B extends number> = [
...Array<A>,
...Array<B>,
]["length"];
// Type-level string manipulation
type Capitalize<S extends string> = S extends `${infer F}${infer R}`
? `${Uppercase<F>}${R}`
: S;
// Type-level object manipulation
type Paths<T> = T extends object
? {
[K in keyof T]: `${string & K}` | `${string & K}.${Paths<T[K]>}`;
}[keyof T]
: never;
Practical Applications
Real-world examples of advanced TypeScript usage:
// API client with type safety
type ApiResponse<T> = {
data: T;
status: number;
message: string;
};
class ApiClient {
async get<T>(url: string): Promise<ApiResponse<T>> {
const response = await fetch(url);
return response.json();
}
}
// Form validation with type inference
type ValidationRule<T> = {
required?: boolean;
minLength?: number;
pattern?: RegExp;
custom?: (value: T) => boolean;
};
type FormSchema<T> = {
[K in keyof T]: ValidationRule<T[K]>;
};
function createForm<T>(schema: FormSchema<T>) {
// Implementation with full type safety
}
Best Practices and Patterns
Advanced patterns for maintainable TypeScript code:
// Builder pattern with type safety
class QueryBuilder<T> {
private conditions: Array<(item: T) => boolean> = [];
where<K extends keyof T>(key: K, value: T[K]): this {
this.conditions.push((item) => item[key] === value);
return this;
}
build(): (item: T) => boolean {
return (item) => this.conditions.every((condition) => condition(item));
}
}
// Factory pattern with type inference
type ComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;
function createComponent<T extends React.ComponentType<any>>(
component: T,
props: ComponentProps<T>,
): React.ReactElement {
return React.createElement(component, props);
}
Conclusion
Advanced TypeScript features enable you to create sophisticated, type-safe applications. The type system becomes a powerful tool for catching errors at compile time and providing excellent developer experience through intelligent autocomplete and refactoring support.
Mastering these advanced features allows you to:
- Create more robust and maintainable code
- Catch errors before runtime
- Provide better developer experience
- Build self-documenting APIs
- Enable powerful refactoring capabilities
As you continue exploring TypeScript's advanced features, remember that the goal is not to create the most complex types possible, but to create types that make your code more reliable and easier to work with.