Dealing with Dual TypeScript installs - windows

I'm trying to do some TypeScript tutorials but I'm hitting a weird problem. A while back I installed TypeScript 1.0.3.0 through Visual Studio here:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
On the command line, when I check the TypeScript version it references that. I wanted to do some Angular (Angular version 2/4) so I loaded Node Package Manager and installed TypeScript through NPM. NPM loaded a newer version of TypeScript in another place on my computer. When I create Angular projects using Angular's CLI tool it somehow uses the NPM install. When I want to do simple, bare-bones TypeScript tutorials it uses the older version 1.0.3.0.
I lost my MSDN license so I can't run Visual Studio anymore. How do I update TypeScript that is in the Microsoft SDKs folder? Every Web site I check on installing or updating TypeScript tells me to use NPM.

If you don't plan to use it uninstall it, if you check Window uninstall software console panel page, you should find an item relating to that install.
If it's not there the simplest way would be to remove the old Typescript folder from your path variable (see here how to edit if you are not familiar). Look for the C:\Program Files (x86)\Microsoft SDKs\TypeScript folder and just remove it.
Then install the latest Typescript from npm.

Related

Typescript version conflict in Visual Studio Code

I have an Angular2 project created with the angular-cli project templates in Visual Studio Code. Also, I installed the latest version of Typescript (2.0.3) via npm as well as via the Microsoft link (https://www.microsoft.com/en-us/download/details.aspx?id=48593) because I also use Visual Studio 2015. However, for some reason the I still get an error message when I start my Angular2 project. Note that even with a standard command prompt running tsc -v will still return 1.0.0.0.
How does tsc -v determine the version of typescript?
How do I get rid of this message in my Angular project and ensure
it will be using the latest version of Typescript?
What am I missing here? Appreciate your help.
If you only need the last version of TypeScript, on both Visual Studios, then you can
delete all previous installations which are located in: C:\Program Files (x86)\Microsoft SDKs\TypeScript.
reinstall the latest TypeScript version.
Hopefully everything will work.
Did you install TypeScript via NPM? If this is the case, try uninstalling it via npm uninstall -g typescript. Now reinstall it via npm install -g typescript and check if the problem is solved.
The best way is to allow VScode to only use the version of typescript installed locally.
Drop this in your .vscode/.settings file.
"typescript.tsdk": "./node_modules/typescript/lib"

What else npm can be used in Visual Studio 2015 besides of installing bower?

Context:
I am configuring my ASP.NET 4.x project to use bower to manage client side packages, using VS 2015 Update 2. (I am following this stackoverflow guide/answer
All cool. However after created bower.json, and seeing output I've noticed the following output line:
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd" install --force-latest
This means that VS does not even use the npm installed bower (which is under the
/node_modules/bower) instead launching some globally installed (it was not me) bower.
Question:
What else npm can be used in Visual Studio 2015 ASP.NET project especially besides of installing bower?
In case of the answer is nothing, Question 2:
Can I just eliminate npm (package.json), and rely my bower.json in the Visual Studio project (and delete /node_modules)
The whole scenario also begs for the Question+:
Where should I configure Visual Studio to use the npm installed bower instead of the existing "global" installation in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd
npm can also be used to install packages for Gulp or Grunt tasks, which can then be run by the Task Runner Explorer in VS 2015.
You can configure Visual Studio to use a different version of Bower in Tools->Options->Projects and Solutions->External Web Tools. Move $(PATH) to the top of the list to use a globally installed version, or add a new project-relative path to the top of the list.

Open solution that contains long file paths

After building Bootstrap v4-alpha with npm, Visual Studio can no longer open my project, because the file paths are too long. It just hangs.
Bower installs bootstrap here:
C:\Users\BigFont\Documents\GitHub\2015-113MH\webapp\src\webapp\wwwroot\lib\bootstrap
That's fine. The problem arises after building bootstrap with npm. After deleting the bootstrap directory, Visual Studio can open the project, but I do not want to delete the directory.
How can we use Visual Studio with long path names?
Edit
My current workaround is to use Visual Studio Code, because it can handle long file paths.
I have resorted to creating folders at the root of my C:\ drive. I also use 7zip to delete folders to get around the 'file path too long' errors. You can open 7zip, click on the folder you want to delete and hit the Shift+Del keys.
NPM 2.0 creates nested folders that are very deep. Consider upgrading to NPM 3.0 as this fixes this problem and tries to create a folder structure that is as flat as possible.
If you are using Visual Studio 2015 RTM, it comes with NPM 2.0. NPM 3.0 will not be released with VS until the next update. You can still install NPM 3.0 but it is a little more involved. See this blog post for a step by step guide to install.

How to use Bower (installed from nuget) in Visual Studio?

I am trying to use bower inside Visual Studio 2013.
First I installed bower (not bower.js) via nuget's Package Manager Console.
Then I thought I could simply type
PM> bower init
inside the PMC to generate the bower.json.
But then it gave me this error.
bower : The term 'bower' is not recognized...
PS. The path of the PM> is pointing to C:\MyWebProject\MyWebProject\.bin.
What am I missing here??
Open the command prompt
Navigate to web project folder
Run bower init
You should have bower.json created by answering all answers on the cmd prompt.
Srinivas accurately described the steps needed to get you started with a bower.json in your root folder, which is where you want to start. You now have two main tasks:
Define dependencies - use Package Intellisense.
Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
Reference dependencies - simply add them to you project (as links).
For more information see Introducing Gulp, Grunt, Bower, and npm support for Visual Studio.
Note that Visual Studio 2015 (currently in preview) has built-in, first-class support for all of the above: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower.

Where can I find the TypeScript version installed in Visual Studio?

Maybe it's obvious, but I checked everywhere (besides the right place) and googled it. Nothing.
If you only have TypeScript installed for Visual Studio then:
Start the Visual Studio Command Prompt
Type tsc -v and hit Enter
Visual Studio 2017 versions 15.3 and above bind the TypeScript version to individual projects, as this answer points out:
Right click on the project node in Solution Explorer
Click Properties
Go to the TypeScript Build tab
Two years after the question was asked, using Visual Studio Command Prompt still did not produce right answer for me. But the usual Help|About window seems working these days:
UPDATE (June 2017):
VS 2013 does NOT show this info. (Later note: VS 2017 Enterprise edition does not show this info either).
VS uses Microsoft Build Engine (MSBuild) to compile Typescript files. MSBuild can support several major releases of Typescript, but About window shows only the latest one.
Here is how to get to the bottom of it:
A. To check which versions of Typescript are installed with your Visual Studio/MSBuild, inspect contents of C:\Program Files (x86)\Microsoft SDKs\TypeScript folder. For example, I have versions 1.0, 1.8 and 2.2:
B. Check which version of Typescript is requested by your project. In *.csproj file, look for <TypeScriptToolsVersion> tag, or you can add it if it is missing, like this
<PropertyGroup>
...
<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
...
</PropertyGroup>
C. Finally, you can check, which version of Typescript is actually used by MSBuild. In TOOLS | Options | Projects and Solutions | Build and Run set MSBuild project output verbosity to Detailed:
Then build your project and inspect the output: you should see the reference to one of Typescript folders described in (A).
Based in the response of basarat, I give here a little more information how to run this in Visual Studio 2013.
Go to Windows Start button -> All Programs -> Visual Studio 2013 ->
Visual Studio Tools A windows is open with a list of tool.
Select Developer Command Prompt for VS2013
In the opened Console write: tsc -v
You get the version: See Image
[UPDATE]
If you update your Visual Studio to a new version of Typescript as 1.0.x you don't see the last version here. To see the last version:
Go to: C:\Program Files (x86)\Microsoft SDKs\TypeScript, there you see directories of type 0.9, 1.0 1.1
Enter the high number that you have (in this case 1.1)
Copy the directory and run in CMD the command tsc -v, you get the
version.
NOTE: Typescript 1.3 install in directory 1.1, for that it is important to run the command to know the last version that you have installed.
NOTE: It is possible that you have installed a version 1.3 and your code use 1.0.3. To avoid this if you have your Typescript in a separate(s) project(s) unload the project and see if the Typescript tag:
<TypeScriptToolsVersion>1.1</TypeScriptToolsVersion>
is set to 1.1.
[UPDATE 2]
TypeScript version 1.4, 1.5 .. 1.7 install in 1.4, 1.5... 1.7 directories. they are not problem to found version. if you have typescript in separate project and you migrate from a previous typescript your project continue to use the old version. to solve this:
unload the project file and change the typescript version to 1.x at:
<TypeScriptToolsVersion>1.x</TypeScriptToolsVersion>
If you installed the typescript using the visual studio installer file, the path to the new typescript compiler should be automatically updated to point to 1.x directory. If you have problem, review that you environment variable Path include
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.x\
SUGGESTION TO MICROSOFT :-) Because Typescript run side by side with other version, maybe is good to have in the project properties have a combo box to select the typescript compiler (similar to select the net version)
The tsc -v command run technically reads the TypeScript compiler version within the SDK directory set within the Windows Path variable. This doesn't necessarily reflect the latest version installed as the Path variable is not updated with subsequent installations.
The version that VS.NET uses to compile the TypeScript is what's in the project's configuration:
<TypeScriptToolsVersion>1.5</TypeScriptToolsVersion>
To help explain this more in detail I created the following post which has the specifics on the TypeScript versions installed, and which version VS.NET uses to compile the TypeScript files.
Which Version of TypeScript is Installed and Which Version is Visual Studio Using?
I also added a feature request on Microsoft Connect to make viewing and switching the TypeScript targeted version in VS.NET easier. This isn't really a TypeScript feature request as much as it is a VS.NET IDE enhancement.
Allow switching TypeScript configured version from Project Properties IDE
The TypeScript team sorted this out in Visual Studio 2017 versions 15.3 and later, including the free Community edition.
How to See Which TypeScript Versions are Installed in Visual Studio
All you now need do is to go to project properties of any TypeScript Visual Studio project (right-click the project file in Solution Explorer/Properties), then go to the TypeScript Build tab on the left-hand side. This has a 'Typescript version' dropdown that shows you the version the project is using, and if you open it the dropdown shows you ALL versions of TypeScript currently installed in Visual Studio.
The actual installs are currently at C:\Program Files (x86)\Microsoft SDKs\TypeScript and then subfolders by version number, at least on Win10 on my computer. If you want to see the exact version (e.g. 2.8.3 rather than just 2.8) you can find the appropriate tsc.exe in here and look at its properties (Details tab in right-click/Properties in File Explorer).
How to Install Specific TypeScript Version
If you want to install a specific version of TypeScript then these can be found on Visual Studio Marketplace, although specific version numbers can be a little difficult to find in that list. A Google search for, for example, 'visual studio marketplace typescript 3.3.1' will usually find the exact version you want. If you install from here and restart Visual Studio the version will appear in the dropdown. Note also that some of the latest versions of TypeScript (e.g. 4.2) will refuse to install if there's a more recent version installed.
Node.js Console Applications
This answer does not apply to the 'Node.js Console Application' project type, which doesn't have a TypeScript Build tab in project properties. This is because it uses a version of TypeScript installed in the project folder using npm. The version can be seen and changed in the package.json file, and when installed appears under the npm entry in Solution Explorer, and in the node_modules/typescript folder on disk.
On Visual Studio 2015 just go to: help/about Microsoft Visual Studio
Then you will see something like this:
Microsoft Visual Studio Enterprise 2015
Version 14.0.24720.00 Update 1
Microsoft .NET Framework
Version 4.6.01055
...
TypeScript 1.7.6.0
TypeScript for Microsoft Visual Studio
....
You can run it in NuGet Package Manager Console in Visual Studio 2013.
As far as I understand VS has nothing to do with TS installed by NPM.
(You may notice after you install TS using NPM, there is no tsc.exe file).
VS targets only tsc.exe installed by TS for VS extension, which installes TS to c:\Program Files (x86)\Microsoft SDKs\TypeScript\X.Y.
You may have multiple folders under c:\Program Files (x86)\Microsoft SDKs\TypeScript.
Set TypeScriptToolsVersion to the highest version installed.
In my case I had folders "1.0", "1.7", "1.8", so I set TypeScriptToolsVersion = 1.8, and if you run tsc - v inside that folder you will get 1.8.3 or something, however, when u run tsc outside that folder, it will use PATH variable pointing to TS version installed by NPM, which is in my case 1.8.10.
I believe TS for VS will always be a little behind the latest version of TS you install using NPM. But as far as I understand, VS doesnt know anything about TS installed by NPM, it only targets whateve versions installed by TS for VS extensions, and the version specified in TypeScriptToolsVersion in your project file.
I have VS2015 and I have to run a build with TypeScript 1.7, although I have 1.8 installed via npm install typescript -g there are two ways (at least for me they worked):
Go to your .proj file and add <TypeScriptToolsVersion>1.7</TypeScriptToolsVersion> as up as possible. Rebuild, re-run. If it doesn't work try 2.
Go to Control Panel -> System -> Advanced System Settings -> Enviroment Variables. Make sure you add your desired TypeScript version first: C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.7;C:\Users\serban\AppData\Roaming\npm
This will also affect your CLI:
$ tsc -v
message TS6029: Version 1.7.5
First, make sure you have the following address in your Environment Variables Path
C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0
Then open your Command Prompt and type the following command:
tsc -v
You can do npm list | grep typescript if it's installed through npm.
Open a (normal, not the VS) command prompt or a PowerShell prompt.
tsc.exe -v
tsc.cmd -v
tsc -v
If you installed the same version of TypeScript for Visual Studio and using npm, the output from the above three commands should be the same.
If not, check your System PATH to see where in the path hierarchy and which typescript directory is listed. For PowerShell users, the easy way is:
$env:path -split ';'
Be careful of having nothing or multiple TypeScript directories listed in your System PATH variable. As of June 9, 2017, my System PATH looked like this (just the top part, which is all that matters in this situation):
ps>$env:path -split ';'
C:\Windows\system32
C:\Windows
C:\Windows\System32\Wbem
C:\Windows\System32\WindowsPowerShell\v1.0\
C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.3
C:\nodejs\
C:\Users\{username}\AppData\Roaming\npm
Notice that only the 2.3 directory is included in the PATH, not multiple versions.
In the command prompt, simply type 1 of the following command then hit Enter :
tsc -v
or
tsc -version
or
tsc --version
Note: Make sure you have added Typescript to environment variable path
before running command, details here: How to set environment
variable.
For a non-commandline approach, you can open the Extensions & Updates window (Tools->Extensions and Updates) and search for the Typescript for Microsoft Visual Studio extension under Installed
If you'd like to find out what version of Typescript is being used on a particular project, go to your package-lock.json file. You will find something like this:
"typescript": {
"version": "3.5.3"
}
As of Visual Studio 2022, there is a new TypeScript/JavaScript project type for Angular/React/Vue, the TypeScript SDK is deprecated (but still installable through the VS installer with warnings), and Visual Studio supposedly provides IntelliSense and language support based on the TypeScript version you're using for your project (npm is the preferred way to specify the version of TypeScript you're using, via your package.json file).
Per this answer, though, there are still questions about how to control/discern what specific TypeScript language version Visual Studio 2022 is supporting at any given moment.

Resources