Introduction to TypeScript

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

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.

Introduction to TypeScript | LearningTypeScript.org