Typescript Configuration & Tooling Interview Questions

tsconfig.json is the main configuration file for TypeScript projects. Key components include: 1) compilerOptions for configuring the TypeScript compiler, 2) include/exclude for specifying which files to compile, 3) extends for inheriting configurations, 4) files for explicitly listing files to include. Example: { 'compilerOptions': { 'target': 'ES6', 'module': 'commonjs', 'strict': true }, 'include': ['src/**/*'], 'exclude': ['node_modules'] }

Key compiler options include: 1) target (specifies ECMAScript target version), 2) module (module code generation), 3) strict (enables all strict type checking options), 4) outDir (output directory), 5) rootDir (root directory of source files), 6) sourceMap (generates source maps), 7) declaration (generates .d.ts files), 8) noImplicitAny (error on implied any types), 9) esModuleInterop (enables interop between CommonJS and ES Modules)

Module resolution is configured through tsconfig.json options: 1) moduleResolution ('node' or 'classic'), 2) baseUrl (base directory for non-relative imports), 3) paths (path mapping for module aliases), 4) rootDirs (list of root folders). Example: { 'compilerOptions': { 'moduleResolution': 'node', 'baseUrl': './src', 'paths': { '@/*': ['*'] } } }

TypeScript integration with webpack requires: 1) ts-loader or babel-loader with @babel/preset-typescript, 2) source map configuration, 3) resolve extensions configuration. Example webpack config: { module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader' }] }, resolve: { extensions: ['.tsx', '.ts', '.js'] } }

Project references allow splitting TypeScript projects into smaller pieces for better organization and build performance. They're configured using the references field in tsconfig.json. Example: { 'references': [{ 'path': '../common' }], 'compilerOptions': { 'composite': true } }. This enables incremental compilation and better project organization.

Different environments can be configured using: 1) Multiple tsconfig files (tsconfig.dev.json, tsconfig.prod.json), 2) Environment-specific compiler options, 3) Conditional types based on environment. Example: { 'extends': './tsconfig.base.json', 'compilerOptions': { 'sourceMap': true, 'declaration': false } }

Declaration files (.d.ts) provide type information for JavaScript code. They can be generated using the declaration compiler option. Example tsconfig.json: { 'compilerOptions': { 'declaration': true, 'declarationDir': './types' } }. They're useful for creating type definitions for JavaScript libraries or separating type declarations from implementation.

Strict type checking is configured using the strict flag and individual flags: 1) strictNullChecks, 2) strictFunctionTypes, 3) strictBindCallApply, 4) strictPropertyInitialization, 5) noImplicitAny, 6) noImplicitThis. Example: { 'compilerOptions': { 'strict': true, 'strictNullChecks': true } }

TypeScript tooling options include: 1) VS Code with built-in TypeScript support, 2) WebStorm with TypeScript integration, 3) ESLint with @typescript-eslint, 4) Prettier for code formatting, 5) TypeScript Language Service plugins. These provide features like IntelliSense, refactoring, and error checking.

Path aliases are configured using baseUrl and paths in tsconfig.json. Example: { 'compilerOptions': { 'baseUrl': '.', 'paths': { '@components/*': ['src/components/*'], '@utils/*': ['src/utils/*'] } } }. This enables using imports like import { Button } from '@components/Button';

Best practices include: 1) Using project references for large codebases, 2) Consistent file/folder structure, 3) Proper module organization, 4) Shared tsconfig.json settings, 5) Clear naming conventions, 6) Separation of concerns, 7) Using barrel exports (index.ts files), 8) Proper type declaration organization.

Monorepo configuration involves: 1) Using project references, 2) Setting up shared configurations, 3) Configuring workspace dependencies, 4) Using tools like Lerna or Nx. Example: Root tsconfig.json with references to package configs and shared compiler options. { 'references': [{ 'path': 'packages/common' }, { 'path': 'packages/client' }] }

Language Service plugins extend TypeScript's language service functionality. They can add custom type checking, code completion, and refactoring capabilities. Example configuration: { 'compilerOptions': { 'plugins': [{ 'name': 'typescript-styled-plugin' }] } }. Common uses include styled-components integration and custom lint rules.

Incremental compilation is configured using: 1) incremental flag, 2) tsBuildInfoFile option, 3) composite project setting. Example: { 'compilerOptions': { 'incremental': true, 'tsBuildInfoFile': './buildcache/front-end.tsbuildinfo' } }. This improves build performance by reusing previous compilation results.

TypeScript supports multiple module systems: 1) ES Modules (import/export), 2) CommonJS (require/exports), 3) AMD, 4) UMD, 5) System. Configure using the module compiler option. Example: { 'compilerOptions': { 'module': 'esnext', 'moduleResolution': 'node' } }. Choice depends on target environment and compatibility requirements.

Source maps are configured using: 1) sourceMap compiler option, 2) sourceRoot option, 3) mapRoot option. Example: { 'compilerOptions': { 'sourceMap': true, 'sourceRoot': '/', 'mapRoot': 'dist/maps' } }. They enable debugging TypeScript code directly in browsers or editors.

Assets can be handled through: 1) Declaration files for non-code assets, 2) Module declarations for imports, 3) Webpack loaders, 4) Custom type definitions. Example: declare module '*.png' { const content: string; export default content; }. This enables type-safe handling of various resource types.

Testing configuration includes: 1) Separate tsconfig.test.json, 2) Jest configuration with ts-jest, 3) Test-specific module resolution, 4) Test file patterns. Example: { 'extends': './tsconfig.base.json', 'compilerOptions': { 'types': ['jest'], 'esModuleInterop': true } }. This ensures proper testing setup with TypeScript.

TypeScript supports different build modes: 1) Regular compilation (tsc), 2) Watch mode (tsc -w), 3) Project references build (tsc -b), 4) Incremental builds. Example using build mode: tsc -b src/tsconfig.json --verbose. Each mode serves different development scenarios and requirements.

Configuration varies by bundler: 1) Webpack: ts-loader or babel-loader, 2) Rollup: @rollup/plugin-typescript, 3) Parcel: Built-in TypeScript support, 4) esbuild: Native TypeScript support. Example Rollup config: import typescript from '@rollup/plugin-typescript'; export default { plugins: [typescript()] }