迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

在 React TypeScript 中限定 useState 作为对象

作者:迹忆客 最近更新:2022/11/21 浏览次数:

要在 React 中限定 useState 钩子对象,请使用钩子的泛型,例如 const [employee, setEmployee] = useState<{name: string; salary: number}>({name: '',salary: 0})。 状态变量将只接受指定类型的键值对。

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;

在使用对象初始化钩子时,我们使用了泛型来正确键入 useState 钩子。

有时我们可能不想为所有对象的属性设置初始值。 在这种情况下,我们可以将属性标记为可选。

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;

我们使用问号将 salary 属性标记为可选。

该属性可以存储未定义的值或编号类型的值。

这就是为什么我们在初始化状态对象时不需要提供它。

如果我们为对象的所有属性提供初始值,TypeScript 将能够推断状态变量的类型。

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;

我们为对象的所有属性传递了初始值,这使 TypeScript 能够正确键入 employee 变量。

但是 ,最好始终显式键入 useState 钩子,尤其是在使用数组和对象时。

在某些情况下,我们可能事先不知道要在对象上设置的所有属性。

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} 语法是 TypeScript 中的索引签名,当我们事先不知道类型属性的所有名称和值的形状时使用。

示例中的索引签名意味着当一个对象被一个字符串索引时,它将返回一个any类型的值。

当我们事先不知道对象的所有属性时,可以使用这种方法。

如果要将对象属性设置为多种类型之一,请使用联合。

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;

我们使用联合将 salary 属性设置为字符串或数字类型。

如果我们的 useState 钩子变得繁忙,请将传递给泛型的类型提取到类型别名或接口中。

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;

语法 useState<Employee> 更容易阅读,尤其是在处理大对象时。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便