Getting Started with TypeScript

TypeScript has become the default language for modern JavaScript development.
It adds types, interfaces, and tooling that make your code safer and easier to maintain — all while compiling down to plain JavaScript.

This post will walk you through setting up TypeScript, understanding its basic syntax, and running your first .ts file.

1. What Is TypeScript?

TypeScript is a superset of JavaScript created by Microsoft.
It adds static typing, interfaces, and compile-time checks to JavaScript.

In short: TypeScript = JavaScript + Types

Every valid JavaScript file is also valid TypeScript.
TypeScript code compiles into JavaScript so it can run in any browser or runtime (Node.js, Bun, Deno, etc).

📘 Official Docs

2. Installing TypeScript

To install TypeScript globally via npm (Node.js required):

npm install -g typescript

Check the version:

tsc -v

Alternatively, you can use Bun:

bun add typescript -d

3. Setting Up a Project

Create a folder for your project:

mkdir ts-basics && cd ts-basics
npm init -y
npm install typescript --save-dev
npx tsc --init

This will generate a tsconfig.json file — TypeScript’s configuration file.

Inside that file, you’ll see options that control how your code compiles.
For now, you can keep the defaults.

4. Writing Your First TypeScript File

Create a file called hello.ts:

const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet("Dogunfx"));

Now compile it into JavaScript:

npx tsc hello.ts

This produces a file called hello.js.
Run it using Node.js or Bun:

node hello.js

or

bun hello.js

5. Understanding Basic Types

TypeScript includes several built-in types:

let username: string = "Dogunfx";
let age: number = 25;
let isAdmin: boolean = true;
let skills: string[] = ["JavaScript", "TypeScript", "Node.js"];

You can also define union types:

let id: string | number = "abc123";
id = 99; // ✅ works fine

And type inference means TypeScript can guess the type:

let language = "TypeScript"; // inferred as string

6. Interfaces and Objects

Interfaces let you define the shape of an object:

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const user: User = {
  id: 1,
  name: "Dogunfx",
  isActive: true,
};

You can even use optional or readonly properties:

interface Product {
  id: number;
  name: string;
  price?: number; // optional
  readonly sku: string; // cannot be changed
}

7. Functions and Type Safety

function add(a: number, b: number): number {
  return a + b;
}

const subtract = (a: number, b: number): number => a - b;

console.log(add(5, 10));
console.log(subtract(10, 4));

TypeScript ensures you can’t call these with invalid arguments:

add("5", 10); // ❌ Error

8. Classes and OOP

class Person {
  constructor(public name: string, private age: number) {}

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const dev = new Person("Dogunfx", 25);
dev.greet();

Here, public and private are access modifiers — controlling what can be accessed outside the class.

9. Compiling Automatically (Watch Mode)

To recompile automatically whenever files change:

npx tsc --watch

This helps when building larger projects so you don’t re-run tsc manually every time.

10. Using TypeScript with Bun or Node.js

Both Node.js and Bun now support .ts execution directly.

With Bun

bun run hello.ts

With Node (v22+)

node --import tsx hello.ts

📘 Bun TypeScript Docs

11. Next Steps

Now that you’ve learned the basics:

• Explore enums, generics, and modules.
• Learn how to integrate TypeScript into React or Vue.
• Experiment with type narrowing and utility types.

📚 Resources:

• TypeScript Handbook
• MDN JavaScript Guide
• TypeScript Deep Dive (Free Book)

TypeScript isn’t just a tool for large teams — it’s your safety net for writing clean, predictable code.
Once you start using it, you’ll wonder how you ever lived without it.