By leveraging core-js and Typescript with ES5 as the target, it is possible to utilize ES6 features

Question

By leveraging core-js and Typescript with ES5 as the target, it is possible to utilize ES6 features

Currently, I am working on a TypeScript project that is compiled with the setting "target": "es5". In order to use core-js's Set, I have both core-js and @types/core-js installed in my project. The issue arises because the core-js d.ts file contains global declarations for ES6 features such as Set and Map. This causes the TypeScript compiler to allow me to use these features, even though they may not be supported in older browsers.

Unfortunately, I cannot exclude the core.d.ts file from the build process since it contains necessary interfaces that I need. Is there a way for the TypeScript compiler to prevent me from using ES6 features while still allowing me to use core-js and its corresponding type definitions?

typescript definitelytyped

Answer 1

Answer №1

When dealing with core-js as a polyfill, it's important to note that its declarations are intended to alter the global scope. To avoid potential conflicts, creating your own declaration for the set interface is recommended and relatively straightforward. Additionally, removing the @types/core-js package is advised.

An example of a declaration you could utilize is:

declare module "core-js/library/fn/set" {
  class Set { ... }
  export = Set;
}

It's worth mentioning that this serves as an ambient external module declaration with a name that corresponds to the import path of the actual JavaScript file as determined by your loader or node's require function.

Ambient external module declarations should generally be minimized to prevent cluttering the global namespace, although in certain cases, like this one, they may be necessary.

If you want to limit their usage, consider leveraging the paths configuration in your tsconfig.json file.

path-to-non-ambient-declaration.ts

class Set { ... }
export = Set;

tsconfig.json

{
  "compilerOptions": {
     "baseUrl": "",
     "paths": {
       "core-js/library/fn/set": [
         "path-to-non-ambient-declaration"
        ]
      }
    }
  }
}

Answer 2

When dealing with core-js as a polyfill, it's important to note that its declarations are intended to alter the global scope. To avoid potential conflicts, creating your own declaration for the set interface is recommended and relatively straightforward. Additionally, removing the @types/core-js package is advised.

An example of a declaration you could utilize is:

declare module "core-js/library/fn/set" {
  class Set { ... }
  export = Set;
}

It's worth mentioning that this serves as an ambient external module declaration with a name that corresponds to the import path of the actual JavaScript file as determined by your loader or node's require function.

Ambient external module declarations should generally be minimized to prevent cluttering the global namespace, although in certain cases, like this one, they may be necessary.

If you want to limit their usage, consider leveraging the paths configuration in your tsconfig.json file.

path-to-non-ambient-declaration.ts

class Set { ... }
export = Set;

tsconfig.json

{
  "compilerOptions": {
     "baseUrl": "",
     "paths": {
       "core-js/library/fn/set": [
         "path-to-non-ambient-declaration"
        ]
      }
    }
  }
}

By leveraging core-js and Typescript with ES5 as the target, it is possible to utilize ES6 features

Answer №1

Similar questions

What is the best way to bring in local modules within the browser environment using Playwright?

Upgrading to Angular 18 Leads to Issue with Spread Operator: 'TypeError: res is not iterable' Error

Typescript encounters difficulties locating modules

Is there a specific type required for the Vue `install` function? Is it necessary to have the `directive` property on the `Vue`

What is the reason behind Typescript flagging a potential undefined value when checking for array length using a greater than comparison but not with an

Utilizing functional components and formatter functionality in React with react-jsx-highcharts

Checking nested arrays recursively in Typescript

Creating a mongoDB query that matches elements in an array of subdocuments with elements in a Typescript Array

Tips on preventing repeated data fetching logic in Next.js App Routes

What prevents TypeScript from allowing an async function to return a combination of type T or Promise<T>?

How do I disable split panel on Ionic 2 login page exclusively?

The issue with the Angular 5 HttpClient GET-Request not closing persists

Import a JSON file into TypeScript declaration files (*.d.ts)

Encountering a problem with the syntax '[checked]= true' in Angular2

NodeJS Jest test failing due to a global variable being set for a different test already

The error message "Property 'name' is not found in type 'RepositoryResponse[]'" is being displayed by Typescript

Create a new project using Firebase Functions along with a Node.js backend and a React.js frontend

The function of type 'PromiseConstructor' is not executable. Should 'new' be added? React TypeScript

Dealing with request-specific or session-specific data in LoopBack 4

How can you include a multi-layered array within another multi-layered array using TypeScript?