Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How Can I Install TypeScript with Visual Studio 2010

This is a popular question that I will provide the answer for.

like image 324
Richard Collette Avatar asked Jan 24 '13 20:01

Richard Collette


People also ask

Can I use Visual Studio for TypeScript?

TypeScript supportBy default, Visual Studio 2022 provides language support for JavaScript and TypeScript files to power IntelliSense without any specific project configuration.

How do I install TypeScript?

You can use npm to install TypeScript globally, this means that you can use the tsc command anywhere in your terminal. To do this, run npm install -g typescript . This will install the latest version (currently 4.7).

What version of TypeScript is Visual Studio using?

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.


1 Answers

TypeScript Version 0.9.1.1

Typescript 0.9.5+ have a dependency on Microsoft.VisualStudio.Shell.11.0.dll. Therefore, these instructions will no longer be updated.

The following is provided for educational purposes. Please adhere to all licensing and redistribution requirements. For prior versions of TypeScript, please see the edit history for this answer.

  1. Close Visual Studio
  2. Intall the Wix Toolset
  3. Download TypeScript for Visual Studio 2012 version 0.9.1.1 and place the installer executable in its own temporary directory.
  4. Open a command window in the temporary directory.
  5. Execute the command "%wix%\bin\dark.exe" -x .\TypeScriptSetup TypeScriptSetup.0.9.1.1.exe
  6. Go to the directory .\TypeScriptSetup\AttachedContainer\packages\TypeScript_CORE
  7. Execute the following commands

    IF NOT DEFINED ProgramFiles(x86) SET ProgramFiles(x86)=%ProgramFiles% SET VSDir=%ProgramFiles(x86)%\Microsoft Visual Studio 10.0\Common7\IDE SET Devenv=%VSDir%\devenv.exe 

For Windows 7 Users

Execute the command:

TypeScript_CORE.msi /l* log.txt VS11_EXTENSIONS_DIR="%VSDir%\Extensions\Microsoft" VS11_NEWSCRIPTITEMS_DIR="%VSDir%\NewFileItems" VS11DEVENV="%Devenv%" VS11_TARGETSINSTALLFOLDER="%ProgramFiles(x86)%\MSBuild\Microsoft\VisualStudio\v10.0\TypeScript"

For Windows Vista Users

You will need to build a new installer using Wix

  1. Execute the command "%wix%\bin\dark.exe" -x .\TypeScript_CORE TypeScript_Core.msi
  2. Optionally copy TypeScript_CORE.wxs to TypeScript_CORE.wxs.bak (advisable)
  3. Edit TypeScript_CORE.wxs replacing the lines shown below. To avoid possible copyright issues and due to size limitations on StackOverflow, the entire updated file has not been posted. The best I can do is post a diff report. Numbers in the first column are line numbers for the original file. Numbers in the second column are the line numbers in the edited file. The line numbers in the edited file will be lower due to deleted lines.
 ------------------------------------------------------------------------ 3           <Product Id="{5A908D89-0620-4CC0-A8B8-2CB4A7B0772C}" Codepage="1252" Language="1033" Manufacturer="Microsoft Corporation" Name="TypeScript for Microsoft® Visual Studio® 2012" UpgradeCode="{F15B62A0-4478-4924-876A-867617EC4B8C}" Version="0.9.1.1"> 4               <Package Comments="This installer database contains the logic and data required to install TypeScript for Microsoft® Visual Studio® 2012." Compressed="yes" Description="TypeScript for Microsoft® Visual Studio® 2012" InstallerVersion="500" Languages="1033" Manufacturer="Microsoft Corporation" Platform="x86" />     3       <Product Id="{5A908D89-0620-4CC0-A8B8-2CB4A7B0772C}" Codepage="1252" Language="1033" Manufacturer="Microsoft Corporation" Name="TypeScript for Microsoft® Visual Studio® 2010" UpgradeCode="{F15B62A0-4478-4924-876A-867617EC4B8C}" Version="0.9.1.1">     4           <Package Comments="This installer database contains the logic and data required to install TypeScript for Microsoft® Visual Studio® 2010." Compressed="yes" Description="TypeScript for Microsoft® Visual Studio® 2010" InstallerVersion="405" Languages="1033" Manufacturer="Microsoft Corporation" Platform="x86" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 15(delete)              <CustomAction Id="VS11_CAUpdateConfig" Property="VS11DEVENV" ExeCommand="/updateConfiguration" Return="ignore" Execute="deferred" Impersonate="no" /> 16(delete)              <CustomAction Id="VWD11_CAUpdateConfig" Property="VWD11EXPRESS" ExeCommand="/updateConfiguration" Return="ignore" Execute="deferred" Impersonate="no" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 222                                 <Directory Id="MSBuild_Microsoft_VisualStudio_11" Name="v11.0">     220                             <Directory Id="MSBuild_Microsoft_VisualStudio_11" Name="v10.0"> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 293             <Feature Id="TypeScriptInstallation" Level="1" Title="TypeScript for Microsoft&® Visual Studio® 2012 Setup">     291         <Feature Id="TypeScriptInstallation" Level="1" Title="TypeScript for Microsoft&® Visual Studio® 2010 Setup"> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 427(delete)             <Property Id="WixPdbPath" Value="D:\nightly\release-0.9.1.1\srcSetup\wix\outs\x86ret\enu\cooked\TypeScript_CORE_net.wixpdb" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 663                 <ProgressText Action="CAIsVSRunning">Checking if Microsoft® Visual Studio® 2012 is running</ProgressText>     660             <ProgressText Action="CAIsVSRunning">Checking if Microsoft® Visual Studio® 2010 is running</ProgressText> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 712                     <Control Id="VSRunningStatus" Type="Text" X="25" Y="110" Width="320" Height="110" Text="Microsoft® Visual Studio® 2012 is running, It is recommended that you close it before proceeding [ProductName] Setup." TabSkip="yes" />     709                 <Control Id="VSRunningStatus" Type="Text" X="25" Y="110" Width="320" Height="110" Text="Microsoft® Visual Studio® 2010 is running, It is recommended that you close it before proceeding [ProductName] Setup." TabSkip="yes" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 739(delete)                     <Control Id="LaunchScreenAgreeLine" Type="Hyperlink" X="25" Y="138" Width="320" Height="14" Text="You must agree to the <a href="[EulaURLName]">License Terms</a> before you can install TypeScript" TabSkip="yes"> 740(delete)                         <Condition Action="hide">Installed</Condition> 741(delete)                     </Control> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 799                 <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="1" />     793             <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="2" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 803(delete)                 <Custom Action="VS11_CAUpdateConfig" Sequence="6598">VS11DEVENV</Custom> 804(delete)                 <Custom Action="VWD11_CAUpdateConfig" Sequence="6599">VWD11EXPRESS</Custom> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 830                 <InstallFinalize Sequence="6600" />     822             <InstallFinalize Sequence="6500" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 834                 <Custom Action="SystemFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="1" />     826             <Custom Action="SystemFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="2" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 860                 <Custom Action="SystemFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="3" />     852             <Custom Action="SystemFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="4" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 874                 <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="3" />     866             <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="4" /> ------------------------------------------------------------------------ ------------------------------------------------------------------------ 889                 <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="3" />     881             <Custom Action="WindowsFolder_x86_VC.F9D0B380_EB85_31D4_96AC_C6CB40086A55" Sequence="4" /> ------------------------------------------------------------------------ 
  1. Execute the command "%wix%\bin\candle.exe" TypeScript_CORE.wxs
  2. Execute the command "%wix%\bin\light.exe" -o TypescriptVista TypeScript_CORE.wixobj
  3. Execute the command TypeScriptVista.msi /l* log.txt VS11_EXTENSIONS_DIR="%VSDir%\Extensions\Microsoft" VS11_NEWSCRIPTITEMS_DIR="%VSDir%\NewFileItems" VS11DEVENV="%Devenv%"

