0

I'm working on a React Native project that is mostly done in javascript and has several styled components in a baseCSS.js file

We are progressively trying to migrate to typescript and type the javascript components as they are being used in typescript files, so my intention was to add the typing for these styled components in a baseCSS.d.ts file one by one until they are all typed, but I don't know how to type Styled Components in a separate file

I managed to type using JSDocs in the same file, but I don't know how to translate that into a .d.ts file

export const Box =
  /** @type {import('styled-components').ThemedStyledFunction<typeof View, BoxProps>} */
  (styled.View)`
Thiago Lino Gomes
  • 11
  • 1
  • 1
    Does this answer your question? [Using styled-components with props and TypeScript](https://stackoverflow.com/questions/47077210/using-styled-components-with-props-and-typescript) – Art Dec 28 '22 at 15:55
  • No, this answers how to type in a .tsx file but my question is how to do it in a .d.ts file – Thiago Lino Gomes Dec 29 '22 at 15:10

1 Answers1

1

First install typings:

npm i --save-dev @types/styled-components-react-native
// OR
yarn add -D @types/styled-components-react-native

then you can do something like:

const Heading = styled(View)<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;
Kirill Novikov
  • 2,576
  • 4
  • 20
  • 33