打字稿错误，如何更正：元素隐式具有“任何”类型，因为类型答案

【问题标题】：Typescript error, how to correct this: Element implicitly has an 'any' type because type打字稿错误，如何更正：元素隐式具有“任何”类型，因为类型
【发布时间】：2019-07-07 19:03:57
【问题描述】：

元素隐含地具有“任何”类型，因为 type '{ "ada": { "color": string; “背景颜色”：字符串； }; “ae”：{“颜色”：字符串； “背景颜色”：字符串； }; “永恒之塔”：{“颜色”：字符串； “背景颜色”：字符串； }; “蚂蚁”：{“颜色”：字符串； “背景颜色”：字符串； }; “方舟”：{ ...; }; ... 81 更多 ...; “zrx”：{ ...; }; }' 没有索引签名。ts(7017)

我有一个 coinStyles.json 文件，其中包含每个资产的加密货币品牌颜色。

以下函数根据资产的 id（符号）提取正确的样式对象。

import styles from '../../coinStyles.json'
import { ICoinStyle } from '../types'

// Add style to coin square.
export const setStyle = (currency: string): ICoinStyle => styles[currency.toLowerCase()];

我以为我缺少返回样式的类型，所以我添加了: ICoinStyle，但这并没有帮助，现在看来它实际上希望我输入 JSON 格式的 styles 对象。我找不到那个语法。或者在这种情况下如何做到这一点。

ICOinStyle

export interface ICoinStyle {
  color: string;
  background: string;
  lightBg?: boolean;
}

coinStyles.json

