import { useState } from 'react';
// 定义泛型类型，用于表示数组中元素的类型
type UseArrayReturnType<T> = [T[], (newItem: T) => void, () => void];
// 自定义Hook，用于管理数组状态
function useArray<T>(): UseArrayReturnType<T> {
const [items, setItems] = useState<T[]>([]);
// 添加新元素到数组
const addItem = (newItem: T) => {
setItems((prevItems) => [...prevItems, newItem]);
};
// 清空数组
const clearItems = () => {
setItems([]);
};
// 返回状态和操作方法
return [items, addItem, clearItems];
}
// 使用自定义Hook
export default function App() {
// 使用泛型指定数组元素类型为字符串
const [items, addItem, clearItems] = useArray<string>();
// 示例：添加和清空数组
return (
<div>
<button onClick={() => addItem('新项目')}>添加项目</button>
<button onClick={clearItems}>清空列表</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}这段代码定义了一个名为useArray的自定义Hook，它使用TypeScript的泛型来提供一个灵活的数组状态管理解决方案。该Hook返回一个数组，其中包含当前状态、添加新项目的函数和清空数组的函数。在App组件中，我们演示了如何使用这个Hook来管理字符串类型的数组。