Creating A Typescript Project
Tags: typescript, node, tutorial
Published: 2020-10-04 22:45:14

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](https://pnpm.js.org/).

### 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.

```bash
pnpm init -y
```

The next command we will be running is for initializing a [git repository](https://git-scm.com/). Git is a [version control system](https://www.atlassian.com/git/tutorials/what-is-version-control) will help us to manage and store our code and to help us with collaboration. 

```bash
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.

```bash
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)

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

### .eslintrc.json (ESLint)

```json
{
    "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.

```json
{
    "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

```bash
# 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.

```json
    "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](https://github.com/creepinson/typescript-template) 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.