TypeScript: Introduction to TypeScript

TypeScript is an "upgraded version" of JavaScript—it adds type checking to JavaScript, allowing you to catch errors before your code runs.

This tutorial is designed for beginners with no prior experience. It starts with installation and configuration and guides you all the way to independently developing a command-line application using TypeScript.

1. What You'll Learn

• TypeScript Basic Types and Type Annotations
• Core concepts such as interfaces, generics, and type aliases
• Using Classes, Modules, and Decorators in TypeScript
• Migrating from a JavaScript project to TypeScript
• Comprehensive Project Practice

2. What Is TypeScript?

TypeScript is an open-source programming language developed by Microsoft and first released in 2012. It is a superset of JavaScript—meaning that all valid JavaScript code is also valid TypeScript code; however, TypeScript adds a type system on top of that.

To use an analogy: JavaScript is like riding a bike—you can get there without looking at street signs, but it’s easy to take a wrong turn; TypeScript is like riding a bike while using a GPS—it tells you where to turn and which streets are dead ends before you even set off.

3. The Relationship Between TypeScript and JavaScript

To understand the relationship between TS and JS, the key lies in three terms: superset, compilation, and compatibility.

(1) Superset: Everything in TS is also in JS

Any JavaScript code will work if you simply put it directly into a .ts file. You don’t need to learn a new language from scratch—TypeScript builds on JavaScript rather than starting from scratch.

(2) Compilation: TS cannot run directly in a browser

Browsers only support JavaScript, not TypeScript. Therefore, the .ts code you write must first be compiled by the TypeScript compiler (tsc) into a .js file before it can run in a browser or Node.js.

.ts Documents  →  TypeScript Compiler (tsc)  →  .js Documents  →  Browser/Node.js Run

This compilation process is the core value of TypeScript—checking for type errors at compile time, rather than waiting until runtime to report errors.

(3) Compatibility: Existing JS projects can be migrated gradually

You can change .js to .ts file by file; there’s no need to rewrite the entire project at once. The TypeScript official documentation provides the allowJs option, which allows you to mix JavaScript files within a TypeScript project.

▶ Example: Using JavaScript code directly as TypeScript

// This is a standard JavaScript Code
function greet(name) {
  return "Hello, " + name;
}

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

This code requires no modifications; you can simply place it in the .ts file and it will compile successfully—because TypeScript is a superset of JavaScript.

Output:

Hello, Charlie

4. Why Learn TypeScript?

If you already know JavaScript, why spend time learning TypeScript? Four words: error prevention and increased efficiency.

(1) Errors are detected at compile time rather than causing a crash at runtime

JavaScript is a dynamically typed language—the type of a variable isn’t determined until runtime. This offers flexibility, but at a cost: a typo or a type mismatch may not be detected until the user clicks a button.

// JavaScript：No errors will occur，But the result was NaN
let price = "99";
let total = price * 2;  // NaN —— Strings cannot be multiplied.

TypeScript will catch you at compile time:

// TypeScript：Compilation error，Immediate Reminder
let price: string = "99";
let total: number = price * 2;  // ❌ Error：string This type cannot be used in arithmetic operations.

(2) Editor autocomplete makes coding faster

VS Code offers out-of-the-box support for TypeScript. As you type a variable name, the editor automatically suggests available properties and methods, and highlights type errors in real time—just like having a partner by your side to keep you on track.

(3) Code is documentation, making team collaboration smoother

Type annotations in TypeScript are the best form of documentation. When you see function getUser(id: number): User, you know right away that the parameter is a number and the return value is a User object. There’s no need to write additional comments—the type itself says it all.

(4) Industry Trends: A Plus for Employment

Starting with version 2.0, Angular has been developed using TypeScript; Vue 3 has been rewritten in TypeScript; React + TypeScript has become the standard; and Deno and Bun natively support TypeScript. In front-end job postings, “familiarity with TypeScript” has gone from being a plus to a basic requirement.

▶ Example: TypeScript Type Checking in Action

// TypeScript Type errors will be caught at compile time
let age: number = 25;
age = "Twenty-six";  // ❌ Compilation Error：You cannot string Assign to number

// JavaScript The same code won't cause an error here.，But there might be problems during runtime.

5. The TypeScript Workflow

The complete development process using TypeScript is as follows:

1. Create a .ts file—write code in TypeScript and add type annotations
2. Compile .ts → .js—Compile using the tsc command; the compiler checks for type errors
3. Run the .js file—the compiled JavaScript can be run in any environment

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Write .ts    │ ──→ │  tsc Compilation    │ ──→ │  Run .js    │
│  Type Annotations    │     │  Type Checking    │     │  Browser/Node │
└──────────────┘     └──────────────┘     └──────────────┘

Output:

Write .ts ──→ tsc Compile (type checking) ──→ Run .js (Browser/Node)

6. Who Should Learn TypeScript

▶ Example: TypeScript Adds Safety to JavaScript

Output:

8

// JavaScript — no type errors, but buggy
function add(a, b) {
  return a + b;       // "5" + 3 = "53" (string concatenation!)
}

// TypeScript — catches the bug at compile time
function addTyped(a: number, b: number): number {
  return a + b;       // always returns a number
}

console.log(addTyped(5, 3));       // 8
// addTyped("5", 3);              // ❌ Error: string not assignable to number

Output:

8

❓ FAQ

📖 Summary

• TypeScript is a superset of JavaScript that adds a static type system
• TS code must be compiled to JS in order to run; the compilation process is the type-checking process.
• The core value of TypeScript: compile-time error detection, editor autocomplete, code-as-documentation, and industry trends
• All JavaScript code is inherently valid TypeScript code
• Before starting this tutorial, you should have a basic understanding of JavaScript syntax.

📝 Exercises

1. Basic Question (Difficulty: ⭐): Explain in your own words the three key differences between TypeScript and JavaScript, and describe your understanding of the term "superset."
2. Advanced Exercise (Difficulty ⭐⭐): Write a piece of JavaScript code that contains a type error (such as treating a string as a number), and then explain how TypeScript catches this error at compile time.
3. Challenge (Difficulty: ⭐⭐⭐): Research a front-end framework you’re interested in (Angular / Vue / React), find out how well it supports TypeScript, and write a brief summary.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us