正文从这开始~

将useState作为对象数组

要在React中用一个对象数组来类型声明useState钩子，可以使用钩子泛型。比如说， const [employees, setEmployees] = useState<{salary: number; name: string}[]>([]) ，state变量可以被初始化为一个空数组，只接受指定类型的对象。

// App.tsx
import {useState} from 'react';
const App = () => {
  // 👇️ const employees: {salary: number;name: string;}[]
  const [employees, setEmployees] = useState<{salary: number; name: string}[]>(
  return (
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
        Add employee
      </button>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
              salary: {employee.salary} / name: {employee.name}
          </div>
    </div>
export default App;
我们使用泛型来准确的对useState钩子进行类型声明，同时使用空数组来初始化钩子。
如果我们不使用泛型，比如说，useState<{salary: number; name: string}[]>([]) ，当对其输入钩子的时候，state变量的类型将会是never[] 。换句话说，就是一个永不包含任何元素的数组。
如果频繁调用useState钩子，你也可以使用类型别名或者接口。
// App.tsx
import {useState} from 'react';
type Employee = {
  salary: number;
  name: string;
const App = () => {
  // 👇️ const employees: Employee[]
  const [employees, setEmployees] = useState<Employee[]>([]);
  return (
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
        Add employee
      </button>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
              salary: {employee.salary} / name: {employee.name}
          </div>
    </div>
export default App;
我们将对象类型提取为一个类型别名，并将其作为Employee[]来对useState钩子进行类型声明。
如果我们试图向state数组添加一个不同类型的值，我们会得到一个类型检查错误。
// App.tsx
import {useState} from 'react';
type Employee = {
  salary: number;
  name: string;
const App = () => {
  // 👇️ const employees: Employee[]
  const [employees, setEmployees] = useState<Employee[]>([]);
  // ⛔️ Argument of type '(prevEmployees: Employee[]) => (string | Employee)[]' is not assignable to parameter of type 'SetStateAction<Employee[]>'.
  setEmployees(prevEmployees => [...prevEmployees, 'Hello world']);
  return (
      <button
        onClick={() =>
          setEmployees(prevEmployees => [
            ...prevEmployees,
            {salary: 100, name: 'Bob'},
        Add employee
      </button>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
              salary: {employee.salary} / name: {employee.name}
          </div>
    </div>
export default App;
这个例子向我们展示了，试图向一个类型为Employee[]的state数组添加一个字符串，会导致类型检查器报错。
  
分类：
 前端
 
标签：
 
React.jsTypeScript
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    chuck
        VIP.5 如鱼得水
        公众号：前端F2E