1

I am kind of new to TypeScript and I am trying to get rid of all any types.

Problem:
Within the React Component, I loop over an array of objects and extract a key/value pair.
The components receives tags, tagKeys props as follows:

tags: [{ name: "Some tag" }] OR [{ platform: { name: "Some tag" } }];

tagKeys: ["name"] OR tagKeys: ["platform", "name"]

If I run this script (below), I get this error in the console:

Element implicitly has an 'any' type because index expression is not of type 'number'

type Props = {
    tags: any[];
    tagKeys: string[];
};

const Tags: React.FC<Props> = ({ tags, tagKeys }: PropsWithChildren<Props>) => {
    const renderTags = (): React.ReactNode => {
        return tags.map(tag => {
            let key = "";
            // Loop through tagKeys in the tags array to extract the tag
            for (let i = 0; i < tagKeys.length; i++) {
                key = i === 0 ? tag[tagKeys[i]] : key[tagKeys[i]];
            }
            return <Tag key={`tag-${key}`} tag={key} />;
        });
    };
    return <StyledTags>{renderTags()}</StyledTags>;
};

If I change the line inside the for loop to...

key = i === 0 ? tag[tagKeys[i] as any] : key[tagKeys[i] as any];

...the script runs but I want to get rid of the any type.

Question:
Is there a way to set the type without specifying how the received props array tags will look?

I want to be able to pass arrays with different kinds of structure and extract a key/value pair.

Improve this question

2 Answers 2

Reset to default
3

There two issues to watch that we'll need to be clear about.

  • First, you asked:
    Is there a way to set the type without specifying how the received props array tags will look?
type Props = {
    tags: any[]; // This is the answer to your direct question
    tagKeys: string[];
};
  • Secondly, having handled the above, TypeScript is actually complaining about your index.
    As you'll agree, reactjs uses the unique key to render each <Tag>.
// TypeScript is actually warning you about this.

// Note that initially, `key` is of type `string` (implicitly or indirectly )
let key = "";

// Within your loop, you assign `key` to be of type `object`
key = i === 0 ? tag[tagKeys[i]] : key[tagKeys[i]];
// So the above line says that `key` can be `string` or `object`
// Thus TypeScript tells you that...
// implicitly your index (key) expression is of type any

To handle that TypeScript error, update as follows:

let key: any = "";

Kindly make the necessary updates, and let me know how it goes for you.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

let key: number or let key will not work as I will get "Variable 'key' is used before being assigned." Also key is never a number as far as i can understand. Its a object if it has not reached the last tagKey, when it has reached the last tagKey its a string.
Oh, alright. In that case, it means that the variable key is an object, a number (because you re-assign it as key = i ===...) and finally a string (because of let key = ""). Kindly see my updated answer.
it's never a number... the ternary operator ? : will never evaluate to the first operand (the condition)... and even if it could, i === 0 is a boolean, not a number
When we carefully analyze this line, key = i === 0 ? ... : .... Notice that the user first re-assigns key in other words, key = i. And then gets into the ternary operator. @Aprillion, if this was not the case then let key: object | string = "" would have worked. But unfortunately, in this case you are dealing with a variable that mutates through 3 types. Therefore, we can't use a simple union.
Yes, @Aprillion you are right, actually. key is re-assigned to the result of the ternary operator. Thanks for that clarification.
|
1

key can be either a string or an object during it's lifetime, so my first intuition would be to declare it as such:

let key: object | string = "";

But TS is not happy with that, so my second try would be:

type NestedObject = { [key: string]: NestedObject } | string
let key: NestedObject = '';

key = { platform: { name: 'dd' } }
key = key.platform.name

But TS is not happy with the last line either, so at this time I would just give up:

let key: any = '';
Improve this answer

5 Comments

You are correct in that key will be either a string or an object. But declaring it as that will give me the error "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'string | object'."
Yes, it's true. Because in TypeScript, once you know beforehand that a variable will take on more than one type. It's then advised to explicitly declare it as any type.
ah, well... looks like the recursive data structure is not TS friendly, so indeed I would use any here as well after 1 more attempt to be clever :)
@MwamiTovi I wouldn't say it were advisable "beforehand", only when not possible to use a simple union type and you are not a library author who should try really hard to find a clever trick with generics (<T>) for the benefit of their users
@Aprillion i only stated it that way since our colleague knew "beforehand" that the variable key would mutate throughout this process. And indeed, you are right too, am not one of the library authors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.