React中如何基于导入的JSON类型定义useState？

你完全可以不用单独写类型文件，利用TypeScript对导入JSON的自动类型推断就能解决这个问题，具体做法如下：

首先确保你的TypeScript配置文件（tsconfig.json）里已经开启了resolveJsonModule选项（这是导入JSON文件的前提，你能成功导入data说明大概率已经开了）：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // 其他配置...
  }
}

接下来有两种简洁的写法：

写法一：直接在useState中使用类型推断 #

不用额外定义类型，直接通过typeof data[number]获取JSON数组中单个元素的类型，作为useState的泛型参数：

import data from "../data.json";
import { useState } from "react";

// 初始值可以设为null或者数组里的某一项，比如data[0]
const [selectedItem, setSelectedItem] = useState<typeof data[number] | null>(null);

// 点击按钮设置状态的示例
const handleClick = () => {
  // 这里设置第2项（索引为1）
  setSelectedItem(data[1]);
};

写法二：先提取类型再使用 #

如果需要多次用到这个类型，可以先把JSON数组元素的类型提取出来，再用在useState里：

import data from "../data.json";
import { useState } from "react";

// 提取JSON数组单个元素的类型
type Person = typeof data[number];

const [selectedItem, setSelectedItem] = useState<Person | null>(null);

const handleClick = () => {
  setSelectedItem(data[1]);
};

这样处理后，selectedItem就会被TypeScript正确识别为包含name属性的对象，不会再出现name属性不存在的错误。

内容的提问来源于stack exchange，提问作者inzn