使用 reduce() 和 Typescript 解析嵌套对象

Question

我实际上是在尝试将一些 Javascript 代码转换为 Typescript，但我在以下功能上遇到了问题。它的目的是解析一些内容（从 JSON.parse() 构建的嵌套对象），当被调用时，例如：t('common.error')。

const i18nContent = {
  common: {
    error: {
    missing_translation: 'Missing translation',
    missing_posts: 'Some articles are not available in this language',
  },
  languages_available: 'This article is available in other languages'
}

const t = (key) => {
  const kArray = key.split('.')

  // Parsing possibly nested object
  const keyValue = kArray.reduce((o, k) => ((o && o[k] !== 'undefined') ? o[k] : undefined), i18nContent)

  return keyValue || key
}

我尝试了这种方法，这似乎可行，但对我来说似乎很丑...：/

type I18nContent = Record<string, unknown> // Content value could be a string, or a nested object
type I18n = Record<string, I18nContent> // API always returns an object with namespace as key, and object (possibly nested) as value

const i18nContent: I18n = {
  common: {
    error: {
      missing_translation: 'Missing translation',
      missing_posts: 'Some articles are not available in this language'
    },
    languages_available: 'This article is available in other languages'
  }
}

const t = (key: string): string => {
  const kArray = key.split('.')
  
  const keyValue = kArray.reduce((o: unknown, k: string) => {
    if (o && typeof o === 'object' && Object.keys(o).length && o[k as keyof typeof o] !== 'undefined') {
      return o[k as keyof typeof o]
    } else {
      return undefined
    }
  }, i18nContent)

  return typeof keyValue === 'string' ? keyValue : key
}

我对 Typescript 还是很陌生，所以我很乐意收到一些反馈，也许是关于这个 refato 的建议？

提前致谢！

Answer 1

因为reduce 函数返回类型是初始值类型，所以我在您的代码中稍作更改以支持 i18n 嵌套多级对象。

interface ITranslationContent {
  [key: string]: string | ITranslationContent;
}

const i18nContent: ITranslationContent = {
  common: {
    error: {
      missing_translation: 'Missing translation',
      missing_posts: 'Some articles are not available in this language',
      http_code: {
        unauthorized: '401'
      }
    },
    languages_available: 'This article is available in other languages'
  }
}

const t = (key: string): string | ITranslationContent => {
  const kArray = key.split('.')
  let res: string | ITranslationContent = i18nContent;
  kArray.forEach((k: string) => {
    res = typeof res === 'string' ? res : res[k];
  })
  return res || key;
}