Recently, I decided to dive into exploring Astro for a couple of upcoming projects. In my research, I delved into the script and typescript sections of the documentation (), as well as (). However, I found the workflow somewhat counterintuitive and struggled with incorporating typescript into my project.
I have a basic typescript file that functions properly outside of Astro (after transpilation) by placing it in public/scripts/index.ts. The file features a class with a constructor that gets invoked, and the resulting object is logged to the console. For reference, here's my constructor:
constructor(test: string) {}
In index.astro, I included the following in the head section:
<script is:inline src="/scripts/index.ts"></script>
Additionally, I tried using index.js to trigger transpilation to JS. Unfortunately, when running the dev script, I encountered an error pointing to my constructor:
Unexpected token ':'
Upon inspecting, I noticed that the typescript file reference remained unchanged despite my attempts to force a conversion to JS. Running the build script simply resulted in copying the file, rather than transpiling and bundling it as I had hoped. While aware that editing tsconfig could potentially resolve this issue, I hesitated due to concerns about potential conflicts with Astro's internal use of typescript.
Given that storing scripts in the public folder should ideally enable Astro to handle necessary transformations for executable files, can anyone provide guidance on properly executing my typescript or suggest best practices for compiling it to JS and bundling it accordingly?