0

In an Angular style app, I would expect the typescript files to be bundled together and basically all loaded at start up of the app. In an MVC type app (a view per page, not a SPA), I would expect to only load typescript for that page. I don't want to load typescript that is not relevant for that page.

I split my typescript into separate files (basically one class per file). I then set up import/export clauses in the files to reference the classes. I think this approach will work better when I go to use external libraries (jquery, etc). If I use namespace, later on when I go to use third party libraries I don't think it will work.

However, that means I need to look at some sort of loader. If I have lots of little typescript files I don't necessarily know when all files have loaded before attempting to use them, which is the sort of thing that requirejs looks after. I haven't used web pack but I think it does the same sort of thing?

But that would mean I would need a requirejs config for each MVC page which doesn't seem to be very efficient. What approach should I be taking to load all the typescript files I require for the specific MVC page, bearing in mind I could end up with dozens of MVC pages?

Jeff - Software Results
  • 762
  • 7
  • 25
  • Use "Sections" like described here: http://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with – Dawid Rutkowski Oct 21 '16 at 07:39
  • Thanks. I am using sections to breakup my code already now but that doesn't with this particular issue. – Jeff - Software Results Oct 21 '16 at 08:04
  • So maybe customize bundling process to have separate bundles for pages? – Dawid Rutkowski Oct 21 '16 at 08:19
  • Two issues: 1) that could end up a lot of work doing that for every one of dozens of pages. It possibly can't be avoided. 2) the typescript module loading is still an issues. Surely this isn't an unusual pattern? It's a case of how to efficiently replace JavaScript with typescript on typical mvc views. – Jeff - Software Results Oct 21 '16 at 08:28

1 Answers1

0

There is now (2021) a partial solution to this question. I'm not sure it is "efficient" but it does load multiple Typescript files on different MVC pages.

If you alter your typescript config to output ES6 modules, tsc will create one JS file fore each TS file, each in an ES6 module. If you then use a module script tag, the browser will import the files as needed

<script src="scripts/modules/start.js" type="module"></script>

<!-- and/or -->

<script type="module">
import { loadStats } from 'pages/homepage.js'

<!-- note that this is JavaScript -->
loadStats();
<script>

This does require users to be using a modern browser: https://caniuse.com/es6-module

This is not a panacea - there are lots of gottchas and work arounds, one big one being that import statements must be in JavaScript Module style, not TS style

import { loadStats } from 'pages/homepage'    // <-- Will not work at runtime
import { loadStats } from 'pages/homepage.js' // <-- Use this style.  Note the JS extension

as tsc does not correctly convert import statements. This should point at the TS file (as the created JS files will have the same relative path), Visual Studio appears to be able to cope for the purposes of intellisence and compiling.

We managed to get npm to work for typings, but struggled for other packages. We have, though, been able to retro-fit typescript into an older MVC app this way (we wanted/needed type checking for API calls).

Jonathan Twite
  • 932
  • 10
  • 24
  • Hi Johnathon, I've moved on from the project where this question was originally raised so I am not in a position to determine whether your comment would work as the answer but I suspect that it would. I won't mark it as the answer since I can't confirm it but I think its a valuable comment for anyone else who stumbles upon this question. – Jeff - Software Results May 24 '21 at 21:45