TS Config (tsconfig.json)

Notes & Setup

Aaron's Personal Preference

...

Popular Options

  1. target (ECMAScript Target Version):

    • Description: Sets the ECMAScript target version for the compiled JavaScript.

    • Popular Use: "target": "es6" or higher (like "es2018") to leverage newer ECMAScript features that are supported in modern environments.

  2. module (Module System):

    • Description: Determines the module system used in the project.

    • Popular Use: "module": "commonjs" for Node.js projects or "module": "esnext" for projects that leverage modern module syntax (like ECMAScript modules).

  3. strict (Enable All Strict Type-Checking Options):

    • Description: Enables all strict type-checking options.

    • Popular Use: "strict": true to ensure a more rigorous type-checking, which can catch more potential errors at compile time.

  4. esModuleInterop (ES Module Interop):

    • Description: Enables compatibility with Babel-imported ECMAScript modules.

    • Popular Use: "esModuleInterop": true to allow default imports from modules without a default export. This is more aligned with the current ECMAScript module system.

  5. outDir (Output Directory):

    • Description: Specifies the output directory for the compiled JavaScript files.

    • Popular Use: "outDir": "./dist" to keep the source code and compiled code in separate directories, maintaining a clean project structure.

  6. sourceMap (Generate Source Maps):

    • Description: Enables the generation of source maps, which help in debugging the compiled JavaScript by mapping it back to the original TypeScript code.

    • Popular Use: "sourceMap": true for development environments to aid in debugging.

  7. noImplicitAny (Disallow Implicit any Types):

    • Description: Raises errors on expressions and declarations with an implied any type.

    • Popular Use: "noImplicitAny": true to avoid variables with the any type unless explicitly declared, leading to safer and more predictable code.

  8. moduleResolution (Module Resolution Strategy):

    • Description: Determines how modules get resolved.

    • Popular Use: "moduleResolution": "node" for Node.js projects or "moduleResolution": "classic" for web projects.

  9. jsx (JSX Support):

    • Description: Specifies the JSX code generation style: 'preserve', 'react-native', or 'react'.

    • Popular Use: "jsx": "react" for projects using React. It converts JSX syntax to JavaScript that React understands.

  10. include and exclude (File Inclusion/Exclusion in Compilation):

    • Description: Specifies a list of files or patterns to include or exclude from the compilation.

    • Popular Use:

      jsonCopy code"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]

      to include all files in the src directory while excluding node_modules and test files.

  11. lib (Library Files to be Included in the Compilation):

    • Description: Specifies a list of library files to be included in the compilation.

    • Popular Use: ["dom", "es6", "dom.iterable", "scripthost"] for web projects, including types for DOM and ECMAScript features.

  12. allowJs (Allow JavaScript Files to be Compiled):

    • Description: Allows JavaScript files to be compiled along with TypeScript files.

    • Popular Use: "allowJs": true in projects where you are gradually migrating from JavaScript to TypeScript.

  13. skipLibCheck (Skip Type Checking of Declaration Files):

    • Description: Skips type checking of all declaration files (.d.ts files).

    • Popular Use: "skipLibCheck": true can speed up the compile time, especially in large projects, but at the cost of potentially missing some types inconsistencies in third-party libraries.

  14. forceConsistentCasingInFileNames (Force Consistent Casing in File Names):

    • Description: Ensures that the casing of referenced file names is consistent during the compile.

    • Popular Use: "forceConsistentCasingInFileNames": true to avoid issues on case-sensitive file systems.

Additional Options

  1. noEmit (Do Not Emit Outputs):

    • Description: Prevents the compiler from generating output files like JavaScript source code or .d.ts declaration files.

    • Popular Use: "noEmit": true is often used in projects where TypeScript is used only for type checking, such as in some frontend projects where a different build tool is responsible for generating the final JavaScript.

  2. noEmitOnError (No Emit on Error):

    • Description: Ensures no output files are generated if any errors are reported.

    • Popular Use: "noEmitOnError": true is useful to ensure that builds do not proceed with errors, which is particularly important in CI/CD pipelines.

  3. strictNullChecks (Strict Null Checking):

    • Description: When enabled, null and undefined are only assignable to their own types and any.

    • Popular Use: "strictNullChecks": true is crucial for robust type checking, helping to avoid common bugs related to null references.

  4. noImplicitReturns (No Implicit Returns in Functions):

    • Description: Ensures that all code paths in a function explicitly return a value.

    • Popular Use: "noImplicitReturns": true is used to improve code readability and maintainability by making return patterns explicit.

  5. noUnusedLocals and noUnusedParameters (No Unused Variables and Parameters):

    • Description: Report errors on unused local variables and function parameters.

    • Popular Use:

      • "noUnusedLocals": true and "noUnusedParameters": true are helpful in maintaining clean code, free from unused or redundant code.

  6. resolveJsonModule (Import JSON Modules):

    • Description: Allows importing .json files directly in TypeScript files.

    • Popular Use: "resolveJsonModule": true enables working with JSON files just as you would with TypeScript modules, which can be particularly useful when dealing with configuration files or data.

  7. isolatedModules (Transpile Each File as a Separate Module):

    • Description: Ensures each file can be safely transpiled without relying on the types from other files.

    • Popular Use: "isolatedModules": true is often used in projects where the code needs to be compatible with transpilers like Babel.

  8. downlevelIteration (More Accurate Iteration Support):

    • Description: Provides more accurate support for iterating ES2015 structures in downleveled versions of ECMAScript.

    • Popular Use: "downlevelIteration": true is useful when targeting older ECMAScript standards but still wanting to use newer syntax like for...of loops over new types like Set or Map.

  9. composite (Project References):

    • Description: Enables project references, allowing TypeScript to use builds from other projects.

    • Popular Use: "composite": true is used in larger projects or monorepos where you want to split your code into multiple TypeScript projects and reference them.

  10. incremental (Enable Incremental Compilation):

    • Description: Allows TypeScript to save information about the project graph from the last compilation to speed up subsequent compilations.

    • Popular Use: "incremental": true significantly improves the build times in larger projects by only recompiling what's necessary.

  11. baseUrl and paths (Base URL and Path Mapping):

    • Description:

      • baseUrl sets the base directory for non-relative module names.

      • paths specifies a series of entries that re-map imports to lookup locations relative to the baseUrl.

    • Popular Use:

      • "baseUrl": "." and defining paths are commonly used to set up custom path aliases, making imports cleaner and more manageable, especially in large projects.

PreviousPrettier (.prettierrc)NextOther Project Setup

Last updated