DEV Community

Dan Dascalescu
Dan Dascalescu

Posted on

3 1

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!

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay