'How to write a TypeScript NPM package with JSX property suggestion/autocompletion for intellisense

I created a mini UI library and published it to NPM registry. My library is written with strongly typed styled-components (TypeScript) and can be imported in React applications. It works fine when I install it using npm install charge-ui and works well with NextJs.

Example:

import type { NextPage } from 'next';
// my library
import { Text, CallToActionButton } from "charge-ui";

const Home: NextPage = () => {
  return (
    <div>
      <CallToActionButton cursorPointer> Hire me </CallToActionButton> <br />
      <Text m={1}> Hello </Text>
      <Text m={1} className='title' fontSize='3rem'> Hello </Text>
    </div>
  );
};

export default Home;

The problem is my CallToActionButton component has the following type:

export type CallToActionType = {
  cursorPointer?: boolean;
  width?: string;
};

export const CallToActionButton = styled.button<CallToActionType>`
    //some css code
`;

but VS Code doesn't seem to detect its props. There is no suggestion/autocompletion showing up. If you take a look at my repo, the package is inside /lib folder and it has corresponding *.d.ts files. This also applies to other components.

enter image description here

Did I miss something here? Do you have any recommendation on how to autocomplete in VS Code with my library?

reactjstypescriptnpmstyled-components


Solution 1:[1]

I finally got the solution. Just include typescript in dependencies and not in devDependencies. Mine was in the devDependencies

package.json should be something like this

"dependencies": {
    "styled-components": "^5.3.5",
    "typescript": "4.6.4"
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eric Echemane

Related Questions