Creating A Typescript Project

Hello everyone, today I am going to be teaching you how I make new typescript projects. Most of the files here are based on my personal preference but you can change them to yours. I plan on making a series of posts for working with monorepos (workspaces) and installing the necessary Visual Studio Code Extensions.

Installation

You can use any package manager (yarn or npm), but today I'll be using pnpm.

Initializing the Project

This command will create the template package.json file for us to use. This file will store all of our dependency versions and our npm scripts.

pnpm init -y

The next command we will be running is for initializing a git repository. Git is a version control system will help us to manage and store our code and to help us with collaboration.

git init

Typescript + Prettier + ESLint Installation

The next thing you'll want to do is install all of the development dependencies. Prettier is for formatting your code which makes it much more readable.

pnpm i -D typescript @types/node prettier eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

Setting Up The Configuration Files

Next we will need to set up the configuration files for the various packages.

.prettierrc (Prettier)

{
    "tabWidth": 4,
    "printWidth": 80,
    "trailingComma": "all",
    "semi": true
}

.eslintrc.json (ESLint)

{
    "extends": [
        "prettier",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint"
    ],
    "parser": "@typescript-eslint/parser"
}

tsconfig.json (Typescript)

This is our typescript build configuration file. You can set declaration to true if you are making a library for other developers to use in their own packages.

{
    "compilerOptions": {
        "target": "ES2019",
        "module": "CommonJS",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "outDir": "dist"
    },
    "include": ["src"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

.gitignore

# Distribution
dist
out
build
node_modules

# Logs
*.log*
logs

# Environment
*.env*

# Misc
.DS_Store

package.json

Finally, we will add a scripts section to the package.json. This will let us build the project with pnpm run build. Keep in mind that the following code block does not contain the full package.json, only the scripts section.

    "scripts": {
        "build": "tsc --build"
    },

Final Notes

Now you can create your source files in the src folder of your project. I have also created a github template repository for you to initialize your projects with if you do not want to follow all of these steps each time you create a new project.

That's it! Thanks for reading one of my first dev.to posts.