使用 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 的新手，所以我很乐意得到一些反馈，也许还有关于这个重构的建议？

提前致谢！

Answer 1

因为 reduce 函数 return 类型作为初始值的类型，所以我在您的代码中做了一些更改以支持 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;
}

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

Parsing nested object using reduce() and Typescript

typescript

reduce

nested-object