Borislav Hadzhiev
Wed Mar 16 2022·3 min read
Photo by Štefan Štefančík
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.
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.
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
.
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.
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.
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.
// 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
.
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.
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.