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

Error in declaring type even after including .d.ts file

Guide to implementing the patchValues() method in conjunction with the <mat-form-field> within the (keyup.enter) event binding

Key factors to keep in mind when comparing JavaScript dates: months

Dot notation for Typescript aliases

Which data structure is suitable for storing a JSON object?

Tips on joining property name in typescript

Understanding the correct way to map two arrays with boolean values is essential for effective data

Optimize Next.js 10 TypeScript Project by Caching MongoDb Connection in API Routes

What is the significance of TypeScript's dual generic typing feature?

Enhance the design of MDX in Next.js with a personalized layout

Implementing query parameters in a Deno controller

Guide to creating a Map with typescript

Determine the category of a container based on the enclosed function

Can someone help me create Three.js types using the frontend option I choose?

Tips on extracting value from a pending promise in a mongoose model when using model.findOne()

A Guide to Handling Errors while Converting a Map to a Promise in Typescript

The concept of overloaded function types in TypeScript

Is it possible to verify type property names using a union type?

Does JSX/TSX markup act as a constant that is passed by value or by reference?

Transferring an event to a component nested two levels deep