29

I'm wondering is there any way to use TypeScript on Razor cshtml files?

For example, something like this

<script language="text/typescript">
/// typescript goes here
</script>
Tom Kris
  • 1,227
  • 1
  • 8
  • 15

5 Answers5

19

It's possible. I have developed TypeScript Compile - an automatic compiler of TypeScript to JavaScript on the fly. Have a try!

niutech
  • 28,923
  • 15
  • 96
  • 106
  • I took a look at it, and while I do enjoy it for developing, I would like to have some way of compiling the blocks to javascript for the release application. – Manuel Schweigert Oct 04 '12 at 23:53
  • @manuFS: Thanks, but TypeScript Compile does compile the blocks to javascript and it even does it on the fly. Did you mean hiding the source TS files and compiling off-line? – niutech Oct 05 '12 at 01:57
  • I mean a compile-time compilation of typescript blocks to js blocks. – Manuel Schweigert Oct 05 '12 at 16:38
  • @manuFS and @niutech - that's a good solution, but it shouldn't be client side. Ideally we could support something like ` – Keith Oct 17 '12 at 10:35
17

TypeScript isn't a runtime; it's cross-compiled into JavaScript. As a result, you'll need to write your TypeScript, compile it, and then either include it within JavaScript script tags or as an external file.

Rob
  • 3,276
  • 2
  • 22
  • 25
  • 10
    That it encourages the use of external script files I am calling a feature. – Matthew Nichols Oct 02 '12 at 18:38
  • 7
    Why are you calling using of external files a feature? As for me it is more comfortable to store scripts directly on a page they will run. – Tom Kris Oct 02 '12 at 19:36
  • 1
    @ArtyomKrivokrisenko Although that is fine, for larger applications, it is a good idea to store your javascript in separate files. Not only does this provide complete separation of your javascript and html markup, but it allows you to create better versioning of your files along with the ability to minify your javascript files. – Tim B James Oct 02 '12 at 21:15
  • 1
    @MatthewNichols I disagree - with older browsers (some of us still have to support IE6) only two HTTP resources are retrieved at a time and many corporate networks have pings over 200ms. It's not _always_ best practice to have all your script in external files - sometimes page specific stuff is quicker inline (at least for the poor guys on lame corporate Win 2000 machines). – Keith Oct 17 '12 at 10:28
  • @Keith That is interesting and I acknowledge I do not know the intricacies of IE6 anymore. But wouldn't caching of the javascript files more than make up for that after the first request? And that caching can't happen if the js is embedded in the page, nor can you easily minify the code if it is embedded in the page. Please correct me if I am mistaken. – Matthew Nichols Oct 17 '12 at 17:49
  • @MatthewNichols not if your app is over SSL - then anything cached only lasts as long as the last SSL session. Also lots of corporate stuff is infrequent use (purchase orders/holidays/annual or quarterly processes) and can't use a CDN. Basically if you have IE6/7 users and SSL then you create a single library JS (all your JS files stitched together and minified) but anything that's only used on a single page is probably better inline. – Keith Oct 17 '12 at 22:54
  • @MatthewNichols isn't that really on a case-by-case evaluation, if you take Google, they embed allot of JavaScript into the main page. But they can properly cache both the HTML and JavaScript all together as that page rarely changes, writing a pure JavaScript based page (single page app) that gets data by AJAX request, could benefit from stitching html, css and javascript together into one blob. That would have to be through a process of compiling or the server doing it though, developing that way would be horific. – Jens Mar 22 '13 at 09:06
  • Yes I agree...there are cases where it is appropriate as an end product of a build process, but as you say developing that would be very sad. – Matthew Nichols Mar 22 '13 at 15:36
  • 7
    You don't say, Einstein. Why has this non-answer 14 upvotes? And why on earth is it accepted? Isn't the question whether there's a way to get the tooling to *compile* typescript in razor files!? – John Nov 21 '14 at 10:09
  • Also sometimes we want to include @model stuff in the javascript. AFAIK that has to be done in the cshtml Razor file – erict Jan 14 '19 at 21:15
5

Let me add to Robs answer that it's technically possible to embed the typescript compiler in a page download, and have the browser compile code written in <script language="text/typescript"> tags.

Performance however, would be suboptimal and precompilation on the server would be preferred. Technically, there's nothing preventing a preprocessor from doing this either (T4 could do it).

Michael Sondergaard
  • 1,464
  • 10
  • 25
5

I just checked with my favorite VS Extension: Web Essentials

They already included .ts file compilation on saving (it is recommended to also use the original plugin for Intellisense).

This obviously only works for .ts files, though. In my opinion, once you reach the complexity to choose typescript over javascript, you should use it in a separate file, anyways.

Manuel Schweigert
  • 4,884
  • 4
  • 20
  • 32
  • 1
    no longer available in VS2015 version - MS is moving away from including these types of features in Web Essentials while preferring task runners like grunt and gulp – Simon_Weaver May 28 '15 at 02:19
2

You could manually compile the TypeScript files using tsc.exe and then add the resulting Javascript to your project or use a tool, such as Web Essentials that compiles on save.

As the compiler can be compiled to Javascript, you can also let the user's browser do the compilation on the fly (at the cost of performance and file size, the compiler is fairly big). An example of this approach is niutech's solution.

If you are using Bundling and Minification, I have just released an implementation of IBundleTransform that compiles TypeScript to Javascript. It is on GitHub and NuGet (Install-Package TypeScriptBundleTransform). If you are not yet using Bundling and Minification, it is worth a look!

Wouter Devinck
  • 63
  • 3