Question 1

How to install TypeScript in a project?

Accepted Answer

1) npm i -D typescript. 2) npx tsc --init will create tsconfig.json. 3) Add scripts: tsc, tsc -w. 4) For Node: npm i -D ts-node. 5) Check: npx tsc -v.

Question 2

What is tsconfig.json and what does it control?

Accepted Answer

1) It is the compiler configuration. 2) target/module define the output JS. 3) strict enables strict checks. 4) include/exclude manage files. 5) paths/baseUrl configure aliases.

Question 3

How do type and interface differ?

Accepted Answer

1) interface extends via extends. 2) interface supports declaration merging. 3) type is convenient for union/intersection. 4) For objects, interface is more common, but not a rule. 5) In practice, choose based on task and team style.

Question 4

What is strict mode in TypeScript and why should you enable it?

Accepted Answer

1) strict enables a set of strict flags. 2) Catches errors with null/undefined and types. 3) Improves autocompletion and refactoring. 4) Enhances code quality in large projects. 5) Enable gradually if the project is old.

Question 5

What is any and why should you avoid it?

Accepted Answer

1) any disables type checking. 2) Errors move to runtime. 3) Instead of any, use unknown, generics, or precise types. 4) For migration, you can temporarily use any but plan to remove it. 5) You can restrict via eslint/tsconfig.

Question 6

How does unknown differ from any?

Accepted Answer

1) unknown is safer: cannot use without checking. 2) Requires narrowing (typeof, in, instanceof). 3) Suitable for external data (JSON). 4) any is a 'hole' in types. 5) With unknown, errors are caught at compile time.

Question 7

How to type the result of JSON.parse?

Accepted Answer

1) JSON.parse returns any. 2) Use unknown and validate structure. 3) Create a type guard or schema (zod). 4) After validation, cast to the desired type. 5) Do not blindly use as YourType without checking.

Question 8

What is type narrowing and how does it work?

Accepted Answer

1) It is narrowing the type in code branches. 2) Use typeof for primitives. 3) Use in/instanceof for objects/classes. 4) Custom type guards also narrow the type. 5) Helps write code without unnecessary casts.

Question 9

How to write a type guard function?

Accepted Answer

1) The function returns an expression of the form x is T. 2) Inside, check fields and types. 3) Use for unknown/union. 4) Keep checks simple and cover with tests. 5) Schema validation (zod) is often more reliable.

Question 10

What are union types and where are they useful?

Accepted Answer

1) Union: A | B. 2) Good for limited sets of values. 3) Often used with a discriminant field. 4) Requires narrowing before accessing specific fields. 5) Improves API expressiveness.

Question 11

What are intersection types and when to use them?

Accepted Answer

1) Intersection: A & B. 2) Combines properties of multiple types. 3) Convenient for compositions and mixins. 4) Be careful with conflicting fields. 5) Commonly found in library types.

Question 12

What are literal types and why are they needed?

Accepted Answer

1) Literal types: 'GET', 200, true. 2) Basis for union of specific values. 3) Useful for statuses, roles, modes. 4) Work with as const. 5) Help avoid typos.

Question 13

Why is as const needed?

Accepted Answer

1) Makes literals immutable and narrow. 2) Turns array into readonly tuple. 3) Useful for configs and dictionaries. 4) Simplifies type inference. 5) Often used with satisfies.

Question 14

What is satisfies and how is it better than 'as'?

Accepted Answer

1) satisfies checks conformity to a type but preserves inference. 2) Doesn't 'narrow' values like as. 3) Useful for configs and mappings. 4) Helps catch key/field errors. 5) Available in TS 4.9+.

Question 15

How to type an object dictionary with fixed keys?

Accepted Answer

1) Use Record. 2) K can be union literals. 3) For partial keys — Partial>. 4) For validation without losing inference — satisfies. 5) For dynamic keys — index signature.

Question 16

What is an index signature and when is it needed?

Accepted Answer

1) {[key: string]: Value}. 2) For objects with unknown keys. 3) Limits the type of all values. 4) Can conflict with specific fields — be careful. 5) Sometimes better to use Map<string, V>.

Question 17

How to type an array with a fixed structure (tuple)?

Accepted Answer

