不同的 TypeScript 导入类型答案

【问题标题】：Different TypeScript import types不同的 TypeScript 导入类型
【发布时间】：2019-06-25 14:58:18
【问题描述】：

这些 TypeScript 导入类型有什么区别？

import SettingsIcon from "@material-ui/icons/Settings";
import { MenuList } from "@material-ui/core";

据我了解，第一个没有大括号的是直接类导入，第二个是类集合中的一个类。那是对的吗？不起作用的一件事是从 @material-ui/icons 导入几个 *Icon 类，我真的不知道为什么，即以下不起作用：

import { ImageIcon, LanguageIcon, DescriptionIcon, MenuIcon, SchoolIcon, SettingsIcon } from "@material-ui/icons";

为什么我不能导入那些图标类？我怎样才能知道我需要什么类型的导入？

【问题讨论】：

请看一下这个页面。他们在这里解释了如何处理这些图标：material-ui.com/style/icons。无论您是否在单独的路径中提供每个组件或图标，这都是一个设计决策，并且在一定程度上也具有一定的稳定性。曾经有一段时间，每个人都热衷于使用所谓的“桶”，即可以用来捆绑导入的 index.ts 文件。但是由于循环依赖问题，他们建议不再这样做。也许这就是原因。
这篇文章回答了你的第一个问题：stackoverflow.com/questions/38729486/…

【解决方案1】：

如果您仔细阅读文档，对于进口 - 它明确指出

如果您的环境不支持 tree-shaking，推荐的导入图标的方法如下：

 import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
 import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

如果您的环境支持 tree-shaking，您也可以通过这种方式导入图标：

 import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

因此，只有当您的开发环境支持 tree-shaking 时，您才能这样做。可以参考这里的文档：Imports for material-ui

【讨论】：