如何推断 <select> 元素中的正确类型？答案

【问题标题】：How to infer correct type in <select> element?如何推断 <select> 元素中的正确类型？
【发布时间】：2020-08-01 18:35:11
【问题描述】：

我有一个材质选择 UI 元素：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={sortType}
  onChange={handleChange}
>
  <MenuItem value={'release_date'}>Release date</MenuItem>
  <MenuItem value={'title'}>Title</MenuItem>
  {/* <MenuItem value={'Date added'}>Date added</MenuItem> */}
</Select>

如您所见，该值为字符串release_date 或title。我想根据选择的选项对数组进行排序：

type IMovie = {
  title: string;
  poster_path: string;
  release_date: string;
  id: number;
  type?: any;
};

const handleChange = event => {
  setSortType(event.target.value);
  const type = event.target.value;

  localforage.getItem<IMovie []>('trackedMovies').then((value) => {
    let trackedMovies = value;
    trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']);
  })    
};

这不起作用，我认为这是因为 trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']); 的类型为 any。

如果我用IMovie 或title 或release_date 之类的IMovie 属性替换类型，sortBy 确实有效：

 trackedMovies = orderBy(trackedMovies, [movie => movie.type], ['asc']);

如果我更改 MenuItem: <MenuItem value={release_date}>Release date</MenuItem> 中的值，我会收到以下错误：

找不到名称“release_date”。

这是有道理的，因为没有提到 {release_date}。我可以通过使用开关来解决这个问题，但使用MenuItem 的直接值来决定sortBy 方法应该做什么会更容易/更好（我认为）。

【问题讨论】：

标签： typescript lodash

【解决方案1】：

我在接近我的功能时出错了（我认为）。 sortBy 使用分配属性的值进行排序。我以为它使用了 type 属性（这是非常错误的）。

所以我创建了一个函数retunSortType，它将电影对象作为参数。在函数中，它使用一个开关来查找正在使用的排序类型，然后返回正确的类型（标题或发布日期）。

const returnSortType = (movie) => {
  switch (type) {
    case 'release_date':
      return movie.release_date;      
    case 'title':
      return movie.title;
  }
}

localforage.getItem<IMovie []>('trackedMovies').then((value) => {
  let trackedMovies = value;
  trackedMovies = orderBy(trackedMovies, [movie => returnSortType(movie)], ['asc']);
})

它有效，它具有可读性，并且可以通过开关添加更多选项，所以我对此感到有点高兴。不过还是觉得有更好的解决方案。

【讨论】：