Config File

Existing projects will need to have the following elements added to the bottom of the project file. Note the elements that have been added prior to the BeforeBuild element.

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">     <TypeScriptTarget>ES3</TypeScriptTarget>     <TypeScriptIncludeComments>true</TypeScriptIncludeComments>     <TypeScriptSourceMap>true</TypeScriptSourceMap>   </PropertyGroup>   <PropertyGroup Condition="'$(Configuration)' == 'Release'">     <TypeScriptTarget>ES3</TypeScriptTarget>     <TypeScriptIncludeComments>false</TypeScriptIncludeComments>     <TypeScriptSourceMap>false</TypeScriptSourceMap>   </PropertyGroup>   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />   <!-- To modify your build process, add your task inside one of the targets below and uncomment it.       Other similar extension points exist, see Microsoft.Common.targets.   <Target Name="BeforeBuild">     </Target>   <Target Name="AfterBuild">   </Target>--> 

Misc

Uninstalling may need to be done twice before TypeScript no longer appears in the Programs and Features list. After uninstalling the first time, refresh the application list by hitting F5. Some files may still be present after uninstallation.

There are additional custom properties for debugger paths in the TypeScript_CORE.msi. I am assuming at this point that VS 2010 is not compatible with script debugging back to a different source file. However, someone else may wish to try to get this working. The other custom property names are: VS11_DEBUGGER_DIR, VS11_DEBUGGER_X64_DIR, and VS11_REMOTEDEBUGGER_DIR

There are additional custom properties to enable install with one or both of visual web developer or visual web developer express. I do not have the ability to test an install with these products. The custom properties in the TypeScript_CORE.msi file related to this install are: VWD11_EXTENSIONS_DIR, VWDExpress11, and VWD11_NEWSCRIPTITEMS_DIR

Functionality

  • The new project type and item type are available.
  • TextEditor\TypeScript section under the Tools\Options menu.
  • Intellisense editing of .ts files.
  • .js files are built on build or on save (when build on save has been set in the text editor options).
  • The .js file appears as a child of the .ts file in the solution explorer but is saved in the same path as the .ts file. (v 0.9.1.1 does not include the .js file in the project by default)
  • .ts files are not included when publishing, just the .js files.
  • .ts files have their own icon and are associated with visual studio.

Revision History

  • Update for TypeScript version 0.9.1.1
  • Updated for TypeScript version 0.8.3.1
  • Fixed missing instruction to copy MSBUILD directory for 0.8.3

Screenshots

Project Template ScreenshotEditor ScreenshotSolution Explorer ScreenshotTypeScript Options ScreenshotFileIcon Screenshot

like image 124
16 revs, 3 users 83% Avatar answered Sep 24 '22 02:09

16 revs, 3 users 83%