[Express.js] Setting Up Coding Conventions and Transpiling TypeScript into JavaScript
Express.js Series Articles
- Setting Up an Express.js API with TypeScript from Scratch
- (current)Setting Up Coding Conventions and Transpiling TypeScript into JavaScript
- Adding Debug Configuration and Starting the Debugger with VSCode
- (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