TypeScript Definition Help

Hi all,

I’m working on a TypeScript definition for withStyle. What I have so far is:

type identity<T> = (arg: T) => T;

//TODO: This could be better, specific type information about the component is lost
export default function withStyles<P, S, T>(style: any): identity<new (...args: T[]) => React.Component<P, S>>

While this is OK, clearly some type information about the component is being lost, and I’m not too sure what type to use for the style object. Any ideas how to make this better?

Note that

export default function withStyles<T extends React.Component>(style: any): identity<T>

only works if you specify the return type (with withStyles<ComponentName>). Trying to avoid explicit generics if possible.

[jknanda78]

Hello @danielmhanover, are you still working on the typescript? I am expecting @types/isomorphic-style-loader. I tried with above suggestions but still seeing issues. Would you or anyone has a working solution?

Thanks in advance.

[ddsilva]

Following the thread, this is a sugestion for *.[s]css files, useStyles hook and StyledContext in global.d.ts file:

type Dispose = () => void
type InsertCssItem = () => Dispose
type GetCSSItem = () => string
type GetContent = () => string

interface Style {
  [key: string]: InsertCssItem | GetCSSItem | GetContent | string
  _insertCss: InsertCssItem
  _getCss: GetCSSItem
  _getContent: GetContent
}

declare module '*.scss' {
  const style: Style
  export default style
}

declare module '*.css' {
  const style: Style
  export default style
}

declare module 'isomorphic-style-loader/useStyles' {
  function useStyles(...styles: Style[]): void
  export default useStyles
}

declare module 'isomorphic-style-loader/StyleContext' {
  import { Context } from 'react'

  type RemoveGlobalCss = () => void
  type InsertCSS = (...styles: Style[]) => RemoveGlobalCss | void
  interface StyleContextValue {
    insertCss: InsertCSS
  }

  const StyleContext: Context<StyleContextValue>

  export { StyleContext as default, InsertCSS }
}