1) Tuple: [number, string]. 2) Can make readonly tuple via as const. 3) For named elements: [id: string, value: number]. 4) Convenient for key-value pairs. 5) For larger structures, better to use interface.

Question 18

What are generics and why are they needed?

Accepted Answer

1) Allow parameterizing types. 2) For example: function first<T>(a: T[]): T. 3) Remove code duplication. 4) Can constrain T via extends. 5) Improve library typing.

Question 19

How to constrain generics using extends?

Accepted Answer

1) <T extends { id: string }>. 2) Then T is guaranteed to have an id. 3) You can constrain with a union. 4) Use extends keyof for keys. 5) Constraints improve autocomplete.

Question 20

How to type the function getProperty(obj, key)?

Accepted Answer

1) <T, K extends keyof T>(obj: T, key: K) => T[K]. 2) keyof gives a set of keys. 3) T[K] returns the type of the value at the key. 4) Works with optional fields too. 5) This is a canonical example of generics.

Question 21

What is keyof and why is it useful?

Accepted Answer

1) keyof T gives a union of the keys of type T. 2) Allows safe indexing. 3) Useful in utility types like Pick/Omit. 4) Helps build type-safe APIs. 5) Works with mapped types.

Question 22

What are mapped types?

Accepted Answer

1) Types like { [K in keyof T]: ... }. 2) Allow transforming fields. 3) They underpin Partial/Required/Readonly. 4) You can change modifiers: -? / +readonly. 5) Powerful tool for libraries.

Question 23

How does Partial<T> work and when to use it?

Accepted Answer

1) Makes all fields optional. 2) Convenient for patch objects (update). 3) Danger: guarantees of field presence are lost. 4) Often better to use Partial>. 5) Good for input forms.

Question 24

What is the difference between Pick and Omit?

Accepted Answer

1) Pick takes a subset of fields. 2) Omit excludes fields. 3) Useful for DTOs and public models. 4) Avoid duplicating structures. 5) Combine with Partial/Required.

Question 25

What is Record<K, V> and where is it useful?

Accepted Answer

1) Record creates an object with keys K and values V. 2) Useful for dictionaries and mappings. 3) K can be a union. 4) For incomplete keys, use Partial>. 5) For strict key checking — satisfies.

Question 26

How to type callback functions?

Accepted Answer

1) Describe the signature: type Fn = (x: number) => string. 2) For events — use library types (React, DOM). 3) For async — Promise<...>. 4) Don't forget optional parameters. 5) Make the return type explicit.

Question 27

How to type Promise and async/await?

Accepted Answer

1) async function returns Promise. 2) Specify the result type: Promise. 3) await unwraps the Promise. 4) Handle errors with try/catch. 5) Don't return any from async chains.

Question 28

What are overloads of functions?

Accepted Answer

1) You can declare multiple signatures. 2) Implementation is one, but types differ. 3) Useful for functions with different modes. 4) Overloads should be compatible. 5) Sometimes easier to use union and narrowing.

Question 29

What is the difference between type assertion (as) and actual type checking?

Accepted Answer

1) as does not check at runtime. 2) It tells the compiler: 'trust me'. 3) Can hide bugs. 4) It's better to validate data first. 5) Use as only when you are sure of the structure.

Question 30

What is non-null assertion (!) and why is it dangerous?

Accepted Answer

1) x! indicates that x is not null/undefined. 2) The compiler stops warning. 3) It can fail at runtime if you are wrong. 4) Better to check with if (x) or optional chaining. 5) Use sparingly and consciously.

Question 31

How does optional chaining (?.) work?

Accepted Answer

1) Allows safe access to nested fields. 2) obj?.a?.b returns undefined if something is missing. 3) Works with function calls: fn?.(). 4) Does not replace business validation. 5) Convenient for UI and API data.

Question 32

How does nullish coalescing (??) work?

Accepted Answer

1) a ?? b takes b only if a is null/undefined. 2) Not confused with 0/''/false like ||. 3) Great for defaults. 4) Often combined with optional chaining. 5) Understand the difference between || and ??.

Question 33

How to type errors in catch in strict mode?

Accepted Answer

1) In TS, catch variable is often unknown. 2) Check: err instanceof Error. 3) Log safely: String(err). 4) For libraries, create your own error types. 5) Do not assume structure without checking.

Question 34

What is discriminated union and how to design it?