{
  "ada": {
    "color": "#FFF",
    "backgroundColor": "#6297DF"
  },
  "ae": {
    "color": "#F35C8E",
    "backgroundColor": "#000"
  },
  "aion": {
    "color": "#47BEEB",
    "backgroundColor": "#131944"
  },
  "ant": {
    "color": "#FFF",
    "backgroundColor": "#26B9DD"
  },
  "ark": {
    "color": "#FFF",
    "backgroundColor": "#EF3A40"
  },
  "elf": {
    "color": "#FFF",
    "backgroundColor": "#2e60b7"
  },
  "bat": {
    "color": "#FFF",
    "backgroundColor": "#FC511F"
  },
  "bch": {
    "color": "#FFF",
    "backgroundColor": "#61BE42"
  },
  "bcn": {
    "color": "#FFF",
    "backgroundColor": "#EE4486"
  },
  "blt": {
    "color": "#FFF",
    "backgroundColor": "#555CEF"
  },
  "bnb": {
    "color": "#F2B940",
    "backgroundColor": "#3E3E3E"
  },
  "bnt": {
    "color": "#FFF",
    "backgroundColor": "#3B3B3B"
  },
  "brd": {
    "color": "#FFF",
    "backgroundColor": "#FA7B52"
  },
  "btc": {
    "color": "#FFF",
    "backgroundColor": "#F5922F"
  },
  "btg": {
    "color": "#FBBE2D",
    "backgroundColor": "#222423"
  },
  "bts": {
    "color": "#FFF",
    "backgroundColor": "#3EBBE9"
  },
  "cvc": {
    "color": "#FFF",
    "backgroundColor": "#359F74"
  },
  "dai": {
    "color": "#FFF",
    "backgroundColor": "#f7B04A"
  },
  "dash": {
    "color": "#FFF",
    "backgroundColor": "#1175B4"
  },
  "dcr": {
    "color": "#3AD6A3",
    "backgroundColor": "#2F76FB"
  },
  "dgb": {
    "color": "#FFF",
    "backgroundColor": "#022552"
  },
  "dgd": {
    "color": "#F0C838",
    "backgroundColor": "#212429"
  },
  "doge": {
    "color": "#333333",
    "backgroundColor": "#B99E3D"
  },
  "dnt": {
    "color": "#71F7F9",
    "backgroundColor": "#273284"
  },
  "gbyte": {
    "color": "#FFF",
    "backgroundColor": "#2D3E4F"
  },
  "eos": {
    "color": "#F0F5F8",
    "backgroundColor": "#443F53"
  },
  "enj": {
    "color": "#26D1CC",
    "backgroundColor": "#36245E"
  },
  "etc": {
    "color": "#FFF",
    "backgroundColor": "#678F74"
  },
  "eth": {
    "color": "#FFF",
    "backgroundColor": "#5C607F"
  },
  "fct": {
    "color": "#FFF",
    "backgroundColor": "#578299"
  },
  "fuel": {
    "color": "#FFF",
    "backgroundColor": "#093156"
  },
  "fun": {
    "color": "#9E235C",
    "backgroundColor": "#FFF"
  },
  "gas": {
    "color": "#FFF",
    "backgroundColor": "#719361"
  },
  "gno": {
    "color": "#009CBC",
    "backgroundColor": "#FFF"
  },
  "gnt": {
    "color": "#FFF",
    "backgroundColor": "#083F6C"
  },
  "lend": {
    "color": "#0DA2C2",
    "backgroundColor": "#FFF"
  },
  "icn": {
    "color": "#4D6F8B",
    "backgroundColor": "#829AAE"
  },
  "icx": {
    "color": "#FFF",
    "backgroundColor": "#3CA8B9"
  },
  "iot": {
    "color": "#FFF",
    "backgroundColor": "#333"
  },
  "lsk": {
    "color": "#FFF",
    "backgroundColor": "#0D468F"
  },
  "ltc": {
    "color": "#FFF",
    "backgroundColor": "#CDCDCD"
  },
  "lun": {
    "color": "#F04725",
    "backgroundColor": "#191B22"
  },
  "kmd": {
    "color": "#FFF",
    "backgroundColor": "#3C6363"
  },
  "maid": {
    "color": "#FFF",
    "backgroundColor": "#5C91C9"
  },
  "mana": {
    "color": "#F57028",
    "backgroundColor": "#D1C7BE"
  },
  "mco": {
    "color": "#FFF",
    "backgroundColor": "#111A32"
  },
  "mkr": {
    "color": "#F0F2F3",
    "backgroundColor": "#2ABB9C"
  },
  "mona": {
    "color": "#FFF",
    "backgroundColor": "#B6A170"
  },
  "nano": {
    "color": "#4E92DF",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "nem": {
    "color": "#212033",
    "backgroundColor": "#2DB5AB"
  },
  "neo": {
    "color": "#FFF",
    "backgroundColor": "#4EB704"
  },
  "nmr": {
    "color": "#FFF",
    "backgroundColor": "#000"
  },
  "omg": {
    "color": "#FFF",
    "backgroundColor": "#2159EC"
  },
  "ont": {
    "color": "#FFF",
    "backgroundColor": "#39A4BC"
  },
  "pay": {
    "color": "#FFF",
    "backgroundColor": "#353437"
  },
  "pivx": {
    "color": "#FFF",
    "backgroundColor": "#7C68A4"
  },
  "poe": {
    "color": "#FFF",
    "backgroundColor": "#292929"
  },
  "poly": {
    "color": "#FFF",
    "backgroundColor": "#4C5995"
  },
  "powr": {
    "color": "#FFF",
    "backgroundColor": "#1FBBA9"
  },
  "qash": {
    "color": "#FFF",
    "backgroundColor": "#1F4BB4"
  },
  "qtum": {
    "color": "#359bce",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "rep": {
    "color": "#FFF",
    "backgroundColor": "#412766"
  },
  "salt": {
    "color": "#22272f",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "sia": {
    "color": "#34EC86",
    "backgroundColor": "#7F8C8D"
  },
  "spank": {
    "color": "#FFF",
    "backgroundColor": "#FF6195"
  },
  "snm": {
    "color": "#FFF",
    "backgroundColor": "#131822"
  },
  "snt": {
    "color": "#0BD09F",
    "backgroundColor": "#FFF"
  },
  "steem": {
    "color": "#0BD09F",
    "backgroundColor": "#FFF",
    "lightBg": true
  },
  "strat": {
    "color": "#FFF",
    "backgroundColor": "#1f88c7"
  },
  "storj": {
    "color": "#FFF",
    "backgroundColor": "#2E86FB"
  },
  "theta": {
    "color": "#20D7C2",
    "backgroundColor": "#1A1D25"
  },
  "trx": {
    "color": "#FFF",
    "backgroundColor": "#222423"
  },
  "tusd": {
    "color": "#62C6FF",
    "backgroundColor": "#1D294F"
  },
  "usdt": {
    "color": "#FFF",
    "backgroundColor": "#2EA07C"
  },
  "usd": {
    "color": "#FFF",
    "backgroundColor": "#CACCB7"
  },
  "usdc": {
    "color": "#FFF",
    "backgroundColor": "#2775C9"
  },
  "waves": {
    "color": "#000",
    "backgroundColor": "#105CFB"
  },
  "wtc": {
    "color": "#8125FB",
    "backgroundColor": "#59EFDC"
  },
  "vet": {
    "color": "#AA77CE",
    "backgroundColor": "#B4E8FF",
    "lightBg": true
  },
  "xmr": {
    "color": "#4C4C4C",
    "backgroundColor": "#FC6621"
  },
  "xlm": {
    "color": "#07A2CC",
    "backgroundColor": "#CEEBF6",
    "lightBg": true
  },
  "xrp": {
    "color": "#23292F",
    "backgroundColor": "#1B84E6"
  },
  "xvg": {
    "color": "#FFF",
    "backgroundColor": "#3BA3CA"
  },
  "zec": {
    "color": "#000",
    "backgroundColor": "#EBB451"
  },
  "zen": {
    "color": "#5EFFB5",
    "backgroundColor": "#1C3871"
  },
  "zil": {
    "color": "#50C0BE",
    "backgroundColor": "#46494B"
  },
  "zrx": {
    "color": "#FFF",
    "backgroundColor": "#383838"
  }
}

【问题讨论】：

标签： javascript typescript function

【解决方案1】：

编译器不知道currency.toLowerCase() 将成为styles 对象的有效索引。所以你必须向它保证这一事实。最简单的方法就是对setStyle() 接受的内容非常严格：

export const setStyle = (currency: keyof typeof styles): ICoinStyle => styles[currency]; // okay

以上将仅接受currency 值，这些值是styles 的键并且已经是正确的大小写（所以没有.toLowerCase()）。

如果您希望能够以currency 接受任何字符串，并在它不是有效值之一时抛出纯粹的运行时错误，您可以使用type guard帮助你：

// check if k is a key of obj
function isKeyof<T>(k: keyof any, obj: T): k is keyof T {
  return k in obj;
}

export const setStyle = (currency: string): ICoinStyle => {
  const currencyLowerCase = currency.toLowerCase();
  if (isKeyof(currencyLowerCase, styles)) {
    return styles[currencyLowerCase]; // okay
  } else {
    throw new Error("YOU LIED TO ME ABOUT " + currency);
  }
}

在这里，您明确检查采用currency.toLowerCase() 是styles 的有效键，如果不是则抛出错误。唯一其他合理的选择是像这样返回ICoinStyle | undefined：

export const setStyle = (currency: string): ICoinStyle | undefined => {
  const currencyLowerCase = currency.toLocaleLowerCase();
  if (isKeyof(currencyLowerCase, styles)) {
    return styles[currencyLowerCase];
  } else {
    return undefined;
  }
}

希望其中之一对您有所帮助。祝你好运！

【讨论】：