Optimize your TypeScript development workflow by leveraging advanced configurations and path aliases. This Gist provides a comprehensive jsconfig.json setup, enhancing import paths for better code readability and maintainability. Say goodbye to complex relative imports!

tsconfig.json

{
  "compilerOptions": {
    // Set the base URL for all relative module imports
    "baseUrl": ".",

    // Define path aliases for shorter and cleaner imports
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@services/*": ["src/services/*"],
      "@styles/*": ["src/styles/*"],
      "@assets/*": ["src/assets/*"],
      "@tests/*": ["tests/*"]
    },

    
    "esModuleInterop": true, // Enable ES module interoperability
    
    "jsx": "react-jsx", // Specify JSX as the target language
    
    "module": "esnext", // Specify the module system for the emitted code

    "target": "esnext", // Set the ECMAScript version to target

    "allowSyntheticDefaultImports": true, // Allow synthetic default imports from modules with no default export

    "skipLibCheck": true, // Skip type checking of declaration files

    "forceConsistentCasingInFileNames": true, // Force consistent casing in file names
    
    "strict": true, // Enable strict type checking
 
    "noImplicitAny": true, // Disallow implicit 'any' types

    "strictNullChecks": true, // Enable strict null checks

    "strictFunctionTypes": true,  // Enable strict function types

    "noImplicitThis": true,  // Disallow 'this' keyword with an implicit 'any' type

    "alwaysStrict": true, // Always treat 'use strict' as if it were present

    "noUnusedLocals": true, // Report errors on unused locals
   
    "noUnusedParameters": true, // Report errors on unused parameters

    "noImplicitReturns": true,  // Report error when not all code paths in function return a value
  
    "noFallthroughCasesInSwitch": true,  // Report errors for fallthrough cases in switch statement

    "moduleResolution": "node",  // Specify module resolution strategy

    "resolveJsonModule": true, // Enable the usage of .json files as modules

    "outDir": "./dist", // Set the output directory for compiled files

    "declaration": true, // Generate declaration files (.d.ts)

    "declarationMap": true, // Generate source maps for declaration files

    "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"] // Specify file extensions to be automatically resolved
  },

  // Exclude specified files and directories from TypeScript compilation
  "exclude": ["node_modules", "build", "dist", "coverage"]
}

Usage

Now that you have set up the tsconfig.json file, you can leverage path aliases in your project for cleaner and more maintainable imports. Here's an example:

Before:

import MyComponent from '../../../components/MyComponent';

After:

import MyComponent from '@components/MyComponent';

By using path aliases, you simplify your import statements, making your codebase more readable and easier to maintain.