TypeScript Setup: Install, Compile and Run TS Code

Install TypeScript

TypeScript is usually installed through npm. For most projects, install it as a development dependency so the project controls its own compiler version. This avoids surprises when different developers have different global TypeScript versions installed.

You can also use TypeScript through frameworks such as Angular, Next.js, Vite, NestJS, Remix, or Vue. Even when a framework hides most setup details, understanding the plain compiler workflow helps you debug errors and read project configuration confidently.

Install TypeScript Locally

npm init -y
npm install --save-dev typescript
npx tsc --version

Create a Simple TypeScript File

Create a file named app.ts. TypeScript files usually use the .ts extension. The compiler checks the TypeScript code and emits JavaScript that Node.js or the browser can run.

TypeScript itself is not a runtime. The type annotations are removed during compilation, and the final output is JavaScript.

First TypeScript File

const message: string = "Hello TypeScript";
const year: number = 2026;

console.log(`${message} in ${year}`);

Compile and Run

The TypeScript compiler is called tsc. When you compile app.ts, TypeScript checks the types and creates app.js. The JavaScript file is what you execute with Node.js.

If the compiler finds a type error, it reports the problem with a file name and line number. Fix those errors early instead of waiting until runtime.

Command	Purpose
npx tsc app.ts	Compile one TypeScript file.
node app.js	Run the generated JavaScript with Node.js.
npx tsc --watch	Keep the compiler running and rebuild after changes.

Compile a TypeScript File

npx tsc app.ts
node app.js

Create tsconfig.json

A tsconfig.json file stores compiler settings for the whole project. Once it exists, you can run npx tsc without passing every file manually.

The config also tells TypeScript which folders belong to the project, what JavaScript version to target, whether strict checking is enabled, and where output files should be written if the compiler emits JavaScript.

Initialize Configuration

npx tsc --init
npx tsc

Recommended Folder Structure

A common beginner structure keeps TypeScript source files in src and compiled JavaScript in dist. This separates code you write from code generated by the compiler.

Framework projects may use a different structure, but the same idea applies: source code should be organized clearly, and generated output should not be edited by hand.

src contains TypeScript files you edit.
dist contains JavaScript files created by the compiler.
tsconfig.json controls how TypeScript checks and builds the project.

Simple Project Layout

my-typescript-app/
  package.json
  tsconfig.json
  src/
    app.ts
  dist/
    app.js

Editor Setup

Modern editors such as Visual Studio Code understand TypeScript very well. You get autocomplete, inline errors, refactoring tools, go-to-definition, and hover information without much extra setup.

The best workflow is to let TypeScript guide you while you type. Do not wait until the end of a feature to run the compiler. The earlier you respond to type errors, the easier they are to fix.

Use the local TypeScript version from the project when possible.
Keep strict mode enabled for new projects.
Use editor warnings as learning feedback, not just build failures.
Run npx tsc --noEmit in CI when a bundler handles JavaScript output.

Recommended Beginner Workflow

Start small: create one TypeScript file, compile it, run the generated JavaScript, then add tsconfig.json. After that, move into functions, arrays, objects, unions, and interfaces.

The workflow has three roles: TypeScript checks the code, JavaScript runs the emitted code, and compiler configuration connects the project.

Write TypeScript in src files.
Enable strict early so the compiler teaches good habits.
Use noEmit when a bundler such as Vite handles output.
Use tsc --watch while practicing small examples.

Before you move on