typescript 在单个声明中分配多个常量变量

jm81lzqq 于 2023-10-22 发布在 TypeScript

关注(0)|答案(2)|浏览(178)

我对react/JS还比较陌生，所以这个问题听起来有点傻：
我需要根据位置设置多个变量（系统变量）。这些变量应该是常量，因为它们对于给定的示例永远不会改变。
这是我目前的解决方案，它工作，但它感觉非常错误的定义其他变量声明中的变量。似乎也不可能将footerWidth和footerAltText声明为没有初始值的常量。

<Box
    as='img'
    width={footerWidth}
    justifyContent='center'
    alignContent='center'
    src={footerLogoSource}
    alt={footerAltText}
 />

这些属性由我的features.ts提供：

export let footerWidth: string
export let footerAltText: string
export const footerLogoSource: string =
  getAppConfig().contextPath +
  (() => {
    switch (getAppConfig().landesvariante) {
      case Variante.SN:
        footerWidth = '30%'
        footerAltText = 'lorem ipsum'
        return '/assets/kofin_eu_logo.svg'
      case Variante.BB:
        footerWidth = '20%'
        footerAltText = 'lorem ipsum 2'
        return '/assets/logo_bb.svg'
      default:
        return null
    }
  })()

一个解决方案是为3个变量做3个开关情况配置，但这会导致大量重复的代码。
”有一个正确的方法来做这个吗？**

typescript

来源：https://stackoverflow.com/questions/77308351/assign-multiple-const-variables-in-single-declaration

2条答案

按热度按时间

bnlyeluc1#

下面是使用array destructuring的方法

const [footerWidth, footerAltText, footerLogoSource] = (() => {
  const config = getAppConfig();

  switch (config.landesvariante) {
    case Variante.SN:
      return ['30%', 'lorem ipsum', `${config.contextPath}/assets/kofin_eu_logo.svg`];
    case Variante.BB:
      return ['20%', 'lorem ipsum 2', `${config.contextPath}/assets/logo_bb.svg`];
    default:
      return [undefined, undefined, null];
  }
})();

也可以使用对象解构

const { width: footerWidth, altText: footerAltText, logo: footerLogoSource } = (() => {
  const config = getAppConfig();
  switch (config.landesvariante) {
    case Variante.SN:
      return {
        width: '30%',
        altText: 'lorem ipsum',
        logo: `${config.contextPath}/assets/kofin_eu_logo.svg`
      };
    case Variante.BB:
      return {
        width: '20%',
        altText: 'lorem ipsum 2',
        logo: `${config.contextPath}/assets/logo_bb.svg`
      };
    default:
      return {logo: null};
  }
})();

赞(0）回复(0）举报 2023-10-22

dohp0rv52#

您也可以在不使用任何析构或自调用函数的情况下，通过一些额外的类型来完成此操作

enum Variante {
  SN,
  BB
}

interface IConfig {
  footerWidth: string;
  footerAltText: string;
  footerLogoSource: string;
}

type AppConfig = {
  [key in Variante]: IConfig;
};

const config: AppConfig = {
  [Variante.BB]: {
    footerWidth: "30%",
    footerAltText: "lorem ipsum",
    footerLogoSource: "lorem ipsum"
  },
  [Variante.SN]: {
    footerWidth: "20%",
    footerAltText: "lorem ipsum",
    footerLogoSource: "lorem ipsum"
  }
};

export default config[getAppConfig().landesvariante as keyof typeof Variante];

赞(0）回复(0）举报 2023-10-22

我来回答

typescript 在单个声明中分配多个常量变量

2条答案

相关问题

热门标签

最新问答