How to add a boolean array type annotation to a variable or a constant in TypeScript?

September 7, 2021 - 3 min read

To add a boolean array type annotation to a variable or a constant, you can declare the variable name followed by a : (colon) symbol, then the boolean type with [] (opening and closing square brackets) symbol.

For example, let's say we have a variable called bools and want to only have the boolean type as the values in the array. To do that we can annotate the boolean array type to the bools variable like this,

// add boolean array type to a variable
let bools: boolean[];

After initialization, let's add a boolean value of true to the bools array. It can be done like this,

// add boolean array type to a variable
let bools: boolean[];

// add a boolean value to the bools array
bools = [true]; // ✅ allowed

As you can see from the above code TypeScript allowed us to add the boolean value of true to the boolean type array bools since the allowed type for the bools array is a boolean type.

Now let's try to add another value of string type Hello World! to the bools array to see what happens,

// add boolean array type to a variable
let bools: boolean[];

// add a boolean value to the bools array
bools = [true]; // ✅ allowed

// add a value of type other than boolean
bools = [true, "Hello World!"]; // ❌ not allowed. Type 'string' is not assignable to type 'boolean'.

You can see that TypeScript will throw an error saying 'Type 'string' is not assignable to type 'boolean', which is also what we want.

Also, we cannot use the push() method to add a value other than the boolean type.

Bonus

When a variable is assigned a value, TypeScript will attempt to determine the type of the variable.

For example, let's declare a variable called favBools and add boolean values like true, false, true without actually declaring the boolean array type annotation as we did above. It can be done like this,

// Typescript infers the type from
// the value it is assigned
let favBools = [true, false, true];

As you can see when you hover over the variable favBools, TypeScript has automatically detected that the variable favBools is a boolean array type.

Since the TypeScript has already got the type is of boolean array type and whenever we try to reassign a value other than the boolean array type, The compiler will throw errors like from the above.

See the execution of the above codes live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.