In principle, yes, you can do this. Like the other answers I don't think it's a great idea most of the time, but I can certainly believe there's cases where it might be.
Assuming you're using a compatible module system between the two (e.g. both are compiling to ES6 modules as you suggest), then you can write some ClojureScript, compile it to my-cjs.js
, add a my-cjs.d.ts
file to your TypeScript containing declare module "my-cjs";
, import it in TS as import { export1, export2 } from "my-cjs"
, and start using it.
To go further you'll probably want to build and maintain your own type definitions, rather than using this ambient shorthand module setup (which is easiest to start with, but will any
type all your ClojureScript). As far as I know there's no useful way to automatically generate compatible type definitions from ClojureScript, so you'll have to keep that up to date by hand, which may or may not be more effort than it's worth for your case, depending on how much the API for your script is going to change.
The trickier part is probably going to be combining the output of your two separate compilations, so that both load correctly with ES6 modules. You'll want to output your TypeScript JS files into one folder, output your ClojureScript JS into another folder, and then combine those folders in some way to make the paths line up nicely (you could compile them into the same folder directly, but I'd start with combining to start with, to keep things simpler). That depends on how you set up your compilation steps, but it's certainly doable.
I'd aim to compile both to a file structure that's something like:
/cjs-output
|- /my-component
|- my-cjs-script.js
/ts-output
|- my-ts-code.js
|- some-more-ts-code.js
and to then combine these as a second step to:
/output
|- /my-component
|- my-cjs-script.js
|- my-ts-code.js
|- some-more-ts-code.js
As far as I can tell webpack doesn't have a ClojureScript loader available, so you'll have to do that compilation step by hand either way. How exactly you want to hook this into Webpack is an open question - I'd normally start by getting the TS + CJS to JS step working outside webpack, and then use webpack to handle the process from the JS onwards, before maybe integrating more later, but YMMV.
From there my-ts-code.js
should be able to import my-component/my-cjs-script
at runtime just fine, and as long as you've got a type definition in place for my-component/my-cjs-script
then tsc should happily compile that for you.