Frontend Web Development TypeScript Syllabus

TypeScript syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for TypeScript in Frontend Web Development, not a summary of it.

1. 1

   TypeScript Fundamentals

   4 topics

   • Type Annotations & Inference
   • Primitive & Special Types
   • Arrays, Tuples & Enums
   • Functions & Return Types
2. 2

   Interfaces & Types

   4 topics

   • Interfaces vs Type Aliases
   • Optional & Readonly Properties
   • Union & Intersection Types
   • Type Narrowing & Guards
3. 3

   Advanced Types

   4 topics

   • Generics
   • Utility Types
   • Mapped & Conditional Types
   • Type Assertions & unknown
4. 4

   TypeScript Tooling & Config

   3 topics

   • tsconfig.json & Compiler Options
   • Declaration Files & @types
   • TypeScript with React

TypeScript flashcards for Frontend Web Development

20 of 60 cards from the TypeScript deck — real questions with worked answers.

1. What is the difference between type annotation and type inference in TypeScript?

   A type annotation is an explicit declaration of a variable's type using a colon (e.g. let x: number). Type inference is when the compiler automatically deduces the type from the assigned value (e.g. let x = 5 is inferred as number).

2. When you declare a variable with no initializer and no annotation, what type does TypeScript infer?

   It infers the type any (implicitly). With noImplicitAny enabled this is flagged; the type is later widened based on control-flow assignments.

3. What is 'contextual typing' in TypeScript?

   Inference that flows from the location (context) of an expression to determine its type, e.g. the parameters of a callback passed to addEventListener are inferred from the event type without annotation.

4. List the seven primitive types in TypeScript.

   string, number, boolean, bigint, symbol, null, and undefined.

5. What is the difference between the special types any and unknown?

   any disables all type checking and is assignable to/from anything. unknown is the type-safe counterpart: any value is assignable to unknown, but unknown cannot be used or assigned to other types without first narrowing it.

6. What does the never type represent, and give one example of where it appears.

   never represents values that never occur. It is the return type of a function that always throws or has an infinite loop, and the type of a variable narrowed to an impossible state (e.g. in exhaustiveness checks).

7. What is the void type used for in TypeScript?

   void represents the absence of a return value; it is the inferred return type of functions that do not return anything meaningful (return undefined).

8. How do you declare an array of numbers two different ways in TypeScript?

   Using the shorthand number[] or the generic form Array<number>.

9. What is a tuple in TypeScript and how is it declared?

   A tuple is a fixed-length array with known types at each position, e.g. let pair: [string, number] = ['age', 30]. Element order and types are enforced.

10. How do you make a tuple element optional or use a rest element in a tuple?

    Optional: [string, number?]. Rest: [string, ...number[]], which allows a leading string followed by any number of numbers.

11. What is the difference between a numeric enum and a string enum in TypeScript?

    A numeric enum auto-assigns incrementing numbers starting at 0 (or a set value) and supports reverse mapping (value->name). A string enum requires explicit string values and has no reverse mapping.

12. What is a const enum and its main benefit?

    A const enum (const enum Direction {...}) is fully inlined at compile time, producing no runtime object. It reduces generated code size but cannot be used in all scenarios (e.g. with isolatedModules).

13. How do you annotate the parameters and return type of a function in TypeScript?

    Place a colon after each parameter and after the parameter list, e.g. function add(a: number, b: number): number { return a + b; }

14. How do you type a function expression / variable holding a function?

    Use a function type signature: const add: (a: number, b: number) => number = (a, b) => a + b.

15. How do you declare optional and default parameters in a TypeScript function?

    Optional: mark with ? (e.g. function f(a: number, b?: number)). Default: assign a value (e.g. function f(a: number, b = 10)). Optional and defaulted params must follow required ones.

16. What is a function overload in TypeScript?

    Multiple overload signatures declared above a single implementation signature, allowing a function to be called with different argument/return type combinations, e.g. two signatures for reverse(x: string): string and reverse(x: number[]): number[].

17. State two key differences between an interface and a type alias.

    1) Interfaces support declaration merging (re-opening to add members); type aliases do not. 2) Type aliases can represent unions, tuples, primitives, and mapped types, while interfaces can only describe object shapes.

18. How do interfaces and type aliases each achieve composition/inheritance?

    Interfaces use the extends keyword to inherit. Type aliases use intersection with & to combine, e.g. type C = A & B.

19. What is declaration merging with interfaces?

    Declaring the same interface name multiple times merges their members into a single interface. This is commonly used to augment existing types like Window or third-party library types.

20. How do you mark a property as optional versus readonly in an interface?

    Optional: append ? to the name (name?: string) — property may be absent. Readonly: prefix with readonly (readonly id: number) — property can be set at creation but not reassigned.

See more TypeScript flashcards →

Planning TypeScript for Frontend Web Development

TypeScript (Frontend Web Development) FAQ