Skip to content

TypeScript configuration for 2023

Posted on:March 27, 2023

In this article, we’ll explore a TypeScript configuration for 2023 that can help you take advantage of the latest language features and keep your code error-free.

To get started, let’s take a look at the configuration file that I’m using in my latest project:

{
  "compilerOptions": {
    "lib": ["es2021"],
    "target": "ESNext",
    "module": "esnext",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Here’s a breakdown of what each option does:

This configuration file is designed to take advantage of the latest language features while also enforcing strict type checking and consistent file naming conventions. It also includes options for generating source maps and outputting compiled code to a specific directory.

More on esnext and modules interop

The TypeScript config specifies that the module option is set to esnext, which means that the generated modules will be in ES modules format. However, Node.js natively supports CommonJS modules, which use the .js extension instead of .mjs format for ES modules. This means that when using this TypeScript configuration in a Node.js project, you will need to import modules with the .js extension.

The esModuleInterop option is set to true, which enables interoperability between CommonJS and ES modules. This means that you can import CommonJS modules in ES modules syntax, and vice versa. When you import a CommonJS module in an ES module, Node.js will automatically wrap the CommonJS module in a namespace object, which allows you to access its exports using the .default property.

For example, if you have a CommonJS module moduleA with a default export, you can import it in an ES module like this:

import moduleA from "./moduleA.js";

The esModuleInterop option also allows you to use named exports from a CommonJS module in an ES module, by adding a .default property to the namespace object that is created when the CommonJS module is imported.

Final words

Using this TypeScript configuration enables you to catch errors early in the development process, resulting in reliable and maintainable code. Additionally, it allows you to continue using CommonJS modules.