An element access expression should take an argument in Typescript – How to solve it?

Posted on by Brent Johnson
An element access expression should take an argument in TS

You can simply solve the error “an element access expression should take an argument” in Typescript by assigning a value for the variable. Let’s go into detail now.

The reason for the error “An element access expression should take an argument” in Typescript

The error happens when I create a variable but do not assign a value, but a type is an array.

Example:

const people = string[];

The error:

'string' only refers to a type, but is used as a value here.
An element access expression should take an argument.

This will also lead to the error:

const peopleArr = ['Tommy', 'Jane', 'Anna', 'Hermest', 'Toby'];
const person1 = peopleArr[];
console.log(person1);

Output:

An element access expression should take an argument.

Or when you are working with some type aliases, you implement them as a value, not a type.

Example:

type nameList = string[];
const company1 = nameList[];

The error:

'nameList' only refers to a type, but is being used as a value here.
An element access expression should take an argument.

So here, you might make mistakes when you forget to pass the index to access the element in the array or try to pass an array type in a set value position.

The solution for the error

Beware of the access expression

Here an element access expression is how you access an array through a square bracket pair. 

Example:

const peopleArr = ["Tommy", "Jane", "Anna", "Hermest", "Toby"];
const person1 = peopleArr[3];
console.log(person1);

Output:

[LOG]: "Hermest"

So to solve the error, always make sure with your code syntax, like always assignment through a colon and a value assignment through an equal symbol.

Example:

// Set string array as a type
const people: string[] = ["Tommy", "Anna", "Tony", " James", "Thomas"];

// Create a variable that implements type alias
type nameList = string[];
const company1: nameList = ["Tommy", "Jane", "Anna", "Hermest", "Toby"];

// Assign element in the array by using the access expression
const peopleArr = ["Tommy", "Jane", "Anna", "Hermest", "Toby"];

const person1 = peopleArr[3];

Some methods are similar to the access expression

Besides accessing elements by accessing expression, there are also some methods that you can use to retrieve the element.

The slice method

The slice method will return the element you choose to extract through two arguments.

Syntax:

array.slice(start, end)

Parameters:

  • start: The index that you want to start the extract.
  • end: The index that you want to end the extract.

Example:

const people: string[] = ["Tommy", "Anna", "Tony", " James", "Thomas"];

// Get the first element in the people array
const person1 = people.slice(0, 1);
console.log(person1);

Output:

[LOG]: ["Tommy"]

The pop method

This method will help you to remove the last element in your array and return it.

Syntax:

array.pop()

Example:

const people: string[] = ["Tommy", "Anna", "Tony", " James", "Thomas"];

// Remove the last element in the array
const lastPerson = people.pop();
console.log(people);
console.log(lastPerson);

Output:

[LOG]: ["Tommy", "Anna", "Tony", "James"]
[LOG]: "Thomas"

Summary

In this article, I showed you how to solve the error “an element access expression should take an argument” in Typescript. You should always handle the meaning of your code and pass the index inside the access expression.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *