Typescript in a Webstorm monorepo

When working on a project with multiple apps, it’s important to maintain consistency and cohesion among all of the different codebases. One way to do this is by sharing types between the apps, so that each app can communicate with one another effectively and efficiently. One tool that can help facilitate this is a Typescript monorepo.

Webstorm is a powerful and feature-rich code editor that is widely used by developers around the world. Its intuitive interface, fast performance, and extensive toolset make it a top choice for professionals looking to streamline their workflow and increase productivity.

TypeScript is a popular programming language that provides optional static typing and class-based object-oriented programming to JavaScript. Once your project is set up to use TypeScript, you can begin writing TypeScript code. Some of the key features of TypeScript include strong typing, classes, interfaces, and types. You can use these features to build robust and scalable applications.

Some notes before we start:

• Do not include eslintor tslint packages in the root directory. For some reason, this does not work well with Webstorm.
• When importing types in your client code, always use the import type declaration. For instance import type { MyQuery } from '@super-app/server/types . This ensures no server code is included in your client application.

Project root

Let’s initialize an imaginary project.

mkdir super-app
mkdir super-app/packages
mkdir super-app/packages/client
mkdir super-app/packages/server

~/super-app/package.json

{
  "name": "@super-app/root",
  "version": "1.0.0",
  "description": "Super app",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

~/super-app/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "strict": true,
    "allowJs": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "Node",
    "removeComments": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "target": "ESNext",
    "paths": {
      "@super-app/*": [
        "packages/*"
      ]
    }
  }
}

Install Typescript in the root folder.

cd super-app
yarn add typecript -D

Client setup

~/super-app/packages/client/package.json

{
  "name": "@super-app/client",
  "private": true,
  "version": "1.0.0",
  "type": "module"
}

cd super-app/packages/client
yarn add eslint tslint -D

~/super-app/packages/client/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "skipLibCheck": true,
    "esModuleInterop": false,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*"]
}

Server setup

~/super-app/packages/server/package.json

{
  "name": "@super-app/server",
  "private": true,
  "version": "1.0.0"
}

~/super-app/packages/server/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "sourceMap": true,
    "outDir": "dist",
    "lib": ["esnext"],
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

cd super-app/packages/server
yarn add eslint tslint -D

You should now be ready to go with automatic Typescript and TSLint configuration in Webstorm. Drop me a comment and like this article if you found it useful. Good luck!