Maximum performance at minimal cost. Start your server in seconds now!

    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:

    Copy Code 
    

        mkdir typescript-project

    Change into your project directory:

    Copy Code 
    

        cd typescript-project

    Install TypeScript as a development dependency:

    Copy Code 
    

        npm i typescript --save-dev

    Initialize your project:

    Copy Code 
    

        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:

    Copy Code 
    

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

    Compile your project:

    Copy Code 
    

        npx tsc

    Run the compiler in watch mode to automate recompilation:

    Copy Code 
    

        npx tsc -w

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

    Install Google TypeScript Style (GTS):

    Copy Code 
    

        npm i gts --save-dev

    Initialize GTS:

    Copy Code 
    

        npx gts init

    Run lint checks and compile your code using GTS:

    Copy Code 
    

        npm run check

    Copy Code 
    

        npm run compile

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

    Copy Code 
    

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