TypeScript Syntax

TypeScript Syntax Overview

Type annotations follow a colon pattern: variableName: Type. Functions annotate parameters and optionally return types. Interfaces and type aliases declare reusable shapes using familiar object and union syntax.

TypeScript also supports access modifiers on classes, generics in angle brackets, and utility types. Most everyday code looks like JavaScript with strategic type markers on boundaries.

TypeScript Syntax Example

interface Book {
  title: string;
  pages: number;
  published?: boolean;
}

type BookId = string;

function summarize(book: Book): string {
  const status = book.published ? "published" : "draft";
  return `${book.title} (${book.pages} pages, ${status})`;
}

Interfaces define object shapes, type aliases name unions or primitives, and functions combine both. Optional properties use ? and integrate naturally with control flow.

When to Use TypeScript Syntax

• Reading unfamiliar TypeScript codebases
• Deciding between interface and type alias syntax
• Annotating function signatures clearly
• Declaring optional and readonly modifiers
• Writing generic utility functions
• Reviewing pull requests for type clarity

Best Practices

• Place types close to the values they describe
• Use PascalCase for interfaces and type aliases
• Prefer readonly for immutable configuration objects
• Keep union types readable with named aliases
• Use optional chaining (?.) with nullable types
• Document complex types with brief comments
• Align syntax style with team lint rules

Common Mistakes to Avoid

• Putting types on the wrong side of the colon
• Using semicolons inconsistently in type literals
• Confusing type assertions with type annotations
• Overusing intersection types where interface extension is clearer
• Mixing default export types with named imports incorrectly
• Annotating return types that inference handles well locally
• Using reserved words as unquoted object keys without care

Key Takeaways

• TypeScript syntax extends JavaScript rather than replacing it
• Annotations use the name: Type pattern
• Interfaces and type aliases model data shapes
• Generics add parameters to types
• Unions express multiple valid types
• Readable syntax improves team collaboration