Introduction to TypeScript

TL;DR — TypeScript is JavaScript with static types. You add type annotations (: string, : number) to catch errors at compile time, get full IDE autocomplete, and ship more reliable code. TypeScript compiles to plain JavaScript — zero runtime overhead.

Welcome to your first lesson in TypeScript programming! In this introduction, we'll cover what TypeScript is, why it's become incredibly popular, and what makes it an excellent choice for modern software development.

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It was developed by Microsoft and has since become one of the most popular languages for web development.

Key Features

Type Safety

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

// This works
greet("TypeScript");

// This would cause a compile-time error:
// greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

Type Inference

TypeScript can automatically infer types, making your code cleaner while maintaining safety:

// TypeScript infers that x is a number
let x = 5;

// TypeScript infers that numbers is an array of numbers
let numbers = [1, 2, 3, 4, 5];

console.log(`x is ${x}`);
console.log(`numbers: ${numbers}`);

Why Learn TypeScript?

1. Catch Errors Early: TypeScript catches errors at compile-time, not runtime
2. Better IDE Support: Get autocomplete, refactoring, and documentation as you type
3. Modern JavaScript Features: Use the latest JavaScript features with backward compatibility
4. Growing Ecosystem: Widely adopted by major frameworks like React, Angular, and Vue

Once you have the basics, the real power comes from TypeScript's structural type system — see Interfaces and Types and Generics to understand how to model any data shape safely.

Getting Started

To start coding in TypeScript, you'll need to:

1. Write TypeScript code with type annotations
2. Understand basic types (string, number, boolean, etc.)
3. Learn how to compile TypeScript to JavaScript
4. Practice with interactive examples

We'll cover each of these topics in detail in the upcoming lessons.

Interactive Playground

Practice what you've learned! Edit and run the code below to experiment with TypeScript.

// Try changing these values!
const language: string = "TypeScript";
const year: number = 2024;
const isAwesome: boolean = true;

// String formatting in TypeScript
console.log(`Learning ${language} in ${year}!`);
console.log(`Is TypeScript awesome? ${isAwesome}`);

// Working with arrays
const numbers: number[] = [1, 2, 3, 4, 5];
const doubled: number[] = numbers.map(x => x * 2);

console.log(`Original numbers: ${numbers}`);
console.log(`Doubled numbers: ${doubled}`);

Try these exercises:

1. Change the language variable to your favorite programming language
2. Add more numbers to the array
3. Instead of doubling, try multiplying the numbers by 3
4. Add a new variable with a different type and include it in a console.log statement

Pro Tip: The best way to learn TypeScript is by practicing. Try modifying the code examples above and experiment with them in the TypeScript Playground.

Key Takeaways

• TypeScript is a typed superset of JavaScript — every valid JS program is valid TS
• Type annotations (: string, : number) catch errors at compile time, before your code runs
• TypeScript infers types automatically when the value makes the type obvious
• The language is widely adopted by React, Angular, Vue, and Node.js ecosystems

Next Steps

Now that you know what TypeScript is and why it matters, it's time to explore the building blocks: how to declare variables and use TypeScript's core type system.