eck the value before treating it as a specific type. ```typescript function processValue(value: unknown) { if (typeof value === "string") { console.log(value.toUpperCase()); } } ``` This forces you to establish what the value actually is. The TypeScript documentation specifically describes `unknown` as useful for values whose type is not known ahead of time and notes that such values can be narrowed with checks. :contentReference[oaicite:3]{index=3} --- # 16. A Practical API Example Suppose a frontend application receives this API response: ```json { "id": 101, "name": "Amit", "role": "Software Engineer" } ``` You could model it like this: ```typescript interface Developer { id: number; name: string; role: string; } ``` Then: ```typescript async function getDeveloper(): Promise { const response = await fetch("/api/developer"); return response.json(); } ``` Now code using the function knows what it should receive: ```typescript const developer = await getDeveloper(); console.log(developer.name); console.log(developer.role); ``` This makes the API contract visible in the code. --- # 17. TypeScript in a React Application TypeScript becomes especially useful in frontend applications. For example, a component can describe its props: ```typescript interface UserCardProps { name: string; role: string; experience: number; } function UserCard({ name, role, experience }: UserCardProps) { return (

{name}

{role}

{experience} years

); } ``` Now a developer using the component gets immediate feedback if the required props are missing or incorrectly typed. This becomes increasingly valuable as React applications grow. --- # 18. TypeScript for Backend Development TypeScript is not limited to frontend development. It is also useful for Node.js backend applications. For example: ```typescript interface CreateUserRequest { name: string; email: string; age: number; } ``` An API handler can use that model: ```typescript function createUser(data: CreateUserRequest) { console.log(data.name); console.log(data.email); console.log(data.age); } ``` The same type-driven approach can be applied to: - API requests - API responses - database models - service functions - configuration - authentication data - event payloads --- # 19. Type Composition TypeScript allows developers to create new types from existing ones. For example: ```typescript interface User { id: number; name: string; email: string; } ``` You can create another type: ```typescript type UserPreview = Pick; ``` Now: ```typescript const user: UserPreview = { id: 1, name: "Amit" }; ``` This is useful when different parts of an application need different views of the same data. TypeScript's type system includes tools such as `keyof`, indexed access types, conditional types, mapped types, and template literal types for creating types from other types. :contentReference[oaicite:4]{index=4} --- # 20. A Simple Developer Workflow A practical TypeScript workflow can look like this: ```mermaid flowchart LR A["JavaScript Code"] --> B["Add Types"] B --> C["TypeScript Compiler"] C --> D{"Type Errors?"} D -->|Yes| E["Fix Code"] E --> C D -->|No| F["JavaScript Output"] F --> G["Run Application"] ``` The key idea is that TypeScript checks your code before the resulting JavaScript executes. --- # 21. Common TypeScript Mistakes ## Mistake 1: Using `any` everywhere ```typescript function processUser(user: any) { return user.name; } ``` This removes useful type information. Prefer: ```typescript interface User { name: string; } function processUser(user: User) { return user.name; } ``` --- ## Mistake 2: Overusing type assertions You may see: ```typescript const user = value as User; ``` A type assertion tells TypeScript to treat the value as a particular type. It d

TypeScript Fundamentals: Types, Interfaces, Unions, and Generics