#Chunk of JSX code causes TypeScript's type-checking to become extremely slow

4 messages · Page 1 of 1 (latest)

untold reef
#

Hi, I have a project made with React, Stitches and TypeScript 5.0.2 that has the following chunk of code:

const textTypeMap = {
  bold: Bold,
  italics: Italics,
  spoiler: Spoiler,
}

// This will break TypeScript's intellisense, I'm sorry :(
const parseText = (token: TextToken) => Object
  .entries(textTypeMap)
  .reduce((acc, [ key, Component ]) =>
    token[key as keyof TextToken]
      ? <Component>{ acc }</Component>
      : acc, <Normal>{ token.content }</Normal>)

Bold, Italics and Spoiler are Stitches components. whenever the function parseText is uncommented, typescript's intellisense/type-checking in the code editor becomes extremely slow, meaning that it takes a very long time for the browser to point issues with invalid or flawed chunks of code in the file. I have tested this with differente code editors and the result is the same, does anyone have any clue why this happens?

jade abyss
#

coming from the styled function I think

#

its type is quite complex

untold reef
#

Maybe if I just used regular React components to wrap the styled ones it would help?