Frontend Web Development TypeScript Syllabus

Does the readonly modifier provide deep (runtime) immutability?

No. readonly is a compile-time-only check that prevents reassignment of the property itself. Nested objects/arrays remain mutable, and there is no runtime enforcement.

What is the utility type ReadonlyArray<T> (or readonly T[]) and why use it?

It is an array type whose elements cannot be reassigned and whose mutating methods (push, pop, splice) are removed, ensuring the array is not modified.

What is a union type and how is it written?

A union type allows a value to be one of several types, written with the pipe |, e.g. string | number means the value may be a string or a number.

What is an intersection type and how is it written?

An intersection combines multiple types into one that has all their members, written with &, e.g. A & B has every property of both A and B.

What is a discriminated (tagged) union?

A union of object types that share a common literal 'discriminant' property (e.g. kind: 'circle' | 'square'). Checking that property lets TypeScript narrow to the specific member type.

What does type narrowing mean in TypeScript?

The process by which TypeScript refines a value to a more specific type within a code branch, based on control-flow analysis (checks, guards) so unsafe operations are prevented.

Name four common built-in type-narrowing constructs (type guards).

typeof checks, instanceof checks, the in operator, and equality/truthiness checks (===, !=, if(x)). Also Array.isArray and discriminant property checks.

What is a user-defined type guard and how is it written?

A function whose return type is a type predicate 'param is Type', e.g. function isCat(a: Animal): a is Cat { return 'meow' in a; }. When it returns true, TypeScript narrows the argument to Cat.

What is an assertion function in TypeScript?

A function with an 'asserts' return signature (e.g. function assert(cond: unknown): asserts cond) that throws if the condition is false; after the call TypeScript narrows the type accordingly.

What are generics in TypeScript and why are they used?

Generics are reusable type parameters (e.g. function identity<T>(x: T): T) that let functions, classes, and types work over many types while preserving the type relationship between inputs and outputs.

How do you constrain a generic type parameter?

Use extends to require the parameter to satisfy a shape, e.g. function len<T extends { length: number }>(x: T) restricts T to types that have a length property.

What does the keyof operator do?

keyof T produces a union of the literal string/number/symbol keys of type T. For example keyof {a: 1; b: 2} is 'a' | 'b'.

How do you write a generic function that safely gets a property by key?

function get<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } — using the constraint K extends keyof T and the indexed access type T[K].

What do the utility types Partial<T> and Required<T> do?

Partial<T> makes all properties of T optional. Required<T> makes all properties of T required (removes optionality).

What do Pick<T, K> and Omit<T, K> do?

Pick<T, K> constructs a type with only the properties K selected from T. Omit<T, K> constructs a type with all properties of T except the keys in K.

What does Record<K, T> construct?

Record<K, T> builds an object type whose keys are of type K (a union of keys) and whose values are all of type T, e.g. Record<'a' | 'b', number> is { a: number; b: number }.

What do Readonly<T>, ReturnType<T>, and Parameters<T> do?

Readonly<T> makes all properties read-only. ReturnType<T> extracts the return type of a function type T. Parameters<T> extracts the parameter types of a function type as a tuple.

What do Exclude<T, U> and Extract<T, U> do?

Exclude<T, U> removes from union T the members assignable to U. Extract<T, U> keeps only the members of T assignable to U. E.g. Exclude<'a'|'b'|'c', 'a'> is 'b'|'c'.

What does NonNullable<T> do?

NonNullable<T> constructs a type by excluding null and undefined from T.

What is a mapped type and give its basic syntax.

A mapped type transforms each property of a type by iterating over its keys: { [K in keyof T]: T[K] }. Modifiers can be added, e.g. { [K in keyof T]?: T[K] } to make all optional.

How do you add or remove modifiers in a mapped type?

Prefix the modifier with + or -: { -readonly [K in keyof T]-?: T[K] } removes readonly and optionality, while +readonly / +? add them (+ is the default).

