🧾 TypeScript: What are the Different Keywords to Declare Variables?

In TypeScript, just like in modern JavaScript (ES6+), variables can be declared using three primary keywords: var, let, and const. Understanding their differences is crucial for writing clean, maintainable, and bug-free code.

This article explores these variable declaration keywords, their scopes, mutability, hoisting behaviors, and best practices specific to TypeScript development.

---

🔹 var Keyword – Function Scoped Variables

The var keyword is inherited from JavaScript and has function scope rather than block scope. It is hoisted, which can lead to confusing behaviors.

function demoVar() {
  console.log(message); // undefined (due to hoisting)
  var message = "Hello from var";
  console.log(message); // Hello from var
}
demoVar();

🚫 Drawbacks of var

• No block scoping (can lead to unexpected behavior inside loops and conditionals).
• Hoisting causes variables to be undefined rather than causing errors.

✅ When to Use

Avoid var in modern TypeScript. It’s primarily useful when dealing with legacy JavaScript codebases.

---

🔹 let Keyword – Block Scoped and Mutable

Introduced in ES6, let offers block-level scope, making it suitable for modern coding patterns and loop control.

let counter = 1;
if (true) {
  let counter = 2;
  console.log(counter); // 2
}
console.log(counter); // 1

🔄 Mutable

Variables declared with let can be reassigned.

let name = "Alice";
name = "Bob"; // ✅ allowed

---

🔹 const Keyword – Block Scoped and Immutable Binding

const also has block scope, but the key difference is immutability. The binding (not the value) cannot be changed.

const pi = 3.14;
// pi = 3.1415; // ❌ Error: Cannot assign to 'pi' because it is a constant.

⚠️ Const with Objects

The reference is constant, but the internal structure can be modified.

const user = { name: "Alice" };
user.name = "Bob"; // ✅ allowed

---

🔠 Type Inference & Annotations in TypeScript

Unlike JavaScript, TypeScript adds static typing to variables.

✏️ Explicit Annotation

let age: number = 30;
const isLoggedIn: boolean = true;

🧠 Type Inference

TypeScript infers the type from the initial assignment:

let city = "Delhi"; // city: string

This helps avoid unnecessary annotations for simple values.

---

✅ Best Practices in TypeScript

• Prefer **const** by default for variables that don’t change.
• Use **let** when the value is expected to change.
• Avoid var unless dealing with old JavaScript patterns.
• Always annotate complex or public-facing variables/functions.
• Leverage TypeScript’s type inference to reduce boilerplate.

---

📌 Summary

Keyword	Scope	Mutable	Hoisting	Recommended
var	Function	Yes	Yes	❌ No
let	Block	Yes	No	✅ Yes
const	Block	No (binding)	No	✅ Yes

---

❓ Frequently Asked Questions (FAQ)

Q1. Can we reassign a const variable in TypeScript?

No. You cannot reassign a const binding. However, objects declared with const can still have their properties modified.

---

Q2. What happens if I declare a var inside a loop in TypeScript?

Since var is function-scoped, it does not respect block scope like let or const. This may lead to bugs, especially in asynchronous loops.

---

Q3. Should I always use const in TypeScript?

Yes, if the value is not expected to change. It improves readability and avoids accidental reassignment.

---

Share Now :