React+TypeScript中如何定义字符串键值对类型的useState？

直接通过泛型参数指定类型即可，以下是不同场景的具体写法：

带初始值的场景 #

如果初始值本身就是符合字符串键->字符串值结构的对象，你可以显式指定类型（也可以让TypeScript自动推断，但显式指定更清晰）：

import { useState } from 'react';

const [userInfo, setUserInfo] = useState<{ [key: string]: string }>({
  name: 'phildn',
  location: 'Unknown'
});

初始值为空对象的场景 #

如果初始值是空对象，必须显式指定类型，否则TypeScript会把它推断为{}（无法添加新的键值对）：

import { useState } from 'react';

// 显式声明类型，确保后续能正常添加字符串键值对
const [formState, setFormState] = useState<{ [key: string]: string }>({});

// 正确的更新方式：展开原有状态，避免覆盖
setFormState(prev => ({ ...prev, username: 'newUser', email: 'user@example.com' }));

优化：使用类型别名（重复使用时） #

如果这个键值对类型会在多个地方用到，定义一个类型别名让代码更简洁：

import { useState } from 'react';

type StringKeyValue = { [key: string]: string };

const [settings, setSettings] = useState<StringKeyValue>({
  theme: 'light',
  language: 'zh-CN'
});

排查之前写法失效的可能原因 #

• 初始值不符合类型：比如初始值里存在非字符串的属性值，TypeScript会抛出类型错误，检查所有属性值是否都是字符串
• 泛型位置错误：确认类型是写在useState<>的尖括号内，而非其他位置
• 更新方式错误：更新对象state时未展开原有状态，导致丢失已有属性，必须通过prev => ({ ...prev, ...newData })的方式更新

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