What is a key remapping clause in a mapped type?

Using 'as' inside a mapped type to rename keys, e.g. { [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] } generates getter-named properties.

What is a conditional type and its syntax?

A type that selects one of two types based on a condition: T extends U ? X : Y. It resolves to X if T is assignable to U, otherwise Y.

What is the infer keyword used for in conditional types?

infer declares a type variable to be captured within the extends clause of a conditional type, e.g. type ElementType<T> = T extends (infer U)[] ? U : never extracts an array's element type.

What are distributive conditional types?

When the checked type of a conditional type is a naked type parameter and it receives a union, the conditional distributes over each union member individually. Wrapping in a tuple ([T] extends [U]) disables distribution.

What are the two syntaxes for a type assertion, and which is disallowed in .tsx files?

The 'as' syntax (value as Type) and the angle-bracket syntax (<Type>value). The angle-bracket form is disallowed in .tsx files because it clashes with JSX.

What is a const assertion (as const) and its effect?

as const tells TypeScript to infer the narrowest, immutable (readonly) literal type: string literals stay literal, arrays become readonly tuples, and object properties become readonly.

Why is unknown safer than any when handling values of uncertain type?

Because unknown forces you to narrow or assert the type before performing operations, preserving type safety, whereas any silently allows any operation and disables checking, letting runtime errors slip through.

In tsconfig.json, what does the 'strict' compiler option enable?

It turns on the family of strict type-checking options at once, including noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, and useUnknownInCatchVariables.

What does the strictNullChecks compiler option do?

When enabled, null and undefined are not assignable to other types unless explicitly included in the type. This forces handling of nullable values and prevents many null-reference errors.

What do the 'target' and 'module' compiler options control?

target sets the ECMAScript version the emitted JavaScript is compiled down to (e.g. ES2020). module sets the module system for emitted code (e.g. CommonJS, ESNext, NodeNext).

What does 'esModuleInterop' do in tsconfig.json?

It enables interoperability between CommonJS and ES modules by allowing default imports from modules without a default export (e.g. import express from 'express'), emitting helper code for correct interop.

What is the difference between the 'include'/'exclude' and 'files' fields in tsconfig.json?

'files' lists an explicit list of files to compile. 'include'/'exclude' use glob patterns to select and filter which files are part of the program; exclude only removes files that include would otherwise add.

What is a declaration file (.d.ts) and what does it contain?

A .d.ts file contains only type declarations (no implementations). It describes the shape of existing JavaScript code so TypeScript can type-check consumers without the source.

What is the @types scope (DefinitelyTyped) and how do you use it?

@types is the npm scope hosting community-maintained type declarations for JavaScript libraries that lack built-in types. You install them as dev dependencies, e.g. npm install --save-dev @types/lodash.

What does the 'declaration' compiler option do?

When true, it generates corresponding .d.ts declaration files alongside the emitted JavaScript, so the compiled library can be consumed by other TypeScript projects with full type information.

What file extension must a React component file use to contain JSX in TypeScript, and what jsx setting is typical?

The .tsx extension. The tsconfig 'jsx' option is set to 'react-jsx' (the automatic runtime) for modern React, or 'react'/'preserve' for older setups.

How do you type the props of a React function component in TypeScript?

Define an interface or type for the props and annotate the parameter, e.g. function Button({ label }: { label: string }) {...} or const Button: React.FC<Props> = (props) => {...}.

How do you type the useState hook when the initial value is null or needs an explicit type?

Provide the type argument explicitly: const [user, setUser] = useState<User | null>(null). TypeScript otherwise infers the type from the initial value.

What type is commonly used for the children prop and for an event handler in React with TypeScript?

Children: React.ReactNode. Event handlers: typed event objects like React.ChangeEvent<HTMLInputElement> or React.MouseEvent<HTMLButtonElement>, and handler types like React.ChangeEventHandler.