JIYIK CN >

To qualify a hook object in React useState, use the hook's generics, e.g. const [employee, setEmployee] = useState<{name: string; salary: number}>({name: '',salary: 0})the state variable will only accept key-value pairs of the specified type.

import {useEffect, useState} from 'react';

const App = () => {
  // 👇️ const employee: {name: string; salary: number;}
  const [employee, setEmployee] = useState<{name: string; salary: number}>({
    name: '',
    salary: 0,
  });

  useEffect(() => {
    setEmployee({name: 'James', salary: 100});
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

When initializing the hook with an object, we used generics to correctly type useStatethe hook.

Sometimes we may not want to set initial values ​​for all of an object's properties. In such cases, we can mark the property as optional.

import {useEffect, useState} from 'react';

const App = () => {
  // 👇️ mark salary as optional
  const [employee, setEmployee] = useState<{
    name: string; salary?: number
  }>({
    name: '',
  });

  useEffect(() => {
    setEmployee({name: 'James', salary: 100});
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

We use a question mark to mark the salary attribute as optional.

This property can store an undefined value or a value of type Number.

That's why we don't need to provide it when initializing the state object.

If we provide initial values ​​for all properties of the object, TypeScript will be able to infer the types of the state variables.

import {useEffect, useState} from 'react';

const App = () => {
  // 👇️ const employee: {name: string;salary: number;}
  // ✅ typed correctly without a generic
  const [employee, setEmployee] = useState({
    name: '',
    salary: 0,
  });

  useEffect(() => {
    setEmployee({name: 'James', salary: 100});
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

We passed initial values ​​for all the properties of the object, which enabled TypeScript to correctly type the employee variable.

但是It is best to always explicitly type useStateyour hooks, especially when working with arrays and objects.

In some cases, we may not know in advance all the properties that we want to set on an object.

import {useEffect, useState} from 'react';

const App = () => {
  // 👇️ flexible object type
  const [employee, setEmployee] = useState<{[key: string]: any}>({});

  useEffect(() => {
    setEmployee({
      name: 'James',
      salary: 100,
      department: 'Dev',
      tasks: ['dev', 'test', 'ship'],
    });
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

{[key: string]: any}The syntax is an index signature in TypeScript, used when we don't know in advance the shapes of all the names and values ​​of the type's properties.

The index signature in the example means that when an object is indexed with a string, it will return a anyvalue of type .

This approach can be used when we don't know all the properties of an object in advance.

If you want to set an object property to one of multiple types, use a union.

import {useEffect, useState} from 'react';

const App = () => {
  const [employee, setEmployee] = useState<{
    name: string;
    // 👇️ string OR number
    salary: string | number;
  }>({
    name: '',
    salary: '',
  });

  useEffect(() => {
    setEmployee({name: 'James', salary: 100});
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

We use a union to set the salary attribute to either string or number type.

If our useStatehook gets busy, extract the type passed to the generic into a type alias or interface.

import {useEffect, useState} from 'react';

type Employee = {
  name: string;
  salary: number;
};

const App = () => {
  // 👇️ const employee: {name: string; salary: number;}
  const [employee, setEmployee] = useState<Employee>({
    name: '',
    salary: 0,
  });

  useEffect(() => {
    setEmployee({name: 'James', salary: 100});
  }, []);

  return (
    <div>
      <h2>Name: {employee.name}</h2>
      <h2>Salary: {employee.salary}</h2>
    </div>
  );
};

export default App;

The syntax useState<Employee>is easier to read, especially when dealing with large objects.