TypeScript for Beginners: Basic Types

Welcome to the world of TypeScript! One of the fundamental aspects of TypeScript is its strong typing system. This helps catch errors early in the development process, making your code more reliable and easier to maintain. Let's explore some of the basic types.

Understanding Basic TypeScript Types

TypeScript provides a set of primitive types that represent common data types. These are:

• number: Represents numeric values.
• string: Represents textual data.
• boolean: Represents true/false values.
• array: Represents a collection of values of the same type.
• tuple: Represents an array with a fixed number of elements whose types are known.

number Type

The number type represents all numeric values, including integers and floating-point numbers.

 let age: number = 30;
let price: number = 99.99;
let largeNumber: number = 123_456_789; // Using underscores for readability
console.log(age);
console.log(price);
console.log(largeNumber); 

string Type

The string type represents textual data. You can use single quotes ('), double quotes ("), or backticks (`) to define strings.

 let firstName: string = "John";
let lastName: string = 'Doe';
let message: string = `Hello, ${firstName} ${lastName}!`; // Template literals
console.log(firstName);
console.log(lastName);
console.log(message); 

boolean Type

The boolean type represents truthy or falsy values (true or false).

 let isStudent: boolean = true;
let isLoggedIn: boolean = false;
console.log(isStudent);
console.log(isLoggedIn); 

array Type

The array type represents a collection of values of the same type. There are two ways to define arrays in TypeScript:

1. Using the type followed by square brackets: type[]
2. Using the generic Array<type>

 // Array of numbers
let numbers: number[] = [1, 2, 3, 4, 5];
let moreNumbers: Array<number> = [6, 7, 8, 9, 10]; // Equivalent to number[]

// Array of strings
let names: string[] = ["Alice", "Bob", "Charlie"];
let moreNames: Array<string> = ["David", "Eve", "Frank"]; // Equivalent to string[]

console.log(numbers);
console.log(moreNumbers);
console.log(names);
console.log(moreNames); 

tuple Type

The tuple type represents an array with a fixed number of elements whose types are known in advance. The order of the elements and their types are important.

 // A tuple with a string and a number
let person: [string, number] = ["John Doe", 30];

// Accessing tuple elements
let name: string = person[0];
let age: number = person[1];

console.log(name);
console.log(age);

// Example: Representing coordinates (x, y)
let coordinates: [number, number] = [10, 20];
console.log(coordinates[0]); // x coordinate
console.log(coordinates[1]); // y coordinate 

Important Note about Tuples: While TypeScript enforces the types at compile time, accessing elements outside the defined range of the tuple (e.g., person[2] in the example above) will not throw an error at compile time. However, it will result in a runtime error (undefined) if the code is executed.

Summary

Understanding basic types is crucial for writing type-safe TypeScript code. By explicitly defining the types of your variables, you can catch potential errors early and improve the overall quality of your code. Experiment with these types and explore how they can be used in different scenarios!