How to type module default getter in TypeScript?

17 views Asked by At

I am building an icon library for future use in React component library. I have an IconFlag component which should accept one of the flag icons svg.

Icons svg are in ./icons/flags folder exported from index.ts like this:

export * as AD from "./ad.svg";
...
export * as ZW from "./zw.svg";

Then I import them in the IconFlag component itself and extract type union:

import * as flags from "./icons/flags";
type IconFlagNames = keyof typeof flags;

Now I want to access default value of module exports in my component and this is the part, that gives me a warning unable to validate computed reference to imported namespace 'flags':


export const IconFlag = ({ name }: IconFlagNames ) => {
  const icon = flags[name].default;

  return (
    ...
  )
}

How do I type this correctly?

upd: This error obviously comes from eslint rule import/namespace, tried adding /*eslint import/namespace: ['error', { allowComputed: true }]*/ but with no success.

0

There are 0 answers