Optional and readonly
📚 What are Optional and Readonly Properties in TypeScript? Optional properties (name?: string) can be present or absent in an object. If the value is not provided, it will be undefined. Readonly properties (readonly id: number) can be set when the object is created but cannot be changed afterwards…
Appy Says…
Not every field on an object is required. A user might not have a profile picture. An event might not have an end time. TypeScript lets you mark properties as optional — and then reminds you to handle the case where they're missing.
What are Optional Properties?
In TypeScript interfaces and types, adding ? after a property name makes it optional — the property may or may not exist on the object.
- •
interface User { name: string; avatar?: string; } - •Optional means the value is
string | undefined - •Access safely:
user.avatar?.toUpperCase()— optional chaining - •Nullish coalescing:
user.avatar ?? '/default.png' - •TypeScript errors if you use optional property without handling undefined
- •Different from
null: optional means the key may be absent;nullmeans the key is present but empty
Think of it like optional Minecraft enchantments
A sword always has a name and damage stat. But enchantments are optional — a sword might have Sharpness or it might not. TypeScript optional properties model exactly this: required fields always there, optional ones might be absent.
How It Works
- •1. Mark optional:
interface Config { timeout?: number; retries?: number; } - •2. Create without optional:
const config: Config = {};— valid - •3. Access:
config.timeout— type isnumber | undefined - •4. Guard:
if (config.timeout !== undefined) { ... } - •5. Optional chaining:
config.timeout?.toString() - •6. Default:
const timeout = config.timeout ?? 5000;
Real-World Examples
- •User profile:
{ name: string; bio?: string; website?: string; } - •API response:
{ data: T; error?: string; } - •React component props:
{ label: string; icon?: React.ReactNode; onClick?: () => void; } - •Database record:
{ id: number; deletedAt?: Date; }
Key Facts
- •Optional properties exist only in TypeScript — JavaScript has no concept of required vs optional object keys
- •
Required<T>utility type removes all?;Partial<T>makes all properties optional - •Optional chaining
?.and nullish coalescing??are JavaScript features that pair naturally with TypeScript optional properties - •Exact types (non-optional): TypeScript interfaces don't enforce that extra properties are absent — use
satisfiesor exact type libraries for that
Watch Out!
Don't make everything optional to silence TypeScript errors. If a field is truly required for the object to make sense, keep it required. Optional properties should reflect genuinely optional data — overusing them weakens TypeScript's guarantees.
Remember
prop?: Type = the property may be absent (value is Type | undefined). Always handle the undefined case with optional chaining ?. or nullish coalescing ??.
What You Learned
- •Optional properties:
name?: string— value isstring | undefined; property may be absent - •Handle with optional chaining
?., nullish coalescing??, or explicit undefined checks - •Unlocks: flexible object shapes, partial configs, optional React props, nullable DB fields
Key Facts
- →Optional properties exist only in TypeScript — JavaScript has no concept of required vs optional object keys
- →
Required<T>utility type removes all?;Partial<T>makes all properties optional - →Optional chaining
?.and nullish coalescing??are JavaScript features that pair naturally with TypeScript optional properties - →Exact types (non-optional): TypeScript interfaces don't enforce that extra properties are absent — use
satisfiesor exact type libraries for that
Real-World Examples
Remember
prop?: Type = the property may be absent (value is Type | undefined). Always handle the undefined case with optional chaining ?. or nullish coalescing ??.
Quick Quiz
name?: string means?