[Express.js] Setting Up Coding Conventions and Transpiling TypeScript into JavaScript

canva

Express.js Series Articles

1. Setting Up an Express.js API with TypeScript from Scratch
2. (current)Setting Up Coding Conventions and Transpiling TypeScript into JavaScript
3. Adding Debug Configuration and Starting the Debugger with VSCode
4. (To be updated)

Preface

I am building an API template using Express.js and TypeScript to streamline future development projects. This article is part of a series documenting my progress, helping me deepen my understanding. Your feedback and suggestions are welcome.

This article is about how to set coding conventions and how to transpile TypeScript into JavaScript.

Step1 : Install Coding Convention Library

typescript-eslint is a continuously updated library that provides an easy way to configure coding conventions for TypeScript. If you prefer to configure it yourself, you can start with ESLint.

% npm install --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

Reference: https://typescript-eslint.io/getting-started

Step2 : Add Configuration Coding Convention

Follow the official typescript-eslint instructions and add eslint.config.js in the root folder. In my case, I will also add ignores for some folders that we don’t need to check for coding conventions.

// @ts-check
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    {
        ignores: ['node_modules', 'dist'],
    }
);

Step3 : Update package.json

Please add the below configuration in the package.json or you will encounter errors.

{
  // ......
  "type": "module",
  // ......
}

More about the type of package.json : https://nodejs.org/api/packages.html#type

Step4 : Execute eslint

Use ESLint to check the coding convention.

% npx eslint .

If you don’t add "type": "module" in Step 3, you will encounter the following error.

(node:96806) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 8.57.0

expressjs-api-template/eslint.config.js:3
import eslint from '@eslint/js';
......

Step5 : Create src Folder and Move app.ts into src Folder

To maintain code easily, I plan to put all source code in one folder, so I move app.ts into the src folder.

% mkdir src
% mv app.ts ./src/app.ts

Step6 : Set Typescript Config

Please update the below configuration in the tsconfig.json or you will encounter errors.

{
  "compilerOptions" : {
    /* ...... */
    "module": "es6",
    "rootDir": "./src",
    "outDir": "./dist",
    /* ...... */
  },
  "ts-node": {
    "esm": true
  }
}

More about module of tsconfig.json : https://www.typescriptlang.org/tsconfig/#module

Step7 : Transpile and Execute

% npx tsc           
% node dist/app.js

If you do not set "module": "es6", you will face the following error.

% npx tsc
% node dist/app.js
file:///Users/rayt/expressjs-api-template/dist/app.js:5
Object.defineProperty(exports, "__esModule", { value: true });
                      ^

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/rayt/expressjs-api-template/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/rayt/expressjs-api-template/dist/app.js:5:23
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v19.1.0

If you do not set ts-node esm, you will face the following error. If you tried to execute by typescript file.

% npx ts-node ./src/app.ts
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/rayt/expressjs-api-template/src/app.ts
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:75:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:114:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:161:28)
    at ESMLoader.load (node:internal/modules/esm/loader:594:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:446:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:469:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:423:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Conclusion

There are two ways to start the application:

% npx tsc           
% node dist/app.js
Example app listening on port 3000

% npx ts-node ./src/app.ts
Example app listening on port 3000

You can find the source code at the link below.

https://github.com/FlyRayTsou/expressjs-api-template/tree/v0.0.2

Reference

• Using ChatGPT to refine the article makes it more natural.
• What is @ts-check：https://blog.manaten.net/entry/ts-check-for-legacy
• What is ts-node esm：https://qiita.com/nyanchu/items/82903e0463fa9d558639