A quick guide for Setting up typescript express application

I am writing this article for anyone who wants to quickly set up their EXPRESS application with typescript, at this time when too many frameworks are available it's not easy to remember each and everything. So follow this article and set up your project.

Folder Structure

-- Dist
  -- index.js
-- src
   -- index.ts
-- .env
-- package.json

After setting up your folder structure install the required packages.

npm i express

install dev dependencies

npm i -D @types/express ts-node typescript nodemon

now let's setup tsconfig file

npx tsc --init

this will generate a default tsconfig.js file.so lets update the file

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2023" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,

    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,

    "rootDir": "./src" /* Specify the root folder within your source files. */,

    "outDir": "./Dist" /* Specify an output folder for all emitted files. */,

    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,

    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

as you can see here we are specifying rootDir and outDir which specify the root folder from where we have to look for the compilation and output folder where we have to keep the compiled code.

Now let's setup our package.json file so that we can configure it to run in dev mode and create a build and run in production mode

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "start": "node ./Dist/index.js",
    "dev": "nodemon --exec ts-node ./src/index.ts"
  }

Thank you for reading this article ❤️🚀

Blog

A quick guide for Setting up typescript express application

SHIVANSH PATEL

Join Our Newsletter. No Spam, Only the good stuff.

Related