TypeScript React: Use an array of strings as an index and get values from state

Question

import React, { useState } from 'react';

interface PropsInterface {
  keys: string; // name,email,password
}

const Poster: React.FC<PropsInterface> = (props: PropsInterface) => {

  const [state, setState] = useState({
    name: 'jim',
    email: '[email protected]',
    password: 'secret',
    loading: false,
    keys: props.keys.split(','),  // [ name, email, password ]
  });
  const { keys } = state;

I need to somehow get the values for each of the keys and form a string that will end up looking like this

"name=jim&[email protected]&password=secret"

I thought I could simply use URLSearchParams() that quickly became a problem with TypeScript. My next thought was to loop over the keys and then get the corresponding values from the state

    for (const i in keys) {
      if (keys.hasOwnProperty(i)) {
        console.log(state[keys[i]]);
      }
    }

which then gives me the error

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ auth: boolean; baseUrl: string; keys: string[]; method: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ auth: boolean; baseUrl: string; keys: string[]; method: string; }'.ts(7053)

Is the type it's complaining about the type of your state? (It has property names your state doesn't have, but I wonder if you've cut your state down for the purposes of the question...) — T.J. Crowder
– T.J. Crowder, Commented Jan 30, 2020 at 13:55
Fundamentally, when you do state[keys[i]], you're using a string to index into state. If your state object's type doesn't have an index signature, TypeScript won't let you do that (without a type assertion)... — T.J. Crowder
– T.J. Crowder, Commented Jan 30, 2020 at 13:56
ok, how to make an assertion that will make TypeScript happy about this? — Bill
– Bill, Commented Jan 30, 2020 at 13:57

T.J. Crowder · Accepted Answer · 2020-01-30 13:59:18Z

3

Fundamentally, when you do state[keys[i]], you're using a string to index into state. If your state object's type doesn't have an index signature, TypeScript won't let you do that (without a type assertion)...

You can use a local type assertion, perhaps with an alias variable, instead:

const rawState = state as any as Record<string, string>;
for (const key of keys) {
    console.log(rawState[key]);
}

(Also note using for-of to loop the array.)

Of course, that's disabling type checking for that loop...

Live on the playground

answered Jan 30, 2020 at 13:59

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Ali Torki · Accepted Answer · 2020-01-30 14:08:36Z

As I understand, it's maybe your solution to solve the problem.

import * as React from "react";
import { render } from "react-dom";

interface PropsInterface {
  keys: string; // name,email,password
}

const Poster: React.FC<PropsInterface> = (props: PropsInterface) => {
  const [state, setState] = React.useState({
    name: 'jim',
    email: '[email protected]',
    password: 'secret',
    loading: false,
    keys: props.keys.split(','),  // [ name, email, password ]
  });
  const pairKeys = React.useMemo<string>(() => {
    const order = ["name", "email", "password"];
    const result: string[] = [];

    state.keys.forEach((key: string, index) => {
      result.push(`${order[index]}=${state[order[index]]}`)
    });

    return result.join("&")
  }, [state.keys])

  return (
    <div>{JSON.stringify(pairKeys, null, 2)}</div>
  )
}



render(<Poster keys="John,[email protected],testpass" />, document.getElementById("root"));

Collectives™ on Stack Overflow

TypeScript React: Use an array of strings as an index and get values from state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related