在React中基于数组状态创建动态类型

要实现基于string数组State生成动态同步的对象类型，核心是利用TypeScript的字面量推断和泛型映射类型，以下是具体实现方案：

关键思路 #

1. 避免将数组推断为宽泛的string[]，而是让TypeScript识别数组元素的具体字面量值；
2. 通过泛型类型将数组元素映射为对象的键，值统一设为string；
3. 让State的类型与字面量数组绑定，实现State更新时类型同步变化。

严格类型校验版（仅允许预定义元素） #

这种方式会严格限制State的元素范围，新增元素需修改初始定义，类型同步更新：

import { useState } from 'react';

// 泛型类型：将数组元素转为对象键，值为string
type ArrayToObject<T extends readonly string[]> = {
  [K in T[number]]: string;
};

// 用const断言锁定初始数组的字面量类型，避免被推断为string[]
const initialData = ['orange', 'apple'] as const;

// 约束State类型为只读字面量数组
const [data, setData] = useState<typeof initialData>(initialData);

// 动态生成的类型，会随initialData的元素变化同步更新
type Output = ArrayToObject<typeof initialData>;
// 当前Output等价于：{ orange: string; apple: string; }

// 合法更新：添加预定义范围内的新元素
setData(['orange', 'apple', 'banana'] as const);
// 此时Output自动变为：{ orange: string; apple: string; banana: string; }

// 非法更新：传入未定义的元素会触发TypeScript报错
setData(['orange', 'watermelon'] as const);

动态扩展版（支持任意字符串元素） #

如果需要支持动态添加任意字符串元素，同时保持类型同步，可以调整为联合类型约束：

import { useState } from 'react';

// 泛型类型：将数组元素的联合类型转为对象键
type ArrayToObject<T extends string[]> = {
  [K in T[number]]: string;
};

// 初始State类型设为指定元素的联合类型数组
const [data, setData] = useState<('orange' | 'apple')[]>(['orange', 'apple']);

// 动态类型，随State元素变化自动更新
type Output = ArrayToObject<typeof data>;

// 合法更新：添加新字符串元素，TypeScript自动扩展联合类型
setData([...data, 'banana']);
// 此时data类型变为('orange' | 'apple' | 'banana')[]，Output同步更新为包含banana的对象类型

// 也可以直接替换为全新的数组
setData(['grape', 'pear']);
// Output自动变为：{ grape: string; pear: string; }

核心原理说明 #

• as const：将数组转为只读字面量数组，让TypeScript记住每个元素的具体值，而非宽泛的string类型；
• T[number]：获取数组所有元素的联合类型，作为映射类型的键；
• 泛型约束：让State的类型与字面量/联合类型绑定，确保State更新时类型系统能同步识别新元素。

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