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

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

我实际上是在尝试将一些 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 还很陌生，所以我很乐意得到一些反馈，或许还有关于这个 refacto 的建议？

提前谢谢！

解决方法

因为 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;
}