MCQs on Working with Frameworks | TypeScript
Explore 30 MCQs covering TypeScript integration with React, Angular, Vue, Node.js, and Express. These questions will help you understand how TypeScript enhances development in modern frameworks and back-end services.
Chapter 19: Working with Frameworks
Using TypeScript with React, Angular, and Vue
- How does TypeScript improve development in React?
- a) By providing optional static typing
- b) By automatically generating React components
- c) By eliminating the need for JSX
- d) By compiling JavaScript to TypeScript
- Which of the following is the correct way to use TypeScript in a React component?
- a)
const MyComponent: React.FC = () => { return <div> </div>; } - b)
function MyComponent(): React.FC { return <div> </div>; } - c)
React.Component<TypeScript, any> - d)
const MyComponent = () => { return <div> </div>; }
- a)
- What TypeScript feature helps with type-checking in React functional components?
- a) Generics
- b) Interfaces
- c) Type aliases
- d) Type annotations on props and state
- What is a benefit of using TypeScript with Angular?
- a) Angular automatically converts TypeScript to JavaScript
- b) It provides type safety and better tooling
- c) It makes the application run faster
- d) It eliminates the need for decorators
- How is TypeScript integrated into Angular applications?
- a) By using
tsfiles for components, services, and modules - b) By writing JavaScript code inside
tsfiles - c) By compiling
tsfiles into HTML - d) Angular doesn’t support TypeScript directly
- a) By using
- In Vue.js, what is the primary use of TypeScript?
- a) To compile Vue components
- b) For type-checking, props, and event handling
- c) To replace JavaScript completely
- d) For automatic routing
- What TypeScript feature is often used to define the types of props in Vue components?
- a) Interfaces
- b) Type annotations
- c) Type aliases
- d) Classes
- Which file extension should be used for TypeScript files in a Vue 3 project with TypeScript support?
- a)
.tsx - b)
.ts - c)
.vue - d)
.tsv
- a)
- How does Vue 3 provide TypeScript support?
- a) By natively supporting
.tsfiles for components - b) By using TypeScript for its internal API only
- c) Through a plugin that converts JavaScript to TypeScript
- d) Vue does not support TypeScript
- a) By natively supporting
- Which of the following is true about using TypeScript in React?
- a) You must use TypeScript only for class components
- b) TypeScript is not compatible with React
- c) TypeScript provides type-checking for props, state, and events in React components
- d) TypeScript is only useful for styling in React
TypeScript in Node.js
- How do you enable TypeScript in a Node.js project?
- a) By installing
ts-nodeand creating atsconfig.json - b) By adding TypeScript as a global dependency
- c) By directly writing
.tsfiles in Node.js - d) By using Node.js with TypeScript out of the box
- a) By installing
- Which of the following commands compiles TypeScript files in Node.js?
- a)
tsc - b)
node --compile - c)
ts-node run - d)
typescript
- a)
- How do you run a TypeScript file in Node.js without compiling it first?
- a)
node ts-node file.ts - b)
ts-node file.ts - c)
tsc file.ts - d)
node file.ts
- a)
- Which TypeScript configuration file is used in a Node.js project?
- a)
tsconfig.json - b)
typescript.config - c)
node.config.json - d)
config.ts
- a)
- What is the role of
ts-nodein a Node.js TypeScript project?- a) It compiles TypeScript into JavaScript at runtime
- b) It automatically installs TypeScript
- c) It helps generate types for JavaScript code
- d) It is not required for Node.js projects
- In a Node.js TypeScript project, how do you define types for imported modules?
- a) By using
import * as module from 'module' - b) By writing custom type definitions in
.d.tsfiles - c) By installing
@typespackage and importing them - d) By writing types in
tsconfig.json
- a) By using
- Which package helps provide type definitions for Node.js in TypeScript?
- a)
@types/node - b)
node-types - c)
typescript-node - d)
node-typescript
- a)
- How do you specify the entry point for a TypeScript project in Node.js?
- a) Using the
mainproperty intsconfig.json - b) By running the
tsccommand - c) By setting
"entry": "app.ts"inpackage.json - d) By specifying
main.tsintsconfig.json
- a) Using the
- What is the benefit of using TypeScript in a Node.js backend application?
- a) Better debugging and error checking at compile-time
- b) Improved performance over JavaScript
- c) Reduced memory usage in Node.js
- d) Automatic handling of HTTP requests
- How do you handle type-checking for external Node.js modules in TypeScript?
- a) By installing their corresponding
@typespackages - b) By writing your own type definitions
- c) By disabling type-checking for modules
- d) By using
import *for every external module
- a) By installing their corresponding
Express with TypeScript: Typing Middleware and Routes
- How do you add type definitions for an Express app in TypeScript?
- a) By installing
@types/express - b) By writing custom type definitions for Express
- c) By using JavaScript only in Express
- d) By using
express-tspackage
- a) By installing
- How can you type the request and response objects in an Express route handler using TypeScript?
- a) By using the
RequestandResponsetypes fromexpress - b) By using
typefor the parameters - c) By using
anytype - d) Express doesn’t need typing in TypeScript
- a) By using the
- What is the correct way to type middleware in an Express app with TypeScript?
- a)
(req: Request, res: Response, next: NextFunction) => { ... } - b)
middleware((req, res, next) => { ... }) - c)
function middleware(req, res) { ... } - d)
function middleware(req: any, res: any) { ... }
- a)
- What does
NextFunctionrefer to in an Express middleware typed with TypeScript?- a) A function that passes control to the next middleware
- b) A utility function for creating routes
- c) A method for handling errors
- d) A function that converts route paths
- Which TypeScript feature can be used to enforce specific types for route parameters in Express?
- a) Interfaces
- b) Type assertions
- c) Type annotations
- d) Type aliases
- How can you define types for the request body in an Express route handler?
- a) Using TypeScript interfaces to define the body shape
- b) By defining a custom type for the body
- c) By using
express.json()without types - d) By using
anyfor the request body
- In an Express TypeScript project, how do you ensure that route parameters are type-checked?
- a) By using
@types/expressand defining types in the route - b) By manually validating parameters
- c) By using
express-validator - d) TypeScript does not support route parameters type-checking
- a) By using
- How can you add types to custom middleware in Express with TypeScript?
- a) By extending
RequestandResponseinterfaces - b) By using
anyfor the middleware - c) By using decorators
- d) By using the
express-tspackage
- a) By extending
- What does the
Expresstype in TypeScript help with?- a) It defines types for Express framework features, like
Request,Response, andNextFunction - b) It adds runtime checks to Express routes
- c) It helps with routing logic
- d) It reduces the amount of code required in Express
- a) It defines types for Express framework features, like
- How can TypeScript help with type-safety in Express route handling?
- a) By automatically typing request, response, and middleware parameters
- b) By creating runtime checks
- c) By eliminating middleware altogether
- d) By ensuring HTTP requests are always validated
Answer Key
| Qno | Answer |
|---|---|
| 1 | a) By providing optional static typing |
| 2 | a) const MyComponent: React.FC = () => { return <div> </div>; } |
| 3 | d) Type annotations on props and state |
| 4 | b) It provides type safety and better tooling |
| 5 | a) By using ts files for components, services, and modules |
| 6 | b) For type-checking, props, and event handling |
| 7 | b) Type annotations |
| 8 | b) .ts |
| 9 | a) By natively supporting .ts files for components |
| 10 | c) TypeScript provides type-checking for props, state, and events in React components |
| 11 | a) By installing ts-node and creating a tsconfig.json |
| 12 | a) tsc |
| 13 | b) ts-node file.ts |
| 14 | a) tsconfig.json |
| 15 | a) It compiles TypeScript into JavaScript at runtime |
| 16 | b) By writing custom type definitions in .d.ts files |
| 17 | a) @types/node |
| 18 | a) Using the main property in tsconfig.json |
| 19 | a) Better debugging and error checking at compile-time |
| 20 | a) By installing their corresponding @types packages |
| 21 | a) By installing @types/express |
| 22 | a) By using the Request and Response types from express |
| 23 | a) (req: Request, res: Response, next: NextFunction) => { ... } |
| 24 | a) A function that passes control to the next middleware |
| 25 | c) Type annotations |
| 26 | a) Using TypeScript interfaces to define the body shape |
| 27 | a) By using @types/express and defining types in the route |
| 28 | a) By extending Request and Response interfaces |
| 29 | a) It defines types for Express framework features, like Request, Response, and NextFunction |
| 30 | a) By automatically typing request, response, and middleware parameters |