2

I am adding a typescript project to a VS2015 MVC 5 project (that makes it ASP.NET 4, not asp.net 5 or asp.net 6 code: only the MVC is version 5). This is the sole target for all aspects of my question, I cannot use generalized or theoretical guidance on typescript, node.js, module loaders, etc.

The problem is simpler with ASP.NET Core. But that's not what I'm facing. All the usual sources of examples and guidance avoid or provide scraps when it comes to ASP.NET 4 MVC 5 because it is hard. And no one will state exactly how hard or what precisely are the obstacles.

Worst, Typescript documentation is like Open Source Documentation: you can only get one issue, one step deep. This produces a research workflow consisting of endless-issue-tree-recursion.

I understand opinions, I even have one. But I'm looking for the experiential answer, what is the one combination that has proven to work for a production team.

So here are the specific items that need to be addressed and made to work within the confines of a working, medium-sized ASP.NET 4 MVC 5 LOB app:

  1. Visual Studio's version of typescript. This is an installation issue (using node most simply) and the Tools/options - typescript settings have to match.

  2. Browser-style testing (typically manual TDD workflow) or node.js testing (automated). This has to be chosen up-frontly to prevent more issue-tree-recursion. We are going with browser-based... phantomjs using WallabyJs.

  3. NPM @types/library-name: supposed to fill a node_modules folder with both library-name and library-name.d.ts based only on a package.json with @Types references. But actually requires the package.json to hold a reference for both the @types/library-name and the library-name to work in my VS 2015 ENT v3 and asp.net 4 mvc 5 project. And all the versions specified then require manual correction' and even then the version look-up process is a little suspicious. This @types process may not be the way to go with ASP.NET 4 MVC 5, but I can't tell what the correction alternative might be. @Types is currently the only recommended option for typescript.

  4. Which version of ECMAScript: es6 is apparently too far ahead. es2015 is likely, but this (maybe) appears to have relationships to several of the other issues. Supposedly, these designations are the same, but there are two places they can be set. I've chosen es2015 in tools/options/typescript. But getting any of these (now 3) settings wrong could be a problem.

  5. Module system: CommonJs is for node and automated testing, and VS development testing is automated only for server-side, and VS UI tests are a manual process. So AMD, require JS is probably an option for VS, but it adds its own workflow and maintenance and considerations that are really hard to get right in ASP.NET. Using ASP.NET bundling and triple-slash references (dependable) might work, but after you have put the libraries in node-modules, you would want to use the full path into node-modules in the file name slug in an import statement. This is all very clumsy and involves the most guesswork. But solving this whole item might be the 'key' for the overall question.

There are probably a lot of other, smaller issues. But someone who has done this will have solved all the mentioned items and the others as well.

What I'm looking for is all the settings across all these issues in detail based on a working Typescript app in ASP.NET 4 MVC 5 implementation for browser-based unit/behavior tests in VS 2015. Those who have done it will understand.

Thanks very much for your consideration.

4
  • Please note, @aluan-haddad's answer is an excellent backgrounder in typescript and the decision tree for considerations across these issues. However, based on his answer I edited my question to make it clearer that I'm looking only for down-n-dirty guidance from the trenches on a complete typescript solution for ASP.NET 4 MVC 5, including browser-based unit/behavior testing of the typescript code. Feb 20, 2017 at 19:39
  • While I appreciate that you clarified your question I will just say that you will never find a TypeScript testing solution that is not also a JavaScript testing solution. Feb 21, 2017 at 7:10
  • 1
    Aluan, please recall that I said this, "But I'm looking for the experiential answer, what is the one combination that has proven to work for a production team." I believe everything I'm facing is a configuration issue. All configuration issues have to do with incorrect understanding of the purpose of the specific configurations, or the unavailability of an explanation of the overall purpose of the configuration combinations. Feb 23, 2017 at 6:42
  • I follow you. Perhaps I misunderstood the purpose of your question. Since you're question speaks to the stage of a project where one is choosing tools like module loaders and transpilers it did not occur to me that you might have a complex existing setup in which you're strongly invested. Feb 24, 2017 at 1:25

1 Answer 1

4

What you're missing is separation of concerns, in spite of the initial benefit of such starter templates, they start to cause incidental dependencies and complicate the mental model. It's much easier to have your front end in a separate project.

