TypeScript configuration for 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:

• "lib": ["es2021"]: Specifies the set of built-in APIs that are available in the code. This option specifies that the code will use ECMAScript 2021 features.
• "target": "ESNext": Specifies the ECMAScript version that the code will be compiled to. In this case, we’re targeting the latest version of ECMAScript.
• "module": "esnext": Specifies the module format that the code will be compiled to. In this case, we’re using ECMAScript modules.
• "moduleResolution": "nodenext": Specifies how module dependencies will be resolved. This option specifies that the code will use Node.js’ module resolution algorithm.
• "esModuleInterop": true: Enables interoperation between CommonJS and ECMAScript modules.
• "strict": true: Enables strict type checking.
• "skipLibCheck": true: Skips type checking of declaration files. This can improve performance, but it’s not recommended for large projects.
• "sourceMap": true: Generates source maps for debugging.

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.