Intro to TypeScript

JavaScript with superpowers. Types catch bugs before your code runs.

1

The Story of TypeScript

In 2012, Anders Hejlsberg at Microsoft had a problem. The same engineer who created C# was watching large JavaScript codebases collapse under their own weight. Bugs hid in plain sight. Refactoring was terrifying. So he built something new: a language that adds types on top of JavaScript, catching mistakes before the code ever runs.

The key insight: every valid JavaScript program is already a valid TypeScript program. You don't replace JS. You enhance it.

Angular
Built with TS
VS Code
Written in TS
Slack
Desktop app
Airbnb
Full frontend
Bloomberg
Trading tools
Figma
Design tool
Fun Fact

TypeScript is one of the fastest-growing programming languages in the world. In Stack Overflow's developer surveys, it consistently ranks among the most loved languages, ahead of JavaScript itself.

2

Hello, World!

Your first TypeScript program looks almost identical to JavaScript. The only difference is a small annotation that tells the compiler what type each variable holds. Types are labels, not new syntax.

JavaScript
1const name = "World"; 2console.log(`Hello, ${name}!`);
TypeScript
1const name: string = "World"; 2console.log(`Hello, ${name}!`);

See the : string after name? That is a type annotation. It tells TypeScript (and anyone reading the code) that name will always be a string. If you accidentally try to assign a number to it later, TypeScript flags the error immediately.

Both versions produce exactly the same output: Hello, World!
TypeScript compiles to plain JavaScript. The types disappear at runtime.
3

Type Annotations

TypeScript has four basic types you will use constantly: string, number, boolean, and arrays. You add them after variable names and function parameters.

1// Variables with types 2let username: string = "Alice"; 3let score: number = 42; 4let isOnline: boolean = true; 5let tags: string[] = ["ts", "web", "dev"]; 6 7// Function with typed parameters and return type 8function greet(name: string, age: number): string { 9 return `Hi ${name}, you are ${age}`; 10}

Here is the key moment. What happens when you make a mistake?

X score = "forty-two"
Type 'string' is not assignable to type 'number'.
X greet("Alice", "twenty")
Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript tells you about both bugs before you run the code. In plain JavaScript, these mistakes silently succeed and produce wrong results later.

Try it: Type Checker

let x: =
Type a value above...
4

Interfaces and Objects

Real applications pass around objects, not just strings and numbers. An interface defines the shape of an object: what properties it must have, and what type each property holds. Think of it as a blueprint.

1interface Player { 2 name: string; 3 score: number; 4 email?: string; // optional (the ? means it can be missing) 5} 6 7const player1: Player = { 8 name: "Alice", 9 score: 1200 10}; // Valid: email is optional

If you misspell a property or forget a required one, TypeScript catches it instantly. The interface also serves as documentation: anyone reading the code knows exactly what a Player looks like.

Build an Interface

Edit the field names, types, and optional markers to see the interface update in real time.

1.
2.
3.
interface Person { name: string; age: number; email: string; }
5

What Makes TypeScript Special

TypeScript is not just about catching typos. It fundamentally changes how you write and maintain code. Here is why professional teams choose it.

OK

Catches Bugs Before Runtime

Type errors surface the moment you write them, not when a user triggers the bug in production. Entire categories of bugs simply disappear.

DOC

Self-Documenting Code

Types act as living documentation. When you see greet(name: string, age: number): string, you know exactly what the function expects and returns, without reading a single comment.

IDE

Excellent IDE Support

Your editor knows every property, method, and type in your codebase. Autocomplete becomes precise. Refactoring (like renaming a function) works across thousands of files safely.

JS

100% Compatible with JavaScript

TypeScript compiles down to regular JavaScript. It runs in every browser, on every server, on every phone. Your existing JS libraries work without changes.

++

Gradual Adoption

You can add TypeScript to an existing JavaScript project one file at a time. Rename .js to .ts, add types where it helps, and leave the rest alone. No big rewrite needed.

Industry Fact

In a study by Airbnb, adopting TypeScript across their codebase prevented an estimated 38% of the bugs that would have made it to production. Teams report spending significantly less time debugging and more time building features.

6

Try It Yourself

The MYTEK Lab terminal has TypeScript ready to go. Install the compiler, write a .ts file, and compile it to JavaScript. Here is the workflow.

1. Install TypeScript

~ $ apt install typescript
Installing typescript...
typescript installed successfully

2. Write a TypeScript file

~ $ nano app.ts
1function add(a: number, b: number): number { 2 return a + b; 3} 4 5console.log(add(5, 3));

3. Compile and run

~ $ tsc app.ts
Compiling app.ts...
Created app.js

~ $ node app.js
8

The tsc command (TypeScript Compiler) reads your .ts file, checks all the types, and generates a plain .js file. If there are type errors, it tells you before producing any output.

4. Use the REPL for quick experiments

~ $ tsc
TypeScript REPL v5.3.3
Type expressions to evaluate. Type .exit to quit.
ts> let x: number = 10
ts> x * 2
20
Tip

Try introducing a type error on purpose, like passing a string to the add function. The compiler will show you exactly what went wrong and where.

TypeScript Pro!

You now understand how TypeScript adds a safety net to JavaScript. Types prevent bugs, serve as documentation, and power the autocomplete that professional developers rely on every day.

0
Sections Explored
0
Time Exploring

Types Prevent Bugs

TypeScript catches mistakes at compile time, before your code ever runs. A misspelled property or wrong argument type is flagged instantly.

Compiles to JavaScript

TypeScript is not a replacement for JS. It compiles down to plain JavaScript that runs everywhere: browsers, servers, phones.

Industry Standard

Angular, VS Code, Slack, Airbnb, and Bloomberg all use TypeScript. It is the professional standard for large JavaScript projects.

Gradual Adoption

You do not have to rewrite everything. Rename .js to .ts and add types incrementally. Every valid JS file is already valid TS.

Ready to Create?

Put your new knowledge into practice!

Suggest a Correction