TypeScript Variables and Constants

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

TypeScript Variables

A TypeScript variable is a container for storing data. For example,

let age: number = 20;

Here, age is a variable of number type, i.e., it can only store numerical values. Currently, it's storing the number 20.

TypeScript Variables vs. JavaScript Variables

You don't need to declare types in JavaScript. Thus, you can assign data of one type to a variable of another type.

But this is forbidden in TypeScript. For example,

// TypeScript Code

// Declare a number variable
let age: number = 20;

// Assign a string data to age variable
// Error: this is an invalid code
age = "Twenty";

Here, we've tried to assign the string value "Twenty" to a number variable named age. Predictably, this returns an error.

However, you can easily perform this operation in JavaScript:

// JavaScript Code

// Declare variable without type
// Assign a number to it
let age = 20;

// Assign a string data to age variable
// This is a valid code
age = "Twenty";

Declare Variables in TypeScript

In TypeScript, we use the var or let keywords along with the data type to declare variables. For example,

var age: number;
let name: string;

Here,

• age - A variable of number type. It can only store numerical values.
• name - A variable of string type. It can only store textual values.

Therefore, the general syntax of creating variables in TypeScript is:

let variableName: dataType;

Note: Like with JavaScript, we discourage the use of the var keyword to create variables in TypeScript.

Initialize Variables in TypeScript

We use the assignment operator = to assign a value to a variable.

// Declare variable age of number type
let age: number;

// Assign 20 to age
age = 20;

Here, 20 is assigned to the variable age.

You can also initialize variables during its declaration.

// Declare variable johnAge and assign 20 to it
let johnAge: number = 20;

// Declare variable janeAge and assign 42 to it
let janeAge: number = 42;

// Declare string variable userName and number variable age
// Assign values "John" and 20 respectively
let userName:string = "John", age:number = 20;

// Declare a number variable called age
let age: number; 

// Print age
console.log(age); 

// Output: undefined

Change the Value of Variables

The value of a variable may vary. Hence, the name variable.

Let's look at the example below to learn how to change the value of a variable:

// Assign 5 to variable age
let age: number = 20; 
console.log(age); // 20

// Change the value of age to 33
age = 33; 
console.log(age); // 33

Here, the value of the age variable is changed from 20 to 33 when we assign a new value to it.

Rules for Naming TypeScript Variables

1. Variable names must start with a letter, an underscore _, or the dollar sign $.

// Valid
let age: number = 20;
let _age: number = 20;
let $age: number = 20;

2. Variables cannot start with numbers.

// Invalid
let 20age: number = 20; // This gives an error

3. Variable names are case-sensitive. So age and Age are different variables.

let age: number = 20;
let Age: number = 33;

console.log(age); // 20
console.log(Age); // 33

4. Variable names cannot be keywords (special words reserved for specific purposes in TypeScript, such as if, else, let, var, etc.).

// Invalid
let new: number = 20; // Error! new is a keyword

TypeScript Constants

A constant is a type of variable whose value cannot be changed.

In TypeScript, we use the const keyword to create constants. For example,

// Assign 20 to AGE
const AGE: number = 20;

Once a constant is initialized, we cannot change its value.

// Assign 20 to age
const age: number = 20;

// Assign 10 to age
age = 10;
console.log(age); // Error! constant cannot be changed

Always Initialize a Constant During Declaration

If you don't initialize a constant at the time of declaration, it throws an error. For example,

// Error! Missing initializer in const declaration
const age: number;

// Attempt to initialize constant after declaration
age = 20;

console.log(age);