loading...

TypeScript settings for modern projects

dandv profile image Dan Dascalescu ・2 min read

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!

Posted on by:

dandv profile

Dan Dascalescu

@dandv

Immigrant entrepreneur in the Silicon Valley, former Googler and Yahoo!. Founded Blueseed, the startup community on a ship, and a few tech startup. Running the Quantified Self Forum.

Discussion

markdown guide