Variable 'X' is used before being assigned in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 16, 2022

banner

Photo from Unsplash

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 variable's type to be possibly undefined or give it an initial value.

Here are 3 examples of how the error occurs.

index.ts
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
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
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 to 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
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
// 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
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
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.

Conclusion #

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 variable's type to be possibly undefined or give it an initial value.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.