在打字稿组件变量中使用json对象值？答案

【问题标题】：Using json object values in typescript component variable?在打字稿组件变量中使用json对象值？
【发布时间】：2020-10-30 06:19:19
【问题描述】：

我对使用 typescript 还是很陌生，但我遇到了一个我不太知道如何解决的情况。我正在尝试获取我的 react typescript 项目中的一些静态 json 数据，并将其用作语义 ui 组件变量值。

我有一个名为socials.ts 的文件保存在data/ 目录中，它看起来像

export const socials = [
  {
     "id":1,
     "media": "github"
     ...
  ...}
]

然后我有另一个组件SocialsLinks.tsx，它假设将图标显示为社交对象中每个值的链接。

...
import {socials } from "data/socials"
import { Icon } from "semantic-ui-react";

export const Socials = () => {
  return (
    <>
      {socials.map((social) => (
        <a
          key={social.id}
          href={`https://${social.media}.com/${social.username}`}
        >
          <Icon name={ social.media }/>
        </a>
      ))}
    </>
  );
};

显然<Icon name={ social.media }/> 会引发类型错误，因为字符串 social.media 的类型为 any，而 Icon 只接受定义的语义 UI 字符串。

我想知道是否有办法将 social.media 字符串转换为语义 UI 字符串？或者为原始的 json 对象定义类型，让它像这样工作？

【问题讨论】：

要获得静态类型，您可以使用json2ts.com也许

标签： json reactjs typescript dictionary semantic-ui-react

【解决方案1】：

试试这个方法，

我已经创建了一个interface 用于记录。

    import * as React from "react";
    import "./styles.css";
    
    import { Icon } from "semantic-ui-react";
    import { SemanticICONS } from "semantic-ui-react/dist/commonjs/generic";
    
    interface Social {
      id: number; 
      username: string; 
      media: SemanticICONS;
    }
    
    export const App = () => {
      
      const socials: Social[] = [
        {
           "id":1,
           "media": 'github',
            username: 'james'
        }
      ]
      return (
        <>
          {socials.map((social: Social) => (
            <a
              key={social.id}
              href={`https://${social.media}.com/${social.username}`}
            >
              <Icon name={ social.media }/>
            </a>
          ))}
        </>
      );
    };

希望这就是你要找的。p>

【讨论】：