How To Set Up a New TypeScript Project

Introduction

You may have worked with TypeScript before when using a starter project or a tool like the Angular CLI. In this tutorial, you will learn how to set up a project without a starter’s help. You will also learn how compiling works in TypeScript and how to use a linter with your TypeScript project.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

Table of Contents

• Starting the TypeScript Project
• Compiling the Project
• Use Google TypeScript Style to Lint and Code

Prerequisites

To complete this tutorial, you will need the following:

• The latest version of Node installed on your machine. Follow the How to Install Node.js and Create a Local Development Environment tutorial.
• Familiarity with npm. To learn more, check out the How To Use Node.js Modules with npm and package.json tutorial.
• A recent version of Ubuntu (20.04, 22.04, or 24.04). Upgrade older versions as needed.

Step 1 — Starting the TypeScript Project

Create a directory for your project:

mkdir typescript-project

Change into your project directory:

cd typescript-project

Install TypeScript as a development dependency:

npm i typescript --save-dev

Initialize your project:

npx tsc --init

This creates a tsconfig.json file in your project directory. Customize it as needed, such as by setting outDir to "./build" to organize compiled files.

Step 2 — Compiling the TypeScript Project

Create a new file named index.ts and add the following code:

      const world = 'world';
      export function hello(who: string = world): string {
        return `Hello ${who}! `;
      }
    

Compile your project:

npx tsc

Run the compiler in watch mode to automate recompilation:

npx tsc -w

Step 3 — Using Google TypeScript Style to Lint and Correct Your Code

Install Google TypeScript Style (GTS):

npm i gts --save-dev

Initialize GTS:

npx gts init

Run lint checks and compile your code using GTS:

npm run check

npm run compile

Extend default ESLint rules by creating a file named .eslintrc:

      ---
      extends:
        - './node_modules/gts'
    

Conclusion for TypeScript Project

In this tutorial, you set up a project, customized its configuration, and integrated Google TypeScript Style. GTS simplifies project setup and ensures consistency with default linting and formatting rules.