TypeScript settings for modern projects

dandv

Dan Dascalescu

Posted on February 8, 2020

TypeScript settings for modern projects

Modern TypeScript project template

Even though ES modules have been no longer experimental for a few months, many TypeScript users still generate old ES3 code. While that may make sense for browser compatibility, it doesn't make any sense for server-side Node projects! On your server, you control your version of Node, and Node has been supporting modern import/export code natively since version 8.5.0, released in 2017!

At the same time, you want to be able to import npm packages that still (ಠ_ಠ) haven't published native ES modules (e.g. apollo-server, node-influx).

So here's a minimalistic example of configuring TypeScript and Node to do that, and a bit more:

  • emit modern ES modules code
  • import modules that don't have named exports (the ones I linked above)
  • import modules that use Node built-ins
  • import your own modules without specifying an extension
  • run the resulting JavaScript code

Here's how each of these is done.

Emit ES modules code

In tsconfig.json, set this in compilerOptions (don't mind the syntax highlight error here, tsc supports comments in JSON):

{
    "target": "esnext",
    "module": "esnext",  // Output `import`/`export` ES modules
}

Import modules that use Node built-ins (http, url etc.)

  • run npm install --save-dev @types/node
  • in tsconfig.json under compilerOptions, set
    • "moduleResolution": "node", so tsc can find modules when targeting ES6+
    • "types": ["node"] to avoid errors related to Node built-in modules

Import modules that don't have named exports

Set "allowSyntheticDefaultImports": true in tsconfig.json. In our code,
instead of import { InfluxDB } from 'influx we have to write:

import Influx from 'influx';
const influx = new Influx.InfluxDB();

Import your own modules without specifying an extension

When transpiling, TypeScript won't generate an extension for you. Run Node with the node --experimental-specifier-resolution=node parameter:

node --experimental-specifier-resolution=node run.js

Otherwise, node mandates that you specify the extension in the import statement.

Run the resulting JavaScript code

Add "type": "module" to package.json, because TypeScript can't generate files with the .mjs extension.

Enjoy using modern TypeScript!

💖 💪 🙅 🚩
dandv
Dan Dascalescu

Posted on February 8, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Modern TypeScript project template
typescript Modern TypeScript project template

July 27, 2020

TypeScript settings for modern projects
typescript TypeScript settings for modern projects

February 8, 2020