Typescript errors in javascript files

Question

I have a javascript codebase that we're slowly migrating over to TS.

My tsconfig.json:

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "./public/dist",
    "noEmit": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "esnext",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "alwaysStrict": true,
    "strict": true,
    "inlineSourceMap": false,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "pi-lib/*": ["./react-ui/lib/*"],
      "pie/*": ["./react-ui/pie/*"],
    }
  },
  "include": [
    "./react-ui/**/*.ts",
    "./react-ui/**/*.tsx",
    "./react-ui/**/*.js",
    "./react-ui/**/*.jsx",
  ],
  "exclude": [
    "node_modules",
    "public",
    "vendor",
  ]
}

The below example is one of many containing similar errors from different components in the codebase.

I have a file, Tab.jsx (note, it's a javascript file) with the following contents:

const Tab = styled.div`
  {tab styles are here}
`

Tab.propTypes = {
  active: bool.isRequired,
  onClick: func,
}

export default Tab

This Tab component is then being used in a .tsx file:

<Tab active={activeTab === key} onClick={handleClick}>{key}</Tab>

and I'm getting the following error:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
     Type '{ children: string; active: boolean; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
       Property 'active' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.   

Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.
     Type '{ children: string; active: boolean; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
       Property 'active' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.

tl;dr: It's complaining that my custom prop active does not exist on the provided styled-component type, which is makes sense, because active is not a valid DOM property for a div. However, because this is a .jsx file, I am unable to add types to rectify this.

Obviously, I could convert it to a typescript file and type it properly, but as mentioned earlier, this one one of hundreds of similar components like this in the codebase. This issue is not limited to styled-components, it was just a succinct example that I could provide.

I was under the impression that allowJs existed to allow a progressive migration of a codebase to typescript, however enabling this setting has revealed hundreds of type errors in javascript components that are being used in typescript files, which seems counterproductive to migrating a codebase because now they all have to be rectified at once.

By changing it to allowJs: false, the compiler then provides a missing declaration error for every single javascript file that is imported. For example:

TS7016: Could not find a declaration file for module '../Elements.js'

Is there something obvious that I'm missing around this, or a combination of settings in tsconfig that would prevent this from being a blocker?