Typescript Support for Visual Studio 2017

Question

I have recently been trying to learn TypeScript, and in some of the videos I have been watching after installing the 'Web Essentials' extension when working with a .ts file visual studio gives you a pre-view panel so you can see the JavaScript as you type.

These videos seem to be using VS 2012.

However installing Web Essentials on VS 2017 doesn't seem to have this option, does anyone know how I can get this to work in VS 2017? Does it have the same support for TypeScript?

Answer 1

So TypeScript is installed by default with VS2017 (Update 2 will give you the latest version of 2.3 and allow side by side installs). If you don't have it you can add it via the Visual Studio Installer - from the installer click the burger menu and choose Modify, then click Individual Components and under SDKs, Libraries and Frameworks you can add TypeScript.

Once installed you can add a tsconfig.json file to tell the TypeScript compiler how to behave, example here:

{     "compileOnSave": true,     "compilerOptions":     {         "noImplicitAny": false,         "noEmitOnError": true,         "removeComments": false,         "sourceMap": true,         "target": "es5"     },     "exclude":     [         "node_modules"     ] } 

The important setting is compileOnSave which tells VS to compile the js file when you save the ts.

You should now see you have a nested Javascript file within your TypeScript file:

Now you just need to open both files side by side and when you save the ts then js will automatically update (it helps to tick the always update option if VS prompts you to load the changed file on disk).