Frontend Web Development TypeScript Flashcards

24 sample cards from the TypeScript deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. 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.

2. 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'.

3. What does NonNullable<T> do?

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

4. 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.

5. 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).

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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).

16. 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.

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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) => {...}.

23. 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.

24. 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.

What this deck covers

TypeScript flashcards FAQ