Question: use generated TypeScript declaration in my React component.

[sergiop]

Hi, I'm a Typescript newbie and I have a question not strictly related to this project: I used css-modules-typescript-loader to generate TypeScript declarations:

I have got this structure:

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

Inside MyComponent.tsx I have a function myFunc passing as a parameter styles object, in this way:

import React from 'react'
import styles from './MyComponent.module.css'

const myFunc = (styles, otherParam) => {...}

const MyComponent: React.FunctionComponent<ButtonProps> = (props) => {...}

Is it possible to import Interface from MyComponent.module.css.d.ts adding types like:

import React from 'react'
import styles from './MyComponent.module.css'

const myFunc = (styles: CssModuleInterface, otherParam: string): string => {...}

const MyComponent: React.FunctionComponent<ButtonProps> = (props) => {...}

How can I do it?

[mattpocock]

You can do typeof styles instead of CssModuleInterface.

[RichardTMiles]

import styles from "./style.module.scss"

export function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS) : iCSS & typeof styles {
    return {
        ...styles,
        ...overrides
    }
}

Works perfectly. Thanks!