TypeScript is a superset of JavaScript that brings static typing to the table, making it a powerful option for large-scale web applications. One of the first concepts you need to understand when working with TypeScript is its basic types. These types allow developers to define variables, function parameters, and return types more clearly, which in turn makes your code more predictable and easier to debug.

Why Use Basic Types?

While JavaScript is dynamically typed, TypeScript introduces strong typing, offering several benefits:

• Error Detection: Types allow TypeScript to catch errors during compile time rather than runtime.
• Enhanced Readability: Types provide self-documenting code, making it clear what kind of data a variable should hold.
• Improved Tooling: IDEs can offer better autocompletion and inline documentation based on the types you've defined.

Let’s explore some of the basic types in TypeScript along with examples to illustrate their use.

1. number

The number type represents both integer and floating-point numbers. In TypeScript, you don’t need to specify whether a number is an integer or a floating-point; all numbers are of type number.

let age: number = 25;
let price: number = 19.99;

console.log(age);  // Output: 25
console.log(price); // Output: 19.99

2. string

The string type is used for text data. You can define strings using single quotes, double quotes, or backticks (for template strings).

let firstName: string = "John";
let lastName: string = 'Doe';
let greeting: string = `Hello, ${firstName} ${lastName}!`;

console.log(greeting); // Output: Hello, John Doe!

3. boolean

The boolean type represents a true/false value. It is particularly useful for conditional statements.

let isLoggedIn: boolean = true;

if (isLoggedIn) {
  console.log("User is logged in.");
} else {
  console.log("User is logged out.");
}
// Output: User is logged in.

4. array

TypeScript allows you to define arrays with specific types. You can use the Type[] syntax or Array<Type> generic type.

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ['apple', 'banana', 'cherry'];

console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(fruits);  // Output: ['apple', 'banana', 'cherry']

5. tuple

Tuples are a special type of arrays where you can specify the types of each element in a fixed-size array. This allows you to store mixed types in a structured way.

let user: [string, number] = ['Alice', 30];

console.log(`User: ${user[0]}, Age: ${user[1]}`);
// Output: User: Alice, Age: 30

6. enum

Enums allow you to define a set of named constants. This is helpful for representing groups of related values, such as status codes or predefined categories.

enum Color {
  Red,
  Green,
  Blue,
}

let myColor: Color = Color.Green;
console.log(myColor); // Output: 1 (index of Green)

7. any

The any type can hold any type of value and is useful for cases where you might not know the type ahead of time. However, using any defeats the purpose of TypeScript's type safety, so it should be used sparingly.

let randomValue: any = 5;
randomValue = "Now I'm a string!";
console.log(randomValue); // Output: Now I'm a string!

8. void

The void type is used for functions that do not return a value. It indicates that a function might perform an action but won't return anything useful.

function logMessage(message: string): void {
  console.log(message);
}

logMessage("Hello, TypeScript!"); // Output: Hello, TypeScript!

9. null and undefined

In TypeScript, you can explicitly specify that a variable can be null or undefined. By default, null and undefined can be used where any type is expected.

let nullableString: string | null = null;
let undefinedValue: undefined = undefined;

console.log(nullableString); // Output: null
console.log(undefinedValue); // Output: undefined

Conclusion

With these basic types under your belt, you're well on your way to enhancing the robustness of your JavaScript code. The strong typing capabilities of TypeScript help mitigate many common errors and make your code clearer and easier to maintain. Keep practicing using these types, and you'll quickly see the benefits they bring to your development workflow!

As you delve deeper into TypeScript, you'll encounter more advanced types and features, helping you to build even more powerful applications!