Regardless:

Visual Studio's version of typescript.

Always use the very latest available. This controls the version of TypeScript which powers the IDE. You will probably end up compiling in a separate process or in the browser during development. Again you will want to use the latest but it will likely be installed with a different package manager.

Browser-style testing (typically manual TDD workflow) or node.js testing (automated). This has to be chosen up-frontly to prevent more issue-tree-recursion.

Firstly, I definitely agree with the importance of choosing up front but, if it is still possible, just unpleasant, to add tests to an existing project.

TDD workflows involve automated testing as they rely on rapid feedback. This is orthogonal to whether you run your tests in the browser or using NodeJS.

You should use whichever approach makes the most sense for your application and that may be a mix of both.

Since you are writing a frontend JavaScript application you will likely want to run some tests in the browser. However, as Uncle Bob (Robert C. Martin) has stated, views should be dumb and require little testing. My interpretation of this is that we should not spend too much time testing things like Angular or React components to ensure that they render correctly, and instead focus on testing behavioral elements of the system such as services and plain old functions.

That said, you may well want to run tests of your client side services against an actual browser runtime, as opposed to just Node.js, and that is reasonable.

There are a number of testing libraries to help you with this. I do not have a specific recommendation besides to say that you should find a reliable test runner, and a simple assertion library. Tried and true testing libraries like QUnit and Tape are examples of solid options.

One last note, it is important that one not confuse the concept of integration testing with running tests in a web browser, it's perfectly valid to run TDD style tests, which implies unit tests, in a web browser.

NPM @types/library-name: supposed to fill a node_modules folder with both library-name and library-name.d.ts, but requires the package.json to hold a reference for both the @types/library-name and the library-name to work in my VS 2015 ENT v3 and asp.net 4 mvc 5 project.

Simply put this goes to back to decoupling your front end from your back end. Visual Studio and certainly ASP.NET have nothing to do with versioning your types packages.

  1. If a package comes with its own type declarations then you don't need to install an auxiliary types package otherwise you do.

  2. Either way install JavaScript and TypeScript dependencies using a JavaScript oriented package manager (such as NPM, JSPM, or Yarn).

  3. Do not use NuGet for these!

  4. As you suggest there are versioning issues, it's currently a difficult problem in TypeScript. However once again it has nothing to do with ASP.NET or Visual Studio.

Which version of ECMAScript: es6 is apparently too far ahead. es2015 is likely, but this appears to have (maybe) relationships to several of the other issues.

ES6 is the same as ES2015, the latter being the name under which the former was ultimately released. ECMAScript now follows a yearly cadence, roughly, with ES2017 just around the corner.

The nice thing about having a transpiler, such as TypeScript, is that you can use the latest features from es2017 and still target es5 for emit and you'll be fine.

Module system: CommonJS is for NodeJS and automated testing, and VS development testing is automated only for server-side, and VS UI tests are a manual process. So AMD/UMD require JS is probably the option for VS, but it adds its own workflow and maintenance and considerations. Using triple-slash references (dependable) might work, but after you have put your/their libraries in node-modules you would want to use the full path into node-modules in the file name slug in an import statement. (solving this whole item might be the 'key' for the overall question).

This is a very complex subject and probably the only one of your questions that you really need to spend a lot of time considering. As I said earlier using NodeJS or not is orthogonal to automated testing. But if you're targeting NodeJS natively with your test code then you will need to use CommonJS output.

For the actual application code, the choice has nothing at all remotely to do with whether or not you are using Visual Studio, I'm sorry for reiterating this but it really is important that you separate these ideas.

