JIYIK CN >

To type a hook in React useStateas an array of strings, use generics for hooks, e.g. const [names, setNames] = useState<string[]>([])state variables can be initialized to an empty array or an array of strings, and only accept string values.

import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

We use generics to correctly type the useState hook, while initializing the hook with an empty array.

If we hadn't used a generic, e.g. useState<string[]>([])type hook, the type of the state variable would be never[], in other words, an array that would never contain any elements.

Even if you pass an empty string to the array, TypeScript will be able to infer the type of the state variable.

import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState(['']);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

请注意, we don’t even have to use generics to type our state variables. TypeScript is able to infer the type based on the initial value provided.

However, it is best to always explicitly type useStateyour hooks, especially when working with arrays and objects.

If we try to add a value of a different type to the state array, we will get a type checking error.

import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  // ⛔️ Argument of type '(prevNames: string[]) => (string | number)[]' is not
  // assignable to parameter of type 'SetStateAction<string[]>'.
  setNames(prevNames => [...prevNames, 1000]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element.toUpperCase()}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

This example shows how attempting to add a number to string[]a state array of type can cause an error in the type checker.