JS
TS

JavaScript to TypeScript

10 lessons

Progress0%
1Introduction to TypeScript2Basic Types3Arrays and Tuples4Function Types5Object Types6Interfaces7Union Types8Generics9Type Guards10Utility Types
All Mirror Courses
JS
TS
Introduction to TypeScript
MirrorLesson 1 of 10
Lesson 1

Introduction to TypeScript

Understanding what TypeScript adds to JavaScript

Introduction

In this lesson, you'll learn about introduction to typescript in TypeScript. Coming from JavaScript, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
JS
From JavaScript:

In JavaScript, you're familiar with understanding what typescript adds to javascript.

TS
In TypeScript:

TypeScript has its own approach to understanding what typescript adds to javascript, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TS
TypeScript Example
// TypeScript - explicit types
let message: string = "Hello";
let count: number = 42;
let isActive: boolean = true;

function greet(name: string): string {
  return "Hello, " + name;
}

Comparing to JavaScript

Here's how you might have written similar code in JavaScript:

JS
JavaScript (What you know)
// JavaScript - no type information
let message = "Hello";
let count = 42;
let isActive = true;

function greet(name) {
  return "Hello, " + name;
}
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

TypeScript adds optional static typing

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Types are checked at compile time, not runtime

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

TypeScript compiles to plain JavaScript

Step-by-Step Breakdown

1. What is TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It was developed by Microsoft and adds optional static typing, classes, and interfaces to JavaScript.

2. Type Annotations

In TypeScript, you can add type annotations using a colon (:) followed by the type name.

JS
JavaScript
let name = "Alice"; // JS infers string
TS
TypeScript
let name: string = "Alice"; // TS explicit
Rule of Thumb
Start by adding types to function parameters and return values - this gives you the most benefit with the least effort.

3. Why Use TypeScript?

TypeScript catches errors at compile time instead of runtime, provides better IDE support with autocompletion, and makes code self-documenting.

Common Pitfall
Don't overuse 'any' type - it defeats the purpose of TypeScript. Use 'unknown' if you truly don't know the type.

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • TypeScript adds optional static typing
  • Types are checked at compile time, not runtime
  • TypeScript compiles to plain JavaScript
Common Pitfall
Don't assume TypeScript works exactly like JavaScript. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • TypeScript = JavaScript + Types
  • Types are optional but recommended
  • Compile-time type checking prevents runtime errors
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your JavaScript code in TypeScript to practice these concepts.
OverviewNext