Microsoft

TypeScript Fundamentals

TypeScript is a typed superset of JavaScript that compiles to plain JS — it catches type errors at compile time rather than runtime, enables intelligent IDE tooling (autocomplete, refactoring, go-to-definition), and has become the industry standard for production JavaScript applications.

Generics

Generics let you write functions, classes, and types that work with any type while preserving type safety — the type parameter <T> acts as a variable at the type level, inferred from usage or constrained with extends to require specific shapes.

Type Guards & Narrowing

Type narrowing is TypeScript's ability to refine broad types into specific ones within conditional blocks — typeof checks primitives, instanceof checks classes, in checks properties, and custom type predicates (param is Type) enable reusable narrowing logic for discriminated unions and complex shapes.

Utility Types

TypeScript ships built-in utility types that transform existing types — Partial makes all properties optional, Pick/Omit select or exclude properties, Record constructs object types, and ReturnType/Parameters extract function signatures, all implemented using mapped and conditional types under the hood.

Conditional Types

Conditional types use the syntax T extends U ? X : Y to branch at the type level — combined with the infer keyword to extract types from patterns and distributive behavior over unions, they power most of TypeScript's built-in utility types.

Closures

A closure is a function that retains access to variables from its outer (enclosing) scope even after the outer function has returned, enabled by JavaScript's lexical scoping.

Modules

ES Modules use static import/export resolved at parse time (enabling tree-shaking), while CommonJS uses dynamic require()/module.exports resolved at runtime — ESM is the modern standard, but both coexist in 2025.

Hooks

Hooks let functional components manage state (useState), run side effects (useEffect), access refs (useRef), and extract reusable logic into custom hooks — all following strict rules about call order.

Accessibility (a11y)

Accessible React apps start with semantic HTML elements, use ARIA attributes only when native semantics fall short, manage focus programmatically for dynamic content, and ensure full keyboard navigation — interviewers test whether you treat a11y as an afterthought or a first-class concern.

Error Boundaries

Error boundaries are class components that catch JavaScript errors during rendering and lifecycle methods, displaying a fallback UI instead of crashing the entire app — but they don't catch errors in event handlers, async code, or SSR.

Flexbox Layout

Flexbox is a one-dimensional layout model for distributing space and aligning items along a main axis and cross axis, with container properties controlling flow direction and item properties controlling grow, shrink, and basis behavior.

Responsive Design Fundamentals

Responsive design combines the viewport meta tag, media queries, fluid units (%, vw, rem, clamp()), and mobile-first methodology to create layouts that adapt gracefully from mobile screens to large desktops.

Core Web Vitals & Performance Metrics

Core Web Vitals are Google's three key metrics (LCP, INP, CLS) that measure real-world user experience for loading speed, interactivity, and visual stability, directly impacting search rankings.

React Testing Library

Testing React components the way users interact with them using React Testing Library's query priority hierarchy, userEvent for realistic interactions, and the philosophy of testing behavior over implementation details.