TypeScript Data Structures Explained
TypeScript Basics
JavaScript with Superpowers
Imagine JavaScript, but with an extra layer of protection. That’s TypeScript. It’s a “superset” of JavaScript, which means any valid JavaScript code is also valid TypeScript code. But TypeScript adds something crucial on top: a type system.
Think of it as a helpful assistant who checks your work before you run your code, catching common mistakes before they cause problems.
This assistant is especially good at preventing type errors. In regular JavaScript, you could accidentally try to add a number to a string of text, leading to unexpected results. TypeScript stops you right in your tracks.
// In JavaScript, this might produce the string "52" unexpectedly.
function addJS(a, b) {
return a + b;
}
// In TypeScript, we declare the expected types.
function addTS(a: number, b: number) {
return a + b;
}
// TypeScript would show an error if you tried this:
addTS(5, "2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
The Basic Building Blocks
At its core, TypeScript is about being explicit with your data types. The most basic types, or primitives, are the ones you'll use constantly. Let's look at the main three.
// A string holds text
let message: string = "Hello, world!";
// A number can be an integer or a decimal
let userCount: number = 100;
let price: number = 99.95;
// A boolean is a simple true or false value
let isLoggedIn: boolean = false;
By declaring the type of a variable with a colon (e.g., let message: string), you're telling TypeScript what kind of data that variable should hold. If you try to assign the wrong type of data later, TypeScript will let you know.
Describing Objects
Most real-world applications deal with more complex data than simple strings and numbers. We often group related data into objects. TypeScript allows us to define the “shape” of an object using an interface.
An interface is like a blueprint for an object. It enforces a consistent structure for your data.
For example, let's create a blueprint for a user object. We expect every user to have a specific ID, a name, and a status indicating if they are active.
// Define the blueprint for a User object
interface User {
id: number;
name: string;
isActive: boolean;
}
// Create a user that follows the blueprint
const newUser: User = {
id: 123,
name: "Alex",
isActive: true
};
Now, TypeScript will ensure that any variable declared as a User type has exactly those properties with the correct types. If you forget a property or use the wrong type, you'll get an error immediately.
// TypeScript will flag this object with an error.
const badUser: User = {
id: 456, // The 'name' and 'isActive' properties are missing
};
Why Bother with Types?
So why add these extra rules? The benefits become clear as your projects grow.
TypeScript is a powerful tool that enhances your JavaScript code by adding static typing, which helps catch errors early, improves code readability, and makes your projects more scalable.
Static typing means types are checked before you run the code, not while it's running. This catches a whole class of bugs during development, saving you time and preventing surprises for your users.
It also makes your code self-documenting. When another developer (or your future self) looks at your addTS function, they know exactly what kind of arguments it expects without having to guess or read through the code's logic. This clarity makes collaboration easier and code maintenance much simpler.
Time to check your understanding of these core concepts.
What is the primary relationship between TypeScript and JavaScript?
True or False: The primary purpose of TypeScript's type system is to make your code run faster in the browser.