TypeScript 内置函数设置全部可选内容：setOptions 函数示例

本文将介绍一个 TypeScript 内置函数 setOptions，它可以将一个数组数据转换为可选项列表。该函数可以方便地用于下拉菜单、选择框等场景。

函数定义

export function setOptions<T>( 
  list: T[], 
  setter: (list: T[]) => void, 
  key: keyof T, 
  label: keyof T 
): void { 
  setter(list.map(item => ({ value: item[key], label: item[label] }))); 
}

参数说明：

list: 需要转换的数组数据。
setter: 一个回调函数，用于设置转换后的可选项列表。
key: 数组元素中的用于作为选项值的属性名。
label: 数组元素中的用于作为选项显示文本的属性名。

使用示例

// 使用
setOptions(userList, setUserOptions, 'id', 'name')

// 模拟数据
const userList = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 19 },
  { id: 3, name: '王五', age: 20 }
]

// 设置函数
const setUserOptions = (list: {value: number; label: string}[]) => { 
  console.log(list) 
}

代码说明：

首先，我们定义了一个模拟数据 userList，包含三个用户对象。
然后，我们定义了一个回调函数 setUserOptions，该函数将在 setOptions 函数内部被调用，用于设置最终的可选项列表。
最后，我们调用 setOptions 函数，将 userList 数组、setUserOptions 函数以及 id 和 name 属性名作为参数传入。

代码解析

在 setOptions 函数内部，我们使用 map 方法遍历 list 数组，并为每个元素创建一个新的对象，该对象包含 value 和 label 属性，分别对应 key 和 label 属性值。最后，我们将所有创建的新对象组成的数组作为参数传递给 setter 函数。

总结

通过使用 setOptions 函数，我们可以轻松地将一个数组数据转换为可选项列表，并方便地应用于各种场景。