Good configs for Typescript

I'm not a professional in this technology, but I understood the importance that a setup has in our applications. I'll show my back-end setup and I hope you like it.

For didactic purposes, I'm going to install some dependencies that don't necessarily have to do with one another. Imagine that it is your application will not deviate much from this pattern.

Thinking about making this article applicable, and you don't have to look for the configurations in the middle of the explanations I'll leave it as a step-by-step, and at the end, explain everything, feel free to read it as you wish.

npm init -y

npm i cors dotenv express pg morgan

npm i -D nodemon typescript ts-node

npm i -D @types/express @types/node @types/cors @types/pg

npx tsc --init

./tsconfig.json

{
  "compilerOptions": {
    "target": "es2021",
    "module": "commonjs",
    "rootDir": "./src",
    "esModuleInterop": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  }
}

// commit
chore: add basic configs and ts config

./package.json

"script": {
  "start:dev": "nodemon --watch 'src/' --exec 'ts-node src/server.ts' -e ts",
  // ...
},

// commit
chore: add ts-node and nodemon setup

npm i -D eslint prettier eslint-config-prettier


npm init @eslint/config

.eslintignore

node_modules
/*.js

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2020": true,
    "node": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
        "project": ["./tsconfig.json"],
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "space-before-function-paren": "off",
    "@typescript-eslint/no-empty-interface": "off"
  }
}

.prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120
}

//commit
chore: add eslint and prettier setup

npm i -D husky lint-staged git-commit-msg-linter

.package.json

"scripts": {
  "husky": "husky install",
  //...
}

.lintstagedrc.json

{
  "*.ts": [
    "npx eslint 'src/**' --fix",
    "npx prettier --check 'src/**'"
  ]
}

npm run husky

npx husky add .husky/pre-commit "npx lint-staged"

npx husky add .husky/commit-msg ".git/hooks/commit-msg \$1"

// commit
chore: add husky and lint-staged setup

npm i -D tsconfig-paths tsc-alias

.package.json

"script": {
  "build": "tsc && tsc-alias",
  "start:dev": "nodemon --watch 'src/' --exec 'ts-node -r tsconfig-paths/register src/server.ts' -e ts",
  //...
}

./tsconfig.json
{
  "compilerOptions: {
    // ...

    "paths": {
      "@/*": ["*"]
    },
    "baseUrl": "./src"
  }
}

// commit

chore: add tsconfig-paths to script dev and tsc-alias setup

First of all

Start your application and install the basic dependencies, checking if their respective types exist, if in doubt, try installing it with @types/<name-lib>.

All ready, basic dependencies of a back-end application using Express, Typescript and postgreSQL.

Now we need to initialize the Typescript, remembering that it is a tool that will 'modify' your file, adding a layer of processes and typing that will not go to production.

A tsconfig.json file will be created, where you can add and configure your Typescript.

All properties have some value, and I recommend that you research or even test the change that each of them may have in your project, but the ones described in the step-by-step were the ones that best suited my style of code.

Some interesting ones to mention:

"allowSyntheticDefaultImports": this way will be able to do default imports, like import express from 'express';
"skipLibCheck": this can save time during compilation at the expense of type-system accuracy.

IT'S IS IMPORTANT

I see many junior developers who don't understand scripts and how they work, this is worrying, because they are an details of your application that needs to make sense with its context.

Let's understand our script:

"start:dev": "nodemon --watch 'src/' --exec 'ts-node -r tsconfig-paths/register resrc/server.ts' -e ts"

Uses nodemon to monitor changes to files inside the "src/" folder
Run ts-node to record the tsconfig path, and run the server.ts file inside the "src/server.ts" folder
Uses the .ts extension for TypeScript files.

Explaining a little better:
I want this application to have the 'start:dev' command in which to run the nodemon lib and watch (--watch) just the "src/" folder and then run the 'ts-node -r tsconfig-paths/register resrc' command /server.ts', in this command I want to run ts-node to build my application and start it with my main file 'server.ts'

Continuing,

I'm not going to explain the configuration of eslint and prettier, it's something personal, and normally in a company everything is already configured for you, but study to better understand how you can do it your way.

The gits hooks are very valid for N reasons, but the configuration I left is specific to code standardization it if you work with a team, having a standardized code is very important. Of course, issues like programming logic are not so simple to standardize, but this configuration will help with formatting and semantic commits.

Lastly,

We have path mappings, beautiful and smelling it's solve the paths like '../../../../../BlaEntity/index.ts'.

I will demonstrate following the example above:

.tsconfig.json

"paths": {
   "@Bla/*": ["/domain/entities/flo/flu/BlaEntity/*"]
},
"baseUrl": "./src"


./another-file

import { BlaEntity } from '@Bla/index.ts'

It's a silly example, but feel free to define the nomenclature you want, then just assign its value with the path you determine.

Thank you for reading, I will try to make better and smaller articles, but I confess that I get carried away writing <3