Visual Studio 2017的Typescript支持

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

Answer 2

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.

Answer 3

I have a work around, it is a bit of work but helps with the odd occasions when I want to check the output.

I am running vs2017 I have web essentials installed and web compiler, but it still doesn't appear to support ts as of 15.4 and I couldn't get the tsconfig.json to work.

Briefly show the hidden files in your project and select the corresponding js file, then drag the tab to the right so you have a split screen

When you change and save the ts file, you might get a popup saying "The file has changed" or something like that, there is a check box you can select on there which says "AutoRestore if no changes detected" (again I might be paraphrasing, I attempted to find the option so I could reset it to get a screenshot but I cannot find it!), check that and then select "Yes to All" this refreshes the js file. The next time you change your ts file the js file will update.

I know it isn't great, but I found it very useful as I could get an analog of what you see when following the course and they keep showing the preview of the javascript.

Answer 4

In Visual Studio 2017, you need to install the "Node.js development" Workload during the installation process or modify your existing install in the New Project dialog by clicking the "Not finding what you're looking for? Open Visual Studio Installer" link.

Then File > New > Project... will include Javascript and Typescript project templates under the Installed category.

Answer 5

I have installed web essentials 2017, but not sure if that is mandatory. The question is how to open two files side by side in VS 2017; specifically a typescript and its corresponding js file.

You can open any two files side by side the steps for which are as follows.

First open the two files in question by double clicking them from Solution Explorer.

Next, place your cursor on the highlighted red box show above and drag that Car.js file tab down.

Now you see five small squares, highlighted with red square box. Move your cursor on any of the 4 outer small squares. I am placing my cursor on the right one as shown below.

There you go.

I guess this works without web essentials and is a feature of vs. Let me know if you could do this without having web essentials installed.