The tsconfig within the module directory fails to supersede the extended tsconfig properties present in the parent directory

Question

The tsconfig within the module directory fails to supersede the extended tsconfig properties present in the parent directory

Within the directory store/aisle/fruits, there is a tsconfig.json file:

{
  "compileOnSave": true,
  "compilerOptions": {
    .
    .
    "target": "es6",
    "noEmitOnError" : true,
    "noEmitHelpers": false,
    "stripInternal": true,
    "removeComments": true,
    "declaration": true
  }
}

In the subfolder store/aisle/fruits/mango, I have another tsconfig.json specifically to change the target property. The file Price.ts utilizes async/await functionality, and it should remain unchanged in the resultant .js files. To achieve this, the target value needs to be set to ES2017:

{
  "extends": '../tsconfig',
  "compilerOptions": {
    "target": "ES2017"
  },
  "files": ["Price.ts", "index.ts"]
}

Despite these configurations, the changes made in the tsconfig at the mango level are not reflected when compiling with tsc. Consequently, the generated .js includes emitted helpers (__awaiter) that are unwanted.

Therefore, my query is how can I effectively override the target value to eliminate the unnecessary __awaiter and ensure only async/await functionality remains in the resulting price.js file?

typescript tsconfig

Answer 1

Answer №1

One approach to generate individual child tsconfig.json files in each project, where the child configurations extend the settings from the parent tsconfig.json, is to execute the tsc build command within each child's context.

To achieve dynamic configuration setup, npm workspaces can be utilized effectively.

Here's an illustration of the project structure:

.
├── module-a
│   ├── index.ts
│   ├── package.json  // contains script for building
│   └── tsconfig.json // child tsconfig
│
├── module-b
│   ├── index.ts
│   ├── package.json  // contains script for building
│   └── tsconfig.json // child tsconfig
│
├── package.json      // parent package.json workspace
└── tsconfig.json // parent tsconfig

Parent Node.js ./package.json:

{
  "name": "workspace-example",
  "version": "1.0.0",
  "workspaces": [
        "module-a", 
        "module-b"
  ]
}

Module-A Node.js ./module-a/package.json:

{
    "name": "module-a",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "build" : "tsc" // customize as needed
    }
}

Parent TypeScript Configuration ./tsconfig.json (contains base options to be overridden):

{
    "compilerOptions": {
        "module": "CommonJS",
        "noUnusedLocals": true,
        "sourceMap": false,
        "outDir": "build",
        "target": "ES2017",
      },
      "compileOnSave": true  
}

Module-A TypeScript Configuration ./module-a/tsconfig.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "build-module-a", // overrides
        "sourceMap": "true",  // overrides
    }
}

To facilitate separate builds for each module, run the following command in the root workspace directory:

npm run build --workspaces

For building a specific module, use:

npm run build --workspace=module-a

Note: Upon executing npm install, all modules will be installed under a single node_modules folder.

Answer 2

One approach to generate individual child tsconfig.json files in each project, where the child configurations extend the settings from the parent tsconfig.json, is to execute the tsc build command within each child's context.

To achieve dynamic configuration setup, npm workspaces can be utilized effectively.

Here's an illustration of the project structure:

.
├── module-a
│   ├── index.ts
│   ├── package.json  // contains script for building
│   └── tsconfig.json // child tsconfig
│
├── module-b
│   ├── index.ts
│   ├── package.json  // contains script for building
│   └── tsconfig.json // child tsconfig
│
├── package.json      // parent package.json workspace
└── tsconfig.json // parent tsconfig

Parent Node.js ./package.json:

{
  "name": "workspace-example",
  "version": "1.0.0",
  "workspaces": [
        "module-a", 
        "module-b"
  ]
}

Module-A Node.js ./module-a/package.json:

{
    "name": "module-a",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "build" : "tsc" // customize as needed
    }
}

Parent TypeScript Configuration ./tsconfig.json (contains base options to be overridden):

{
    "compilerOptions": {
        "module": "CommonJS",
        "noUnusedLocals": true,
        "sourceMap": false,
        "outDir": "build",
        "target": "ES2017",
      },
      "compileOnSave": true  
}

Module-A TypeScript Configuration ./module-a/tsconfig.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "build-module-a", // overrides
        "sourceMap": "true",  // overrides
    }
}

To facilitate separate builds for each module, run the following command in the root workspace directory:

npm run build --workspaces

For building a specific module, use:

npm run build --workspace=module-a

Note: Upon executing npm install, all modules will be installed under a single node_modules folder.

The tsconfig within the module directory fails to supersede the extended tsconfig properties present in the parent directory

Answer №1

Similar questions

multiple event listeners combined into a single function

Component that wraps around children elements and passes props to their render function

Revamp your search experience with Algolia's Angular Instant Search: Design a personalized search box template

Tips for efficiently handling state across various forms in separate components using only one save button within a React-Redux application

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

react-hook-form replaces the onChange function causing delays in updating the value

Using Node.js and TypeScript to define custom data types has become a common practice among developers

Angular 6's Select feature is failing to properly update user information

Some elements that fit the criteria of 'number | function' are not callable at all

In what way can TS uniquely handle each element of an array as the key of an object?

Having trouble retrieving cookie in route.ts with NextJS

If an interface property is set as (), what significance does it hold?

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

"Angular encountered an error while attempting to access the property 'data' from an undefined

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

Customize the text for the material icon

Has the antd Form.create() method been substituted with something else?

Error Uncovered: Ionic 2 Singleton Service Experiencing Issues

Troubleshooting: Why is the Array in Object not populated with values when passed during Angular App instantiation?