使用 Typescript 导入文件

Question

I'm importing the file, but I can't give the type of the file, how can I solve this problem?

import { capitalize } from "utils";

import * as Icons from "./";
type IconType = {
  name: string;
};
const icon = ({ name, ...props }: IconType) => {
  const newName = capitalize(name);
  if (!Icons[newName]) return null;

  const CustomIcon = Icons[newName];
  return <CustomIcon {...props} />;
};

export default icon;

Answer 1

You can probably fix your issue by typing Icons[newName as keyof Icons] .

You have a lot of bad practices in your code you should fix, though:

1. You should add a import * as icons from "./pathToIcons"; . Importing by the index.ts should only happen if importing from outside the same folder;
2. const icon = (...) A component should start with capital letter, const Icon = (...) ;
3. { name, ...props }: IconType This is incoherent, because your type IconType only has one attribute name , therefore in your case, typescript should infer props typeof never . Probably you want something interface IconProps extends CustomIconProps { name: string }