Variable 'X' is used before being assigned in TypeScript

Variable 'X' is used before being assigned in TypeScript #

The error "Variable is used before being assigned" occurs when we declare a variable without assigning a value to it or only assign a value if a condition is met. To solve the error, change the variables type to be possibly undefined or give it an initial value.

Here are 3 examples of how the error occurs.

index.ts

Copied!
type Employee = {
  name: string;
  country: string;
};

let employee: Employee; // 👈️ did not assign value to variable

// 1. ⛔️ Error: Variable 'employee' is used before being assigned.ts(2454)
employee.name = 'James';

// ---------------------

let arr: string[]; // 👈️ did not assign value to variable

// 2. ⛔️ Error: Variable 'arr' is used before being assigned.ts(2454)
arr[0] = 'hello world';

// ---------------------

// 3. Only assigns value to variable if condition is met 👇️
let salary: number;

if (Math.random() > 0.5) {
  salary = 100;
}

// ⛔️ Error: Variable 'salary' is used before being assigned.ts(2454)
if (salary === 100) {
  console.log('success');
}

The first two examples cause the error, because we declare a variable and set its type, but don't give it an initial value and try to use it.

To solve the error, give the variable an initial value of the expected type when declaring it.

index.ts

Copied!
type Employee = {
  name: string;
  country: string;
};

const employee: Employee = {
  name: '',
  country: '',
};

employee.name = 'James';

// ---------------------

const arr: string[] = [];

arr[0] = 'hello world';

We declared the variables with initial values so we aren't using them before they are assigned anymore.

An alternative solution is to update the variable's type to be possibly undefined.

index.ts

Copied!
type Employee = {
  name: string;
  country: string;
};

let employee: Employee | undefined; // 👈️ could be undefined

// 👉️ somewhere in your code this should be set to object

if (employee !== undefined) {
  employee.name = 'James';
}

// ---------------------

let arr: string[] | undefined; // 👈️ could be undefined

// 👉️ somewhere in your code this should be set to array

if (arr !== undefined) {
  arr[0] = 'hello world';
}

We used a union type to specify that the variables can either be of one type or be undefined.

Now we have to use an if statement as a type guard to make sure the variable is not undefined before we add a property or element to it.

With arrays, there is no real benefit of doing this. It's best to just assign an empty array to the variable when declaring it and type the variable correctly.

If you're working with objects and are not able to set default values for all properties, consider using the Partial utility type to set the object's properties to optional and give the variable an initial value of an empty object.

index.ts

Copied!
type Employee = {
  name: string;
  country: string;
};

const employee: Partial<Employee> = {};

employee.name = 'James Doe';
employee.country = 'Brazil';

// 👇️ {name: 'James Doe', country: 'Brazil'}
console.log(employee);

The Partial utility type set all of the properties of the Employee type to optional, so we can give the employee variable an initial value of an empty object.

The "Variable is used before being assigned" error is often caused when we only assign a value to a variable if a certain condition is met.

index.ts

Copied!
// 3. Only assigns value to variable if condition is met 👇️
let salary: number;

if (Math.random() > 0.5) {
  salary = 100;
}

// ⛔️ Error: Variable 'salary' is used before being assigned.ts(2454)
if (salary === 100) {
  console.log('success');
}

To solve this, we can update the variable's type to be possibly undefined.

index.ts

Copied!
let salary: number | undefined; // 👈️ could be undefined

if (Math.random() > 0.5) {
  salary = 100;
}

if (salary === 100) {
  console.log('success');
}

The salary variable could be a number or be undefined. Now that we've set its type accurately, the error is no longer issued.

Alternatively, you could give the variable an initial value when declaring it.

index.ts

Copied!
let salary = 0; // 👈️ give it initial value of the correct type

if (Math.random() > 0.5) {
  salary = 100;
}

if (salary === 100) {
  console.log('success');
}

Which approach you pick will depend on your use case. I prefer using initial values of the expected type if possible.

Variable 'X' is used before being assigned in TypeScript

Variable 'X' is used before being assigned in TypeScript #

Borislav Hadzhiev