I'm trying to figure out how to access the array field of an object in TypeScript. It seems like the type 'unknown' is required to have a '[Symbol.iterator]()' method that returns an iterator

Question

I'm trying to figure out how to access the array field of an object in TypeScript. It seems like the type 'unknown' is required to have a '[Symbol.iterator]()' method that returns an iterator

I'm currently tackling an issue with my helper function that updates a form field based on the fieldname. For example, if it's the name field, then form.name will be updated. If it's user[0].name, then the name at index 0 of form.users will be updated. However, I've encountered an error which can be seen in the simplified code snippet below:

const example: Record<string, unknown> = {
    'a': 'haha',
    'b': [1,2,3],
};
const str = 'b.haha';
const tokens: string[] = str.split(".");
if (typeof example[tokens[0]][Symbol.iterator] === 'function') {
    const c = [...example[tokens[0]];
}

playground

I'm struggling to resolve this error: Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator. Thanks

typescript ecmascript-6 iterator destructuring

Answer 1

Answer №1

The issue lies in setting the second generic argument of Record to unknown. It may be more suitable for your case to use any instead:

const example: Record<string, any> = { // <- change is in this line
    'a': 'haha',
    'b': [1,2,3],
};
const str = 'b.haha';
const tokens: string[] = str.split(".");

if (typeof example[tokens[0]][Symbol.iterator] === 'function') {
    const c = [...example[tokens[0]];
    console.log(c);
}

Check Playground

In my opinion, the main difference between unknown and any is that you must actively cast variables of type unknown, while with any you can do anything. This makes unknown a bit safer as it detects errors at compile time when manipulating a variable of type unknown without knowing its type.

Personally, I suggest keeping unknown and leveraging TypeScript's type guards to automatically cast c to any[]:

const example: Record<string, unknown> = {
    'a': 'haha',
    'b': [1,2,3],
};
const str = 'b.haha';
const tokens: string[] = str.split(".");

const value = example[tokens[0]];

if (Array.isArray(value)) {
    const c = [...value];
    console.log(c);
}

Play around on Playground

For further understanding, consider reading about unknown versus any.

Answer 2

The issue lies in setting the second generic argument of Record to unknown. It may be more suitable for your case to use any instead:

const example: Record<string, any> = { // <- change is in this line
    'a': 'haha',
    'b': [1,2,3],
};
const str = 'b.haha';
const tokens: string[] = str.split(".");

if (typeof example[tokens[0]][Symbol.iterator] === 'function') {
    const c = [...example[tokens[0]];
    console.log(c);
}

Check Playground

In my opinion, the main difference between unknown and any is that you must actively cast variables of type unknown, while with any you can do anything. This makes unknown a bit safer as it detects errors at compile time when manipulating a variable of type unknown without knowing its type.

Personally, I suggest keeping unknown and leveraging TypeScript's type guards to automatically cast c to any[]:

const example: Record<string, unknown> = {
    'a': 'haha',
    'b': [1,2,3],
};
const str = 'b.haha';
const tokens: string[] = str.split(".");

const value = example[tokens[0]];

if (Array.isArray(value)) {
    const c = [...value];
    console.log(c);
}

Play around on Playground

For further understanding, consider reading about unknown versus any.

I'm trying to figure out how to access the array field of an object in TypeScript. It seems like the type 'unknown' is required to have a '[Symbol.iterator]()' method that returns an iterator

Answer №1

Similar questions

Guide to locating the recursive function in Node.js runtime

Incorporate a CSS class name with a TypeScript property in Angular version 7

What is the best way to add a repository in Nest.js using dependency injection?

My Angular Router is creating duplicate instances of my route components

ngif directive does not function properly when subscribe is utilized in ngOnInit

`Why TypeScript in React may throw an error when using a setter`

Unit testing in Angular 2+ involves testing a directive that has been provided with an injected window object

Match and populate objects from the array with corresponding items

Steps for selectively targeting and updating a group of properties in a TypeScript class

What is the process for searching my database and retrieving all user records?

Incorporating TypeScript basics into the if statement post compiling

Angular: Real-time monitoring of changes in the attribute value of a modal dialog and applying or removing a class to the element

Resolving search box setup problem in PrimeNG dataView

Defining assertions with specified type criteria

Strategies for extracting information from the database

Exploring the Power of Node.JS in Asynchronous Communication

Infinite Loop Issue in Angular2 RC5 when using the templateUrl

Node.js does not allow the extension of the Promise object due to the absence of a base constructor with the required number of type

How can I configure React Router V6 to include multiple :id parameters in a Route path, with some being optional?

Next.js is failing to infer types from getServerSideProps to NextPage