Skip to main content

​
What is TypeScript?

TypeScript is JavaScript with type safety. It helps you catch errors before your code runs by checking that you’re using the right types of data everywhere.

​
Type Annotations

TypeScript lets you specify what type of data a variable should hold: 
const API_URL: string = "https://api.escuelajs.co/api/v1/products";
let count: number = 0;
let isLoading: boolean = true;
Most of the time, TypeScript can infer (guess) the type automatically: 
const API_URL = "https://api.escuelajs.co/api/v1/products"; // TypeScript knows this is a string

​
const vs let: Variable Declaration

​
const (Constant)

  • Once assigned a value, it cannot be reassigned
  • Use for values that never change (URLs, configuration)
  • Note: If it’s an object or array, its properties CAN still change
const PI = 3.14159;        // Never changes
const API_URL = "https://api.escuelajs.co/api/v1/products"; // Fixed URL

// ❌ This will error:
// PI = 3.14; // Error: Cannot assign to 'PI' because it is a constant

​
let (Variable)

  • The value can change after being assigned
  • Use for counters, state, temporary values
let counter = 0;          // Can change: counter++
let name = "Juan";        // Can change: name = "Pedro"

counter++; // ✅ This works
name = "Pedro"; // ✅ This works too

​
When to Use Each?

Default to const. Only use let when you NEED to change the value. From our project:
main.ts
// const API_URL → We use const because this URL NEVER changes during execution
const API_URL = "https://api.escuelajs.co/api/v1/products";

// let appState → We use LET because this value WILL CHANGE during execution
let appState: AppState = {
  status: LoadingState.Idle,
  products: [],
  error: null
};

​
Common Types

TypeDescriptionExamples
stringText"hello", "world"
numberNumbers42, 3.14
booleanTrue/Falsetrue, false
string[]Array of strings["a", "b", "c"]
number[]Array of numbers[1, 2, 3]
nullExplicitly nothingnull
undefinedNot yet assignedundefined

​
Union Types

Sometimes a value can be one type OR another:
main.ts
interface AppState {
  status: LoadingState;
  products: Product[];
  error: string | null;  // Can be string OR null
}
The error field can be:
  • A string (when there’s an error message)
  • null (when there’s no error)

​
Why Use TypeScript?

​
1. Catch Errors Early

// ❌ JavaScript - No error until you run it
const price = "100";
const total = price * 2; // NaN (Not a Number) - runtime surprise!

// ✅ TypeScript - Error shown immediately
const price: number = "100"; // Error: Type 'string' is not assignable to type 'number'

​
2. Autocompletion

Your editor knows what properties an object has: 
const product: Product = { /* ... */ };
product. // Editor shows: id, title, price, description, etc.

​
3. Self-Documenting Code

// You know exactly what this function expects and returns
function fetchProducts(limit: number = 20): Promise<Product[]> {
  // ...
}

​
Next Steps

Now that you understand the basics, let’s explore:

Build docs developers (and LLMs) love

Get started for freeTalk to us