Your First TypeScript Program

Introduction

Running one TypeScript file end-to-end locks in the workflow: write .ts, configure the compiler, emit .js, run with Node. Earlier chapters installed tools and configured the editor; this chapter walks through a small program from an empty project folder so you can repeat the steps confidently.

Prerequisites

• Installing TypeScript and Project Setup
• Editor Setup for TypeScript (optional but helpful)
• Node.js LTS on your PATH

The Compile Pipeline

TypeScript does not run directly in Node. The usual path:

  hello.ts  ──►  tsc (compiler)  ──►  hello.js  ──►  node
     │              reads                    plain
     │           tsconfig.json              JavaScript
  types checked
  (erased in output)

Code explanation:

• Source (.ts) may include type annotations
• tsc type-checks and writes JavaScript according to compilerOptions
• Runtime (Node or browser) only sees the emitted .js

Create a Fresh Practice Project

From a parent directory:

mkdir ts-first-app
cd ts-first-app
npm init -y
npm install --save-dev typescript
npx tsc --init

Trim tsconfig.json for clarity:

Create the source folder:

mkdir src

Write src/index.ts

A slightly richer example than plain console.log—a typed greeting function:

// Return a greeting string for a given name
function greet(name: string): string {
  return `Hello, ${name}!`;
}
 
const appName: string = "ts-first-app";
const message: string = greet("TypeScript learner");
 
console.log(message);
console.log(`Running project: ${appName}`);

Code explanation:

• name: string and : string return type tell the compiler what shapes are allowed
• const variables get explicit string types here for practice; inference would also work (see the next chapter)
• Template literals (backticks) work the same as in JavaScript

Save the file. Open the ts-first-app folder in VS Code if you use it.

Compile

From the project root:

npx tsc

On success, you should see:

dist/
  index.js

If tsc reports errors, fix them before running—unlike JavaScript, TypeScript blocks emit when type-checking fails (unless you use options that allow emit on error, which this tutorial does not recommend).

Optional watch mode while editing:

npx tsc --watch

Run the Output

node dist/index.js

Expected output:

Hello, TypeScript learner!
Running project: ts-first-app

Code explanation:

• You run dist/index.js, not src/index.ts
• Node has no built-in TypeScript runner in this workflow—you compile first

Compare Source and Output

Open dist/index.js. You will see plain JavaScript—no : string annotations:

function greet(name) {
    return `Hello, ${name}!`;
}
const appName = "ts-first-app";
const message = greet("TypeScript learner");
console.log(message);
console.log(`Running project: ${appName}`);

That is what ships to production or the browser: same logic, types stripped away.

Add an npm Script

In package.json:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Then:

npm run build
npm start

Code explanation:

• build is the type-check + compile step teams run in CI
• start assumes dist/ is up to date after build

Intentional Type Error (Learning Exercise)

Change one line to break the type contract:

const message: string = greet(123);

Run npx tsc again. You should see an error similar to:

Argument of type 'number' is not assignable to parameter of type 'string'.

Revert to greet("TypeScript learner") before continuing. This is the core value of TypeScript: catching mistakes before runtime.

Project Layout Reference

ts-first-app/
├── package.json
├── package-lock.json
├── tsconfig.json
├── node_modules/
├── src/
│   └── index.ts
└── dist/          ← generated; often gitignored
    └── index.js

Add to .gitignore:

node_modules/
dist/

FAQ

Can I run .ts files without compiling?

Tools like tsx or ts-node exist for development. This track uses tsc + node first so you understand the default compiler pipeline.

Why is dist/ empty until I run tsc?

The compiler only writes output when you run it (or watch mode). Saving in VS Code does not emit .js unless you configure a build task or use --watch.

Do I commit dist/ to git?

For libraries you sometimes publish compiled output; for apps, teams usually build in CI and deploy artifacts. For learning repos, ignoring dist/ is common.

My error mentions rootDir or include—what now?

Ensure .ts files live under src/ if rootDir is "src", and that include matches your folder (for example "src/**/*").

Is index.ts a required name?

No. Any filename works; adjust node dist/your-file.js accordingly. index.ts is a convention for entry points.