Learn TypeScript: Your First Language

Welcome to Programming!

Welcome! If you're here, you're about to take your first step into the amazing world of programming. Think of programming as giving instructions to a computer to perform a task. You write these instructions in a special language the computer understands, and that's what we're here to learn.

Why TypeScript?

We're starting with TypeScript, a modern language developed by Microsoft. It's a "superset" of JavaScript, meaning any JavaScript code is also valid TypeScript code. The special thing TypeScript adds is a system of 'types'.

Imagine you have boxes for different kinds of toys. One box is only for LEGOs, another only for toy cars. Types work like that for your data. You tell TypeScript, "This variable should only ever hold a number," or "This one should only hold text." This helps catch mistakes early and makes your code much easier to understand as it grows. It's like having a helpful assistant checking your work as you go!

Variables & Data Types

A variable is a container with a name where you can store data. Think of it like a labeled box. In TypeScript, we're very clear about what kind of data goes into each box. This is called a 'data type'.

Common Data Types

The string type is for text, like names or messages. You wrap the text in quotes.

let greeting: string = "Hello, beginner!";

The number type is for all kinds of numbers, including decimals.

let userAge: number = 25;

The boolean type can only be one of two values: true or false. It's great for things that are on/off or yes/no.

let isLoggedIn: boolean = true;

Operators

Operators are symbols that perform operations on our variables and values. You already know many of these from math class!

These are for basic math.

let apples: number = 5;
let oranges: number = 3;
let totalFruit: number = apples + oranges; // totalFruit is 8

These compare two values and give you a boolean (true or false) result.

let myAge: number = 30;
let requiredAge: number = 18;
let canVote: boolean = myAge >= requiredAge; // canVote is true

Control Flow

So far, our code runs straight from top to bottom. Control flow lets us make decisions and run code multiple times, making our programs much smarter.

This lets you run code only if a certain condition is true.

let temperature: number = 25;
let message: string;

if (temperature > 20) {
    message = "It's a warm day!";
} else {
    message = "It's a bit chilly.";
}
// message will be "It's a warm day!"

Use a 'for loop' when you want to repeat an action a specific number of times.

let result: string = "";
for (let i: number = 1; i <= 5; i++) {
    result += "Count: " + i + "\\n";
}
// This loop will run 5 times.

Functions

Functions are reusable blocks of code that perform a specific task. They help keep your code organized and prevent you from repeating yourself.

Here, we define a function called add that takes two numbers and returns their sum. Then we 'call' it.

// Defining the function
function add(a: number, b: number): number {
    return a + b;
}

// Calling the function
let sum: number = add(5, 10); // sum will be 15

Arrays and Objects

Variables are great for storing one piece of data. But what if you need to store a list of items, or a complex entity like a user?

An array is a list of items. We use [] to define them. Note that programming usually counts from 0!

let fruits: string[] = ["Apple", "Banana", "Cherry"];
let firstFruit: string = fruits[0]; // "Apple"
let secondFruit: string = fruits[1]; // "Banana"

An object is a collection of related data with named keys. We use {} to define them.

let user: { name: string; age: number; isActive: boolean } = {
    name: "Alex",
    age: 30,
    isActive: true
};

let userName: string = user.name; // "Alex"

Making Webpages Interactive

This is where the magic happens! TypeScript (and JavaScript) can interact with the HTML of a webpage. This is called DOM (Document Object Model) manipulation.

Below is a real, interactive example. The code will find the blue message box below and change its text when you click "Run".

// Find the HTML element with the id 'message-box'
const messageBox = document.getElementById('message-box');

// Change its text content
if (messageBox) {
    messageBox.innerText = "Wow, the text changed because of TypeScript!";
}

This is a message box. Click "Run" above to change me.

What's Next?

Congratulations! You've just learned the absolute basics of programming with TypeScript. You've covered variables, logic, functions, and even how to change a webpage.

Keep Practicing!

Programming is a skill that gets better with practice. Try changing the code in the examples on this page. See if you can predict what will happen. Don't be afraid to break things – that's often the best way to learn!

Try creating a new variable and printing its value.
Change the numbers in the loops and `if` statements.
Write a new function that takes your name and returns a greeting.

This foundation is your launchpad. From here, you can explore building full web applications, games, mobile apps, and so much more. Good luck!