Login Register
×

TypeScript Variables

1๏ธโƒฃ What Are Variables in TypeScript?

A variable is a container for storing values. In TypeScript, variables must have a specific data type.

โœ” Example of a variable in TypeScript:

let message: string = "Hello, TypeScript!";
console.log(message);

โœ… message is a variable that stores a string value.

2๏ธโƒฃ Declaring Variables in TypeScript

TypeScript provides three ways to declare variables:
โœ” let โ€“ Block-scoped variable (Preferred)
โœ” const โ€“ Block-scoped, cannot be reassigned
โœ” var โ€“ Function-scoped (Not recommended)

KeywordScopeReassignment Allowed?Hoisting
letBlockโœ… YesNo
constBlockโŒ NoNo
varFunctionโœ… Yes (Avoid using)Yes

Letโ€™s look at examples of each.

3๏ธโƒฃ Using let in TypeScript

let is the most commonly used keyword for declaring variables.

โœ” Example:

let userName: string = "Alice";
console.log(userName);

โœ… userName is a string variable that can be changed later.

โœ” Updating the variable:

let score: number = 100;
score = 150; // โœ… Allowed
console.log(score); // Output: 150

๐Ÿ”น let is block-scoped

let variables are only accessible inside the block where they are declared.

if (true) {
let city: string = "New York";
console.log(city); // โœ… Works
}
console.log(city); // โŒ Error: city is not defined

โœ… Best Practice: Always prefer let over var.

4๏ธโƒฃ Using const in TypeScript

const is used when you donโ€™t want to change a variableโ€™s value.

โœ” Example:

const PI: number = 3.14;
console.log(PI);

๐Ÿšซ Reassigning a const variable gives an error:

const country: string = "India";
country = "USA"; // โŒ Error: Cannot assign to 'country' because it is a constant.

๐Ÿ”น const is block-scoped

if (true) {
const language: string = "TypeScript";
console.log(language); // โœ… Works
}
console.log(language); // โŒ Error: language is not defined

โœ… Best Practice: Use const for values that never change (e.g., API URLs, configuration values).

5๏ธโƒฃ Using var in TypeScript (Not Recommended)

var was used before ES6, but it has many issues, so avoid using it.

โœ” Example of var:

var age: number = 25;
console.log(age);

๐Ÿšซ Why var is bad?
โœ” It ignores block scope, causing unpredictable errors.
โœ” It gets hoisted, meaning it can be used before declaration.

console.log(car);  // Output: undefined (Hoisting issue)
var car: string = "BMW";

โœ… Best Practice: Never use var, always prefer let or const.

6๏ธโƒฃ Variable Type Annotations in TypeScript

TypeScript allows you to specify data types for variables. This is called type annotation.

Data TypeExample
stringlet name: string = “John”;
numberlet age: number = 25;
booleanlet isStudent: boolean = true;
anylet value: any = 10;
arraylet numbers: number[] = [1, 2, 3];

โœ” Examples of different data types:

let username: string = "Alice";  // String
let score: number = 95.5; // Number
let isPassed: boolean = true; // Boolean
let data: any = "Hello"; // Any type (Avoid using)
let numbers: number[] = [1, 2, 3]; // Array

๐Ÿšซ Avoid using any type because it removes type safety.

7๏ธโƒฃ TypeScript Variables with Union Types

Union types allow a variable to store multiple types.

โœ” Example:

let id: number | string;
id = 101; // โœ… Valid
id = "TS101"; // โœ… Valid

โœ… Best Practice: Use union types when a variable needs to hold different types.

8๏ธโƒฃ TypeScript Variables with Default Values

Variables can have default values in TypeScript.

โœ” Example:

let color: string = "blue";  // Default value
console.log(color); // Output: blue

โœ” Example with functions:

function greet(name: string = "User") {
console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, User!
greet("John"); // Output: Hello, John!

โœ… Best Practice: Use default values to handle cases when no value is provided.

๐Ÿ”Ÿ Best Practices for TypeScript Variables

โœ” Use let for variables that can change.
โœ” Use const for values that never change.
โœ” Avoid var because it has scope issues.
โœ” Always define the correct data type.
โœ” Use union types for flexible variables.