Working with TypeScript in Parcel Quiz Quiz

Assess your understanding of integrating TypeScript within Parcel-powered workflows, including setup, configuration, and troubleshooting. This quiz covers key TypeScript concepts and practical scenarios for developers working with Parcel to ensure smooth project builds and better code quality.

1. Adding TypeScript Support

   Which step is necessary to enable TypeScript file compilation in a Parcel-based project using only default settings?

   1. Set 'type: module' in package.json
   2. Update the HTML entry point with a defer attribute
   3. Include a .babelrc file with TypeScript presets
   4. Add a .ts or .tsx source file and ensure TypeScript is in the dependencies

   Explanation: Parcel detects TypeScript support automatically if it finds .ts or .tsx files and the TypeScript package is listed as a dependency. Setting 'type: module' in package.json is related to module syntax, not TypeScript compilation. Using a .babelrc file targets Babel configuration and is optional unless specific transformations are needed. Updating the HTML entry point with a defer attribute affects script loading in the browser, but does not enable TypeScript support.

2. Locating TypeScript Configuration

   When customizing TypeScript compiler options for a Parcel project, what is the conventional file to place at the project's root directory?

   1. config.ts
   2. tsconfig.json
   3. typescript.config.js
   4. parcel-config.ts

   Explanation: The TypeScript compiler looks for tsconfig.json at the project root to read compilation settings. The other options, such as typescript.config.js and config.ts, are not recognized by the TypeScript compiler by default. parcel-config.ts is not used for TypeScript configuration. Using tsconfig.json ensures both Parcel and TypeScript are aligned with your desired settings.

3. Type Declarations for Imports

   In a TypeScript Parcel project, which action helps avoid 'Cannot find module' errors when importing a CSS file into a TypeScript file?

   1. Create a global declaration file like global.d.ts describing CSS modules
   2. Rename the CSS file extension to .ts
   3. Add the CSS file path to the typeRoots field in tsconfig.json
   4. Disable all type checks in tsconfig.json

   Explanation: Declaring a global.d.ts file with a module declaration for CSS allows TypeScript to understand such imports. Adding a CSS path to typeRoots is not the intended usage, as typeRoots specify directories for type definitions, not regular assets. Renaming CSS files to .ts would lead to syntax errors since they are not TypeScript code. Disabling all type checks removes type safety, which defeats the purpose of using TypeScript.

4. Debugging Type Errors

   If Parcel successfully builds but there are TypeScript type errors visible in your editor, what is the likely cause?

   1. Parcel only performs transpilation and requires a separate type check process
   2. The operating system does not support TypeScript
   3. The tsconfig.json file is missing entirely
   4. HTML files are not referenced in package.json

   Explanation: Parcel, by default, prioritizes fast builds by focusing on transpilation and does not perform type checking during the bundling process. The tsconfig.json file might still exist and be correct since code is being built. TypeScript is supported across operating systems, so that's not relevant here. HTML files not being in package.json does not affect TypeScript type checking. Developers should use a separate type checking command to catch such errors.

5. Efficient JavaScript Output

   To ensure efficient JavaScript output from TypeScript files in a Parcel-powered project, which tsconfig.json compiler option is most relevant?

   1. module
   2. sourceMap
   3. jsx
   4. removeComments

   Explanation: The removeComments option ensures that comments are removed from the generated JavaScript, resulting in slightly smaller and cleaner output. The module option controls the module system used, but does not directly relate to output efficiency. sourceMap enables the creation of source maps for debugging but can increase output size. The jsx option is specific to how JSX code is transformed and does not affect general JavaScript efficiency.