DEV Community

Cover image for A quick guide for Setting up typescript express application
SHIVANSH PATEL
SHIVANSH PATEL

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

After setting up your folder structure install the required packages.

npm i express
Enter fullscreen mode Exit fullscreen mode

install dev dependencies

npm i -D @types/express ts-node typescript nodemon
Enter fullscreen mode Exit fullscreen mode

now let's setup tsconfig file

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

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. */
  }
}

Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this article ❤️🚀

Top comments (0)