Setting up the Clean Architecture Project with Typescript

Setting up the Clean Architecture Project with Typescript

Clean Architecture Series

Continuing with the Clean Architecture Series, in this article we will create a specific structure to organize the CA layers and also packages to setup typescript.

So, let me walk through the process to setting up the project.

Project Folders

Create a folder project call "clean-architecture". Go inside the folder and run the following command to create a new project:

npm init --yes # this will trigger automatically populated initialization with default values

After that, we are going to create folders which represent the clean architecture layers:

  • src:

    • adapters: Interface adapters (controllers, gateways and presenters)

    • use-cases: Application business rules (use cases of the system)

    • domain: Enterprise business rules (Entities & Repositories)

    • frameworks: Frameworks, drivers and tools (Web framework, database, logger)

├── src
│   ├── adapters
│   ├── use-cases
│   ├── domain
│   └── frameworks
└── package.json

Typescript Setup

For setup typescript properly, we need to create the "tsconfig.json" file in the same level as "src" folder. We need to set a config similar to:

{
    "compilerOptions": {
      "module": "CommonJS",
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "target": "ES6",
      "lib": [
        "ES2019"
      ],
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "./dist",
      "baseUrl": ".",
      "paths": {
        "@/adapters/*":[
            "src/adapters/*"
        ],
        "@/use-cases/*":[
            "src/use-cases/*"
        ],
        "@/domain/*":[
            "src/domain/*"
        ],
        "@/frameworks/*":[
            "src/frameworks/*"
        ],
      },
      "types": ["node"],
      "typeRoots": [
        "node_modules/@types"
      ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Special mention for the path alias configuration property which allows us to have an one alias for each clean architecture layer: adapters, use-cases, domain and frameworks.

\If you are new to "TSConfig Path Aliases" itself, refer first to my previous article "[How to configure TSConfig Path Aliases](maxmartinez.dev/how-to-configure-tsconfig-p..)" to setup properly the path aliases.*

And also express web server and the database package:

npm install express sqlite3
npm install -D @types/express @types/sqlite3

Finally, we will update the package.json file. Replace the scripts config with this:

...
"scripts": {
    "build": "tsc --build && tsc-alias",
    "start": "ts-node-dev --respawn -r tsconfig-paths/register ./src/frameworks/webserver/app.ts"
  },
...

\With ts-node-dev we get the same experience as nodemon*.

\*Don't worry about the app.ts file, we will create it later.*

We are ready to coding our clean architecture project. See you in the next article.

Did you find this article valuable?

Support Max Martínez Cartagena by becoming a sponsor. Any amount is appreciated!