TypeScript with React/Node.js

Question 1

What does it mean to type a React component in TypeScript?

Answer 1

It means defining prop and state types using interfaces or type aliases to ensure type safety and better tooling support.

Question 2

How do you type React functional components?

Answer 2

Use React.FC<Props> or explicitly define props: (props: Props) => JSX.Element.</Props>

Question 3

How do you type useState in TypeScript?

Answer 3

Specify the type inside useState like: const [value, setValue] = useState<number>(0).</number>

Question 4

What is a benefit of typing React hooks?

Answer 4

Typing hooks provides compile-time safety, improves IDE autocomplete, and prevents runtime errors.

Question 5

How do you type useEffect’s cleanup function?

Answer 5

The cleanup function should return void or undefined; useEffect(() => { return () => { … } }, []).

Question 6

How do you type Express middleware?

Answer 6

Use the types from ‘express’, e.g., (req: Request, res: Response, next: NextFunction) => void.

Question 7

What is ‘@types/express’?

Answer 7

It is a package providing TypeScript type declarations for Express.js, enabling strong typing support.

Question 8

What is the role of ‘@types’ packages?

Answer 8

They provide external type definitions for JavaScript libraries that do not have native TypeScript support.

Question 9

What are global types in TypeScript?

Answer 9

Types that are declared in the global namespace and available throughout the application without imports.

Question 10

How do you declare a global type in TypeScript?

Answer 10

Use ‘declare global { interface MyType {} }’ in a .d.ts file.

Question 11

What is a use case for third-party type declarations?

Answer 11

Using JavaScript libraries like lodash, express, or moment with type safety in a TypeScript project.

Question 12

What is an advantage of using TypeScript with React?

Answer 12

It improves maintainability, reduces bugs, and offers better refactoring tools via static typing.

Question 13

What is a disadvantage of strict typing in Express?

Answer 13

It can introduce verbosity and a learning curve, especially with complex middleware chains.

Question 14

What is a best practice for typing React props?

Answer 14

Define a separate Props interface and use it consistently with components.

Question 15

What is a best practice for typing Express middleware?

Answer 15

Use existing types from ‘express’ rather than writing your own types from scratch.

Question 16

What’s a common pitfall when using @types packages?

Answer 16

Not installing them as devDependencies or using outdated types incompatible with the library.

Question 17

How do type declarations impact system design?

Answer 17

They promote strong contracts between modules, making codebases more robust and easier to navigate.

Question 18

How do global types affect performance?

Answer 18

They don’t affect runtime performance but can slow down compilation or cause naming conflicts.

Question 19

What’s an architectural implication of typed middleware?

Answer 19

Clear typing ensures that request/response flows are well-understood and contractually enforced.

Question 20

Can using @types improve fault tolerance?

Answer 20

Yes, by catching incorrect assumptions at compile-time rather than runtime.

Question 21

What is a real-world tradeoff with global types?

Answer 21

They can simplify usage but lead to accidental conflicts or implicit dependencies across the codebase.

Question 22

What’s a good debugging strategy for type issues in Express?

Answer 22

Start by inspecting inferred types, and use IDE tooltips or TypeScript’s –noImplicitAny flag.

Question 23

What is a monitoring implication of typed Express handlers?

Answer 23

Well-typed handlers allow structured logging and better observability through typed request data.

Question 24

What is a common interview question about typing React components?

Answer 24

How do you enforce prop types in a functional component using TypeScript?

Question 25

What is a gotcha when typing useRef in React?

Answer 25

useRef requires generic typing to avoid 'any', e.g., useRef(null).

Question 26

What’s a challenge in typing third-party packages?

Answer 26

Some packages may lack types entirely, requiring custom declarations or manual typing.

Question 27

What is an example of a typed Express middleware?

Answer 27

const logger: RequestHandler = (req, res, next) => { console.log(req.path); next(); };

Question 28

What’s a disadvantage of custom global types?

Answer 28

They can lead to hidden dependencies and be hard to trace or refactor across large codebases.

Question 29

How do you type optional props in React?

Answer 29

Use the '?' modifier: interface Props { title?: string }.

Question 30

What is the purpose of tsconfig.json in global typing?

Answer 30

tsconfig.json controls which files TypeScript uses, including where to find custom global types.

Question 31

What is a performance implication of many @types packages?

Answer 31

Too many or incorrectly installed types can slow down TypeScript compilation or cause conflicts.

Question 32

What is a use case for custom global types?

Answer 32

Declaring types for environmental variables or custom browser APIs used across many modules.

Question 33

What’s a best practice when typing third-party libraries?

Answer 33

Install matching versions of the library and its @types package to avoid incompatibilities.

Question 34

Why is it important to type Express request bodies?

Answer 34

To ensure expected structure and avoid runtime errors caused by undefined or malformed data.

Question 35

What is a best practice when using global types?

Answer 35

Scope them carefully and use naming conventions to avoid polluting the global namespace.

Question 36

What is the benefit of typing response data in Express?

Answer 36

Improves API consistency and enables client-side consumers to rely on structured data.

Question 37

What is a challenge when integrating third-party packages in TypeScript?

Answer 37

Some packages may not be updated frequently, causing type mismatches or requiring workarounds.

Question 38

How do you write a global type declaration file?

Answer 38

Create a *.d.ts file and use declare global { ... } within it.

Question 39

What is a tradeoff of using inferred types in React hooks?

Answer 39

While concise, it may cause bugs if the inferred type is too broad or incorrect.

Question 40

What is the benefit of typed hooks in shared libraries?

Answer 40

They ensure reusability with type safety, especially when accepting callbacks or context values.

Question 41

What does 'as const' do in TypeScript?

Answer 41

It tells the compiler to infer the narrowest possible literal type, useful in defining immutable values.