I am looking to incorporate types in an existing JS project specifically for IDE syntax highlighting, without adding to the library @types/.
For example, I have a file named 'TestComponent.js':
export const TestComponent = (props) => {
return <div>{props.someString}</div>;
};
In order to declare types, I created a file 'TestComponent.d.ts':
interface TestComponentProps {
someString: string;
}
export type TestComponent = (props: TestComponentProps) => JSX.Element;
I also added a JSDoc type to 'TestComponent.js':
/** @type {import('./TestComponent').TestComponent} */
export const TestComponent = (props) => {
return <div>{props.someString}</div>;
};
As a result, VSCode now highlights props as an object with the key 'someString'.
Is it acceptable to use Typescript solely for this purpose?
While I am aware I could stick with JSDoc, I am not a fan of its syntax. Are there any better solutions for this?