Accepted Answer

1) Union with a tag field: type: 'a' | 'b'. 2) In switch on the tag, the type narrows automatically. 3) Useful for events and state. 4) Add exhaustive check (never). 5) One of the best patterns in TS.

Question 35

How to do exhaustive check in switch?

Accepted Answer

1) Assign a variable of type never in default. 2) If a new union variant appears — the compiler will warn. 3) Example: const _exhaustive: never = x. 4) Helps maintain code. 5) Especially useful in reducers.

Question 36

How to type classes and their fields in TypeScript?

Accepted Answer

1) Specify modifiers: public/private/protected. 2) Declare fields in advance or in constructor. 3) Use readonly for immutable fields. 4) Parameter properties: constructor(private api: Api) {}. 5) Do not overuse classes if functions suffice.

Question 37

What is abstract class and interface: which to choose?

Accepted Answer

1) interface describes a contract without implementation. 2) abstract class can contain common implementation. 3) In TS, you can implement multiple interfaces but inherit from one class. 4) For 'ports' and APIs, usually enough to use interface. 5) Abstract is convenient for base components/templates.

Question 38

How to type this in methods and functions?

Accepted Answer

1) In class methods, this is inferred automatically. 2) For functions, specify this parameter: function f(this: X) {}. 3) Arrow functions take this from external context. 4) In callbacks, this is often lost — bind or use arrows. 5) Proper typing catches errors.

Question 39

How does enum work and why is union often recommended instead of enum?

Accepted Answer

1) enum generates runtime code (usually). 2) Can complicate the bundle. 3) Literal unions are simpler and tree-shakable. 4) If a runtime value is needed — you can use enum or const object. 5) const enum speeds up, but is risky for libraries.

Question 40

What is a const enum and what are its risks?

Accepted Answer

1) const enum is inlined into the code. 2) Reduces runtime overhead. 3) Can break when building libraries and with different configurations. 4) Not always compatible with babel/transpileOnly. 5) Often better to use object + as const.

Question 41

How to type higher-order functions (HOF)?

Accepted Answer

1) Generalize input and output types. 2) Keep the signature via generics. 3) For function decorators, use any>. 4) Return Parameters and ReturnType. 5) This provides strong typing.

Question 42

What are ReturnType and Parameters and when are they needed?

Accepted Answer

1) ReturnType takes the function's result type. 2) Parameters takes the tuple of arguments. 3) Useful for wrappers and proxies. 4) Reduces duplication. 5) Works only with function types.

Question 43

How to type a safe event emitter system?

Accepted Answer

1) Create a map: EventName -> payload type. 2) on<K extends keyof Events>(name: K, cb: (p: Events[K]) => void). 3) emit similarly. 4) This way, you avoid type errors in events. 5) A good pattern for frontend and Node.

Question 44

How to type an API client and server responses?

Accepted Answer

1) Define DTO types for responses. 2) Use runtime validation for external data. 3) For fetch, create a request() function returning Promise. 4) Never trust the server without checks. 5) Log and handle status errors.

Question 45

How to type fetch and JSON processing?

Accepted Answer

1) const res = await fetch(url). 2) Check res.ok. 3) const data: unknown = await res.json(). 4) Validate data and then cast to type. 5) Add timeouts/retries separately.

Question 46

How to properly work with DOM types in TS?

Accepted Answer

1) Enable lib: ['DOM']. 2) Use querySelector with generics: document.querySelector<HTMLDivElement>('...'). 3) Check for null. 4) For events, use MouseEvent/KeyboardEvent. 5) Don't cast without necessity.

Question 47

How to type addEventListener and handlers?

Accepted Answer

1) element.addEventListener('click', (e) => { ... }). 2) e has type MouseEvent (for click). 3) Types for window/document are also available. 4) If needed, specify target via instanceof. 5) Don't use any for events.

Question 48

How to type React components in TypeScript?

Accepted Answer

1) Props via interface/type. 2) function Component(props: Props) { ... }. 3) For children: React.ReactNode. 4) For events: React.ChangeEvent<HTMLInputElement>. 5) React.FC is not always necessary.

Question 49

When to use React.FC and when not to?

Accepted Answer

1) React.FC adds children by default. 2) Sometimes this is undesirable. 3) DefaultProps typing differs. 4) Simple functions with Props are usually enough. 5) Choose a consistent style in the project.

