Objects in TypeScript
Objects in TypeScript
Section titled “Objects in TypeScript”Object Type Syntax
Section titled “Object Type Syntax”// Inline object typefunction printCoord(pt: { x: number; y: number }): void { console.log(`X: ${pt.x}, Y: ${pt.y}`);}
printCoord({ x: 10, y: 20 });
// Type alias for objecttype Point = { x: number; y: number };
// Interface for objectinterface Point3D { x: number; y: number; z: number;}Property Modifiers
Section titled “Property Modifiers”// Optional propertiesinterface Config { url: string; timeout?: number; // Optional retries?: number; // Optional}
// Readonly propertiesinterface User { readonly id: string; // Cannot be changed after creation name: string; email: string;}
const user: User = { id: "1", name: "Alice", email: "alice@example.com" };// user.id = "2"; // ❌ Error: Cannot assign to 'id' because it is a read-only propertyIndex Signatures
Section titled “Index Signatures”// Dynamic property namesinterface StringDictionary { [key: string]: string;}
const translations: StringDictionary = { hello: "Hola", goodbye: "Adiós",};
// Mixed index signaturesinterface NumberDictionary { [index: string]: number | string; length: number; name: string;}Excess Property Checks
Section titled “Excess Property Checks”interface User { name: string; age: number;}
// TypeScript checks for extra propertiesconst user: User = { name: "Alice", age: 30, email: "alice@test.com" };// ❌ Error: Object literal may only specify known properties
// Workaround: Use intermediate variableconst userData = { name: "Alice", age: 30, email: "alice@test.com" };const user2: User = userData; // OK — only checks structural compatibilityNested Objects
Section titled “Nested Objects”interface Address { street: string; city: string; zipCode: string;}
interface Employee { id: number; name: string; address: Address; // Nested object department: { id: number; name: string; }; // Inline nested type}Real Project Example
Section titled “Real Project Example”// API response with nested objectsinterface ApiResponse<T> { data: T; meta?: { page: number; totalPages: number; totalItems: number; }; error?: { code: string; message: string; details?: Record<string, string[]>; };}
// Strict config objectinterface AppConfig { readonly appName: string; readonly version: string; api: { baseUrl: string; timeout: number; headers?: Record<string, string>; }; features: { darkMode: boolean; analytics: boolean; betaFeatures?: string[]; };}Common Mistakes
Section titled “Common Mistakes”| Mistake | Fix |
|---|---|
| Object literal excess property errors | Use intermediate variables or spread |
| Not using readonly for fixed properties | Add readonly modifier |
| Forgetting optional chaining for nested objects | Use object?.property?.subProperty |
Interview Questions
Section titled “Interview Questions”Easy: How do you define an object type in TypeScript?
Medium: What is excess property checking and when does it occur?
Hard: How do index signatures work? When would you use them?