How to Start a New TypeScript Project

Introduction

You may have already worked with TypeScript when using a starter project or a tool like Angular CLI. In this tutorial, you'll learn how to set up a TypeScript project without the help of a starter. You'll also learn how compilation works in TypeScript and how to use a linter in your TypeScript project.

Prerequisites

The latest version of Node installed on your device.
Getting to know npm

Step 1 – Start a TypeScript project

To start your TypeScript project, you need to create a directory for your project:

mkdir typescript-project

Now change to your project directory:

cd typescript-project

You can install TypeScript by setting up your project directory:

npm i typescript --save-dev

It is important that the flag --save-dev Add TypeScript as it stores TypeScript as a development dependency. This means that TypeScript is required for development of your project.

With TypeScript installed, you can initialize your TypeScript project using the following command:

npx tsc --init

npm It also has a tool called npx which executes executable packages. npx It allows us to run packages without the need for a global installation.

Order tsc It is used here because it is the built-in compiler for TypeScript. When you write code in TypeScript, the execution tsc It converts or compiles your code into JavaScript.

Using the flag --init In the above command, your project is initialized by creating a tsconfig.json file in your TypeScript project directory. This tsconfig.json file allows you to do further configuration and how TypeScript and the compiler interact. tsc Customize. You can remove, add, and modify configurations in this file to best meet your needs.

tsconfig.json Open it in your editor to find the default configuration:

nano tsconfig.json

There will be many options, most of which are explained below:

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

You can customize your TypeScript configuration via the tsconfig.json file. For example, you might uncomment the outDir entry and set it to “./build”, which will place all of your compiled TypeScript files in that directory.

By installing TypeScript and installing the file tsconfig.jsonNow you can move on to coding the TypeScript application and compiling it.

Step 2 – Compile the TypeScript project

Now you can start coding your TypeScript project. Create a new file called index.ts Open it in your editor. Paste the following TypeScript code in index.ts Write:

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

With this TypeScript code in place, your project is ready to compile. Run tsc from your project directory:

npx tsc

You will notice that the compiled JavaScript file index.js and the sourcemap file index.js.map are both added to the build folder, if you specified it in the tsconfig.js file.

index.js Open it and you will see the following compiled JavaScript code:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

Running the TypeScript compiler every time you make a change can be tedious. To fix this, you can put the compiler in watch mode, which will recompile your code every time a change is made.

You can enable watch mode using the following command:

npx tsc -w

You have learned how the TypeScript compiler works and can now successfully compile your TypeScript files. You can take your TypeScript projects to the next level by introducing a linter into your workflow.

Step 3 – Use Google TypeScript Style to fill and correct your code

Using a linter when coding helps you quickly find inconsistencies, syntax errors, and omissions in your code. Additionally, a style guide not only helps you ensure that your code is well-formed and consistent, but it also allows you to use additional tools to enforce that style. A popular tool for this is eslint, which works well with many IDEs to aid in the development process.

Once you have your project up and running, you can use other tools in the TypeScript ecosystem to help you avoid having to manually set up your tsconfig.json file. Google TypeScript Style is one of those tools. Google TypeScript Style, also known as GTS, is a style guide, inline stylesheet, and automatic code corrector all in one. Using GTS helps you quickly boot up a new TypeScript project and avoid having to worry about small, organizational details to focus on the design of your project. GTS also provides default settings. This means you won’t need to customize many settings.

Start by installing GTS:

npm i gts --save-dev

From here, initialize the GTS using the following command:

npx gts init

The above command will create everything you need to get started with your TypeScript, including a tsconfig.json file and a linting setup. A package.json file will also be created if you don't already have one.

Running npx gts init also adds useful npm scripts to your package.json file. For example, you can now run npm run compile to compile your TypeScript project. To check for curtain errors, you can now run npm run check.

GTS is now installed and properly integrated into your TypeScript project. Using GTS in future projects will allow you to quickly set up new TypeScript projects with the necessary settings.

Since GTS offers a no-configuration, opinion-based approach, it uses its own sensible rules. These follow best practices, but if you need to change the rules in any way, you can do so by extending the default eslint rules. To do this, create a file in your project directory called .eslintrc that extends the style rules:

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

This allows you to add or modify the style rules provided by GTS.

Result

In this tutorial, you started a TypeScript project with custom settings. You also integrated Google TypeScript Style into your TypeScript project. Using GTS helps you get up and running quickly with a new TypeScript project. With GTS, you don't need to manually set up the configuration or integrate a linter into your workflow.