Typescript Support for Visual Studio 2017

I see your question is for VS 2017 and I don't find any documentation on VS 2017 to confirm if it has been added back. However, I did find that this was removed in VS 2015. See this link on Github

The TS preview pane has been removed from Web Essentials 2015 due to continuously running into conflicts with the TS compiler when new versions come out. The TS team are aware of it and I hope they will add the feature into the TS tooling in the future. It is possible that this feature will be included in the brand new Web Compiler extensions (https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c) when preview panes have been implemented.


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:

Nested TypeScript

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).