Question 50

How to type useState in React?

Accepted Answer

1) useState(0) fixes the type. 2) For nullable: useState(null). 3) For complex objects, an interface is better. 4) Lazy initialization: useState(() => compute()). 5) Avoid any in state.

Question 51

How to type useRef?

Accepted Answer

1) useRef(null). 2) Check ref.current for null. 3) For mutable value: useRef(0). 4) Do not use ref as state. 5) For callbacks, you can use useCallback ref.

Question 52

What is declaration merging and where does it occur?

Accepted Answer

1) An interface can merge by name. 2) Convenient for extending global types. 3) Often used to augment Window/NodeJS.ProcessEnv. 4) Can be a source of conflicts. 5) Control where you declare global types.

Question 53

How to extend the type Window or ProcessEnv?

Accepted Answer

1) Create a d.ts file in the project. 2) declare global { interface Window { ... } }. 3) For env: declare namespace NodeJS { interface ProcessEnv { ... } }. 4) Don't forget export {} in the file. 5) Make sure include sees this file.

Question 54

What are .d.ts files and why are they needed?

Accepted Answer

1) These are type declaration files. 2) Needed for JS libraries without types. 3) Can describe API without implementation. 4) Used by DefinitelyTyped (@types/*). 5) Included via types/include.

Question 55

How to add types for a JS library without @types?

Accepted Answer

1) First check if there are built-in types. 2) If not — create a minimal .d.ts with declare module 'lib'. 3) Gradually refine types as you use them. 4) You can write a wrapper API with strict types. 5) For complex cases — generate from OpenAPI/JSON schema.

Question 56

What is moduleResolution and when to change it?

Accepted Answer

1) Determines how TS searches for modules. 2) NodeNext is needed for ESM/Node 16+. 3) Bundler is suitable for Vite/webpack. 4) Classic is rarely needed. 5) Choice depends on runtime and bundler.

Question 57

How to configure path aliases (paths) in tsconfig?

Accepted Answer

1) Set baseUrl. 2) Add paths: { '@/*': ['src/*'] }. 3) Configure the bundler (webpack/vite) similarly. 4) Configure jest/vitest aliases too. 5) Otherwise, aliases won't work at runtime.

Question 58

Why does TS pass, but the module is not found at runtime?

Accepted Answer

1) TS checks paths via tsconfig paths. 2) But Node/bundler may not recognize aliases. 3) You need to configure resolver in bundler/tests. 4) For Node, you can use tsconfig-paths. 5) Always check runtime configuration.

Question 59

What is isolatedModules and when is it needed?

Accepted Answer

1) Required for transpiling via Babel/'single file'. 2) Prohibits certain constructs (e.g., const enum). 3) Helps with compatibility with bundlers. 4) Usually enabled in Next.js. 5) Better to keep it enabled in frontend projects.

Question 60

What is the difference between tsc and babel/swc when building TS?

Accepted Answer

1) tsc performs type checking and can emit JS. 2) Babel/SWC transpile quickly but do not check types. 3) In such schemes, type checks are run separately (tsc --noEmit). 4) Next/Vite often use SWC/Babel. 5) Type checking is needed in CI.

Question 61

How to enable type checking without generating JS?

Accepted Answer

1) Run: tsc --noEmit. 2) Or set noEmit: true in tsconfig. 3) Convenient for projects where another tool handles the build. 4) In CI, do a separate step for typecheck. 5) Type errors then do not go into production.

Question 62

What are source maps and how do they help?

Accepted Answer

1) Link compiled JS with the original TS. 2) Simplify debugging in browser and Node. 3) Enable with sourceMap: true. 4) Sometimes disabled in production due to size and security. 5) Useful for Sentry.

Question 63

How to properly type config objects?

Accepted Answer

1) Use const + as const for literals. 2) Use satisfies to check structure. 3) Avoid any. 4) Keep config in one place, do not spread. 5) For env values, do explicit type conversion.

Question 64

How to type process.env and remove 'string | undefined'?

Accepted Answer

1) Variables may be missing at runtime. 2) First validate presence (e.g., via requireEnv function). 3) After validation, can return string. 4) Better to have a single configuration layer. 5) For strict schema, use zod/valibot.

TypeScript