在打字稿中编写此开关/案例的更好方法？答案

【问题标题】：Better way to write this switch/case in typescript?在打字稿中编写此开关/案例的更好方法？
【发布时间】：2019-06-09 13:25:04
【问题描述】：

我正在用 Angular 开发一个非常简单的天气应用程序，我想问你是否认为有更好的方法可以根据天气编码的“类型”来选择某个图像。

enum WeatherCodition {
    Thunderstorm = 0,
    Drizzle,
    Rain,
    Snow,
    Clear,
    Clouds
}

export class Weather {


    getIcon(condition: WeatherCodition): string {

        var iconPath = "";
        switch(condition){
            case WeatherCodition.Thunderstorm:
                iconPath =  "thunderstorm.png";
                break;
            case WeatherCodition.Clouds:
                iconPath =  "clouds.png";
                 break;
            case WeatherCodition.Drizzle:
                iconPath =  "drizzle.png";
                break;
            case WeatherCodition.Rain:
                iconPath =  "rain.png";
                 break;
            case WeatherCodition.Snow:
                iconPath =  "snow.png";
                break;
            default:
                iconPath = "clear.png"
        }

        return iconPath;
    }

}

【问题讨论】：

不，case 都是 enum 中的类型。现在我换个问题，对不起。
最好有一个用于 WeatherCondition:ImageUrl 映射的哈希图。这样您就可以在恒定时间内直接访问所需的图标。
抱歉，您能提供相关文件吗？非常感谢。

标签： javascript angular typescript design-patterns enums

【解决方案1】：

请考虑使用interface KeyValue<K, V> 作为数组。我的解决方案：

export enum WeatherCodition {
    Thunderstorm = 0,
    Drizzle,
    Rain,
    Snow,
    Clear,
    Clouds
}

import { KeyValue } from '@angular/common';

export class Weather {

    public keyValueArray: KeyValue<WeatherCodition, string>[] = 
    [
        { key: WeatherCodition.Thunderstorm, value: "thunderstorm.png" },
        { key: WeatherCodition.Drizzle , value: "drizzle.png"},
        { key: WeatherCodition.Rain, value: "rain.png" },
        { key: WeatherCodition.Snow, value: "snow.png" },
        { key: WeatherCodition.Clear, value: "clear.png" },
        { key: WeatherCodition.Clouds, value: "clouds.png" },
    ];

    getIcon(condition: WeatherCodition): string {
        //check if 'condition' exists in array as key
        return this.keyValueArray[condition] ? 
            this.keyValueArray[condition].value : 
            "clear.png"; 
    }
}

祝你有美好的一天！

【讨论】：

【解决方案2】：

您的方法非常好。您还可以为恒定时间查找创建一个 hashmap，因为无论如何您都在 switch 语句中对 url 进行编码。

   interface WeatherIcons {
     Thunderstorm: string;
     Clouds: string;
   }
   const icons: WeatherIcons = {
      Thunderstorm: "Thunderstorm.jpg",
      Clouds: "Clouds.jpg"
   }
   function getIcon(condition: WeatherCondition) {
      return icons[condition] || "default.jpg";
   }

【讨论】：

【解决方案3】：

您可以创建一个对象并根据键访问属性

let WeatherCodition = {
  thunderstorm:"thunderstorm.png",
  clouds:"clouds.png",
  drizzle:"drizzle.png",
  rain:"rain.png",
  snow:"snow.png",
  default:"clear.png"
}

function getIcon(condition) {
  condition = condition || ""
  condition = Object.keys(WeatherCodition).find(c=> c.toLowerCase() === condition.toLowerCase()) || 'default'
  return WeatherCodition[condition]
}

console.log(getIcon(''))
console.log(getIcon('Clouds'))
console.log(getIcon())
console.log(getIcon('SnoW'))

【讨论】：

【解决方案4】：

为什么不定义一个数组？

iconPaths:string[]=["thunderstorm.png","clouds.png","drizzle.png","rain.png","snow.png",
                   "clear.png"]
iconPath=this.iconPaths[condition];
//or 
iconPath=(condition && condition<6)?this.iconPaths[condition]:"";

【讨论】：