reactjs - Typescript Utils class return React Component

Question

I am doing a typescript React project and am attempting writing some utility classes. I am having issues returning a React component this way though and not sure what would I should be doing/what is best practice. I am getting the "refers to a value, but is being used as a type here." error unless I use a tsx file, in which case it can't be properly imported. Also worth noting throwing a @ts-ignore alleviates that error but then errors as "Unterminated regular expression literal"

Edit: this is error with <SomeIcon /> etc.

Here is my BoxUtils.ts

export abstract class BoxUtils {
    public static getIconForStatus(box: BoxModel): Icon | null {
        switch(box.status) {
            case 'StatusOne':
                return <SomeIcon />;
            case 'StatusTwo':
                return <SomeOtherIcon />;
            case 'StatusThree':
                return <YetAnotherIcon />;
            default:
                return null;
        }
    }
}

And this is a fragment of where I would use the util: <div>{BoxUtils.getIconForStatus(row)}</div>

Answer 1

The syntax you've included in the following lines are JSX syntax, meaning that they contain ES6 components that aren't build into the interpreter of the Typescript language.

return <SomeIcon />;
return <SomeOtherIcon />;
return <YetAnotherIcon />;

However you can include these syntax capabilities by marking the file as .tsx rather than .ts. If you were only including typescript functions or types, you could use just the .ts file extension.