TypeScript Variables

Introduction

In this chapter, we will learn how to declare and use variables in TypeScript. Understanding how to work with variables is fundamental to any programming language.

Table of Contents

1. Definition
2. Syntax
3. Variable Declarations
   • let
   • const
   • var
4. Key Differences Between let, const, and var
5. Complete Example
6. Conclusion

Definition

A variable is a container for storing data values. Think of it as a box where you can put information that you want to use later. In TypeScript, you can store numbers, text, objects, and more in variables.

Syntax

TypeScript follows the same syntax as JavaScript for variable declarations, but with optional type annotations.

Basic Syntax

let variableName: type = value;
const variableName: type = value;
var variableName: type = value;

Variable Declarations

let

Definition

The let keyword declares a variable that is block-scoped, meaning it is only available within the block where it is defined.

Syntax

let variableName: type = value;

Example

This example declares a variable age of type number and sets its value to 25. Later, the value is changed to 26.

let age: number = 25;
age = 26; // Allowed
console.log(age);

Output

26

const

Definition

The const keyword declares a variable whose value cannot be changed after it is assigned. It is also block-scoped.

Syntax

const variableName: type = value;

Example

This example declares a constant variable pi of type number and sets its value to 3.14. Trying to change the value will cause an error.

const pi: number = 3.14;
// pi = 3.15; // Error: Cannot assign to 'pi' because it is a constant.
console.log(pi);

Output

3.14

var

Definition

The var keyword declares a variable that is function-scoped or globally-scoped, depending on where it is defined. It is generally recommended to use let or const instead of var to avoid potential scope issues.

Syntax

var variableName: type = value;

Example

This example declares a variable name of type string and sets its value to “Ravi”. Later, the value is changed to “Ankit”.

var name: string = "Ravi";
name = "Ankit"; // Allowed
console.log(name);

Output

Ankit

Key Differences Between let, const, and var

• Scope:
  • let and const are block-scoped.
  • var is function-scoped or globally-scoped.
• Reassignment:
  • let allows reassignment.
  • const does not allow reassignment.
  • var allows reassignment.
• Hoisting:
  • let and const are not initialized until their declaration is evaluated.
  • var is hoisted and initialized with undefined.

Complete Example

Let’s put all the examples together in one file.

TypeScript Code (src/index.ts)

// Using let
let userName: string = "Ravi";
userName = "Amit";
console.log(userName); // Output: Amit

// Using const
const maxAge: number = 100;
// maxAge = 101; // Error: Cannot assign to 'maxAge' because it is a constant.
console.log(maxAge); // Output: 100

// Using var
var greeting: string = "Hello, TypeScript!";
greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!

// Type Inference
let inferredString = "TypeScript is fun!";
// inferredString = 123; // Error: Type 'number' is not assignable to type 'string'.
console.log(inferredString); // Output: TypeScript is fun!

Compiling to JavaScript

To compile the TypeScript code to JavaScript, run the TypeScript compiler:

tsc src/index.ts

Output in JavaScript (src/index.js)

// Using let
var userName = "Ravi";
userName = "Amit";
console.log(userName); // Output: Amit

// Using const
var maxAge = 100;
// maxAge = 101; // Error: Cannot assign to 'maxAge' because it is a constant.
console.log(maxAge); // Output: 100

// Using var
var greeting = "Hello, TypeScript!";
greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!

// Type Inference
var inferredString = "TypeScript is fun!";
// inferredString = 123; // Error: Type 'number' is not assignable to type 'string'.
console.log(inferredString); // Output: TypeScript is fun!

Running the JavaScript

To see the output of the compiled JavaScript code, run the JavaScript file using Node.js:

node src/index.js

Conclusion

In this chapter, we covered how to declare and use variables in TypeScript using let, const, and var. We also explored the syntax and provided examples with their outputs to illustrate how variables work in TypeScript.