The question of which module format to use for your front end application code is a very important and contentious one.

  1. Triple /// references are not a module format but rather a way of declaring the dependencies between global variables that are declared and referenced across multiple files.

    They do not scale well, working acceptably when you have only a handful of files.

    Triple /// references should not be used. They are not a modularity mechanism and their use is completely different from using any of the module systems/module formats you mention, including CommonJS.

    Never combine them with a module system, which is what you would have to do in order to run your tests under NodeJS or load your app with RequireJS or anything else.

  2. RequireJS is an excellent option which would imply AMD modules as you say. RequireJS does not require any use of triple slash references. In fact they should be avoided as the plague when using this format or any other module format!

    I recommend strongly against using UMD modules. Isomorphic JavaScript is a problematic idea, and it offers you no benefits since you are creating a browser application with a .NET backend.

  3. Many developers actually do use CommonJS modules in a browser. This requires bundling them continuously, using tools such as Webpack. This approach has advantages and disadvantages. The primary advantages are the ability to lean on existing NodeJS JavaScript server-side tools, such as npm, by way of Webpack or Browserify. This may not sound like a big advantage but the amount of rich tooling available for CommonJS modules is nothing to scoff at, making it a strong option.

  4. Consider using the System module format and the SystemJS loader via jspm to both manage your packages and to load your code. With this approach, you gain the advantages of RequireJS, are able to run your tests under NodeJS and the browser using jspm run without needing to switch targets formats or bundle your code just to test it. There's also no need to bundle your code during development, although this is supported. More importantly, you gain the advantage of writing future compatible code, as it offers the only module format and loader which correctly models the semantics that ES Modules will eventually have when implemented natively in browsers. JSPM has first class support for TypeScript, Babel, and Traceur. For posterity here is the description of the System module format taken from the link above:

    System.register can be considered as a new module format designed to support the exact semantics of ES6 modules within ES5. It is a format that was developed out of collaboration and is supported as a module output in Traceur (as instantiate), Babel and TypeScript (as system). All dynamic binding and circular reference behaviors supported by ES6 modules are supported by this format. In this way it acts as a safe and comprehensive target format for the polyfill path into ES6 modules.

Disclaimer: I am a member of the JSPM GitHub organization, playing a role in maintaining the registry and have made very minor contributions to the jspm cli.

6
  • this is indeed an amazing answer! However, I have focused specifically on typescript integration with ASP.NET 4 and MVC 5 in a Visual Studio project, which I have been unable to get working. Your considerations are generalized. It is possible to get all the things I need in a node.js or browser-based app in webstorm, or ASP.NET Core, but I can find no working guidance or complete guidance for ASP.NET 4 MVC 5. As I said, "someone who has done this will have solved all the mentioned items and the others as well." That's the information I'm looking for. Feb 20, 2017 at 18:37
  • Interesting I would say that TypeScript is one of the better documented projects out there. Visual Studio has had built-in support for a long time now. You can get the latest version of the language service plugin from the typescriptlang.org where it is prominently featured. The key point is that where TypeScript integration concerned, you have essentially the same set of option did you do with JavaScript integration, roughly no more and no less. The key takeaway is that there are no typescript specific integrations for platforms like asp.net because well... It's just JavaScript. Feb 21, 2017 at 0:38
  • 1
    Aluan, only the Typescript site is dependable and its skimpy. I've done all the pluralsighting, and read all the books and gitbooks. Clambering through posts is like trying to find a left-handed driver at a swap-meet. The only way it could be survivable is if you work in a small area of the engo-sphere. For me, Research is the primary foundation of a possible resolution. I've given up typescript in VS six times in two years. The TS git blogs are fragmentary and context-less. Things fixed one month reappear when another library's team 'advances'. Its really the lack of comprehensibility. Feb 21, 2017 at 6:12
  • So I've got one thing going finally: I removed bluebird and es6.Promise throws no errors at present. Now I'm getting a build error in the VsTsc action in the CompileTypeScriptWithTSConfig target of msbuild for vs. the error is 'Failed to create URI from' on every js and js.map to be output from the ts files. and the js and map files are missing. Sound at all familiar? thanks, Feb 21, 2017 at 6:22
  • 1
    Aluan, if you have a substantial working Typescript project in a Visual Studio ASP.NET 4 MVC 5 LOB app, not using ASP.NET Core, not running on Node.JS, but using MVC Controllers, and Razor View views, with Models, ViewModels, EF7, and the rest of the ASP.NET 4 MVC 5 stack, then I would PAY MONEY to get a copy of your typescript settings. I would PAY MORE MONEY to get a copy of your ASP.NET 4 MVC 5 solution folder including the project file and all content except your Controllers folder, API folder Views folder, Models folder and ViewModels folder. Just delete those folders and name your price. Feb 23, 2017 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.