Why TypeScript?
TypeScript adds static typing to JavaScript, catching errors at compile time and improving code quality. Its type system enables better tooling, autocompletion, and documentation, making it a favorite for large-scale applications. Over 78% of developers use TypeScript, according to the 2023 Stack Overflow Survey.
TypeScript Types: The Building Blocks
1 - Basic Types
- TypeScript’s core types define the shape of variables, parameters, and return values
// Primitives
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"]; // Generic syntax
// Tuples (fixed-length arrays)
let user: [string, number] = ["Alice", 30];
// Enums
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE",
} 1 - Advanced Types
- Union (|): A value can be one of several types.
let id: string | number = "abc123";
- Intersection (&): Combines multiple types.
type Admin = { role: "admin" };
type User = { name: string };
type AdminUser = Admin & User; Type Guards and Type Aliases
- Type Guards: Narrow types using typeof, instanceof, or custom checks.
function logId(id: string | number) {
if (typeof id === "string") {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
} - Type Aliases: Create reusable type definitions.
type Point = { x: number; y: number }; any, unknown, and never
- any: Opt-out of type checking (use sparingly!).
- unknown: Safer alternative to any; requires type assertion.
- never: Represents unreachable code (e.g., throwing errors).
Generics: Reusable Type-Safe Code
Generics allow you to write flexible, reusable functions and classes that work with multiple types while preserving type safety.
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("Hello"); // Type is "string" Generic Interfaces and Classes
// Generic Interface
interface ApiResponse<T> {
data: T;
status: number;
}
// Generic Class
class DataStore<T> {
private data: T[] = [];
addItem(item: T) {
this.data.push(item);
}
}
// Usage
const userStore = new DataStore<{ id: number; name: string }>(); Constraints and Default Types
- Constraints: Use extends to limit generics.
interface HasId {
id: number;
}
function logId<T extends HasId>(item: T) {
console.log(item.id);
} - Default Types: Provide fallback types.
interface PaginatedResponse<T = string> {
items: T[];
page: number;
} Real-World Use Cases for TypeScript Generics
async function fetchUser<T>(): Promise<ApiResponse<T>> {
const response = await fetch("/api/user");
return response.json();
} Generics help define typed actions and reducers.
- State Management (e.g., Redux, Zustand)
- Libraries like Lodash or Axios use generics for functions like _.map or axios.get<T>().
type ListProps<T> = {
items: T[];
renderItem: (item: T) => React.ReactNode;
};
function List<T>({ items, renderItem }: ListProps<T>) {
return <div>{items.map(renderItem)}</div>;
} Conclusion
TypeScript’s type system and generics empower developers to write robust, self-documenting code. By leveraging unions, intersections, and generic functions, you can eliminate entire classes of bugs and build scalable applications. Start applying these concepts in your next project, and explore advanced topics like conditional types and mapped types to level up further!