With Javascript I can use modules (i.e. import and export statements) and subdivide the code in different files and have such code run in the browser.
Let's take the simplest example made of 3 files: my-function-js.js, main-js.js and page-js.html
my-function-js.js
export function myFunctionJs() {
console.log("here I am, a pure Javascript function");
}
main-js.js
import { myFunctionJs } from "./my-function-js.js";
myFunctionJs();
page-js.html
<!DOCTYPE html>
<html>
<body>
<script type="module" src="./main-js.js"></script>
</body>
</html>
If I try to do the same with Typescript (the same code in files with the .ts extensions) I fail because the piler generates all kinds of "module related" depending on the module option given to the piler but is not able to simply maintain the code like it is and have it work like Javascript works with modules.
I realize this is a sort of theoretical question, that we should used bundlers and so on, but I was just curious to know if there is a simple way to make modules work in the browser just using the Typescript piler.
With Javascript I can use modules (i.e. import and export statements) and subdivide the code in different files and have such code run in the browser.
Let's take the simplest example made of 3 files: my-function-js.js, main-js.js and page-js.html
my-function-js.js
export function myFunctionJs() {
console.log("here I am, a pure Javascript function");
}
main-js.js
import { myFunctionJs } from "./my-function-js.js";
myFunctionJs();
page-js.html
<!DOCTYPE html>
<html>
<body>
<script type="module" src="./main-js.js"></script>
</body>
</html>
If I try to do the same with Typescript (the same code in files with the .ts extensions) I fail because the piler generates all kinds of "module related" depending on the module option given to the piler but is not able to simply maintain the code like it is and have it work like Javascript works with modules.
I realize this is a sort of theoretical question, that we should used bundlers and so on, but I was just curious to know if there is a simple way to make modules work in the browser just using the Typescript piler.
Share Improve this question asked Mar 25, 2022 at 18:16 PicciPicci 17.8k16 gold badges79 silver badges123 bronze badges 2- Looks like others have tried: ilikekillnerds./2020/09/… – TrueWill Commented Mar 25, 2022 at 18:19
- what does your tsconfig look like? and what does your tsc output actually look like? I typically use a bundler but just ran a tsc on a library i've written to see what it would look like... and it looks exactly like your sample js code. – bryan60 Commented Mar 25, 2022 at 18:30
1 Answer
Reset to default 6when running tsc on the theoretical code / files in your question, it generates the desired output which works fine in the browser, so long as you set the target in your tsconfig.json to es6 or higher, since the features you're trying to use were introduced in es6:
"target": "es6",
the only trick of it though is that in your ts file you need to include the .js extension you're expecting to be generated in your import, or you need to include no extension and configure your web server to be able to figure out what the browser is asking for when it requests the file with no extension.