如何导入和使用存储在自动生成的 *.d.ts 文件中的 typescript 接口？

Question

In a React Application, I have got this structure:

src/Components/MyComponent

├── MyComponent.module.css // Css modules styles
├── MyComponent.module.css.d.ts // Autogenerated style type definition
└── MyComponent.tsx // The React component

Component.module.css.d.ts contains this:

interface CssExports {
  'myCssClass01': string;
  'myCssClass02': string;
}
declare const cssExports: CssExports;
export = cssExports;

In MyComponent.tsx I want to import the interface and use it in a function, like this:

import styles from './MyComponent.module.css'
import { cssExports } from './MyComponent.module.css.d'

const myFunc = (style: cssExports): string => {...}

I am receiving error:

Module '"/src/components/MyComponent/MyComponent.module.css"' has no exported member 'cssExports'.ts(2305)

Where am I doing wrong?

Answer 1

Looks like you are using commonjs module syntax, Can you enable this flag in tsconfig.json and try again

"esModuleInterop": true 

Also export interface as well like below

// MyComponent.module.css

export interface CssExports {
  'myCssClass01': string;
  'myCssClass02': string;
}