PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
Type Hints vs TypeScript
MirrorLesson 9 of 11
Lesson 9

Type Hints vs TypeScript

Adding static types to dynamic languages

Introduction

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

Mirror Card
PY
From Python:

In Python, you're familiar with adding static types to dynamic languages.

JS
In JavaScript:

JavaScript has its own approach to adding static types to dynamic languages, which we'll explore step by step.

The JavaScript Way

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

JS
JavaScript Example
// Variable types
let name: string = "Alice";
let age: number = 30;
let scores: number[] = [90, 85, 92];

// Function signatures
function greet(name: string, times: number = 1): string {
  return ("Hello, " + name + "! ").repeat(times).trim();
}

// Optional / null
function findUser(id: number): string | null {
  return null;
}

// Union
function process(val: number | string): string {
  return String(val);
}

// Interface (like TypedDict)
interface User {
  id: number;
  name: string;
  email: string;
}

Comparing to Python

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

PY
Python (What you know)
from typing import Optional, Union, List, Dict, Tuple

# Variable annotations
name: str = "Alice"
age: int = 30
scores: List[int] = [90, 85, 92]

# Function signatures
def greet(name: str, times: int = 1) -> str:
    return (f"Hello, {name}! " * times).strip()

# Optional (can be None)
def find_user(id: int) -> Optional[str]:
    return None

# Union
def process(val: Union[int, str]) -> str:
    return str(val)

# TypedDict
from typing import TypedDict
class User(TypedDict):
    id: int
    name: str
    email: str
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Python type hints are optional annotations checked by mypy/pyright

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

TypeScript types are enforced at compile time

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Optional[T] ≈ T | null

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

TypedDict ≈ interface

Step-by-Step Breakdown

1. Basic Type Annotations

Syntax is almost identical. Python uses : Type after the variable; TypeScript does the same.

PY
Python
name: str = "Alice"
age: int = 30
JS
JavaScript
let name: string = "Alice";
let age: number = 30;
Rule of Thumb
Python uses str/int/bool/float; TypeScript uses string/number/boolean.

2. Optional Values

Optional[T] in Python means T | None. TypeScript uses T | null or T | undefined.

PY
Python
def find(id: int) -> Optional[str]: ...
JS
JavaScript
function find(id: number): string | null { ... }

3. Structured Types

TypedDict in Python and interface in TypeScript both define object shapes.

PY
Python
class User(TypedDict):
    id: int
    name: str
JS
JavaScript
interface User {
  id: number;
  name: string;
}
Common Pitfall
Python type hints don't enforce types at runtime — you need mypy or pyright for static checking.

Common Mistakes

When coming from Python, developers often make these mistakes:

  • Python type hints are optional annotations checked by mypy/pyright
  • TypeScript types are enforced at compile time
  • Optional[T] ≈ T | null
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • str/int/bool → string/number/boolean
  • Optional[T] → T | null
  • TypedDict → interface
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousNext