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
undercompilerOptions
, set-
"moduleResolution": "node"
, sotsc
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)