TypeScript

TypeScript 安裝

[首先下載Plugin](http://www.microsoft.com/en-us/download/details.aspx?id=34790) [![](http://1.bp.blogspot.com/-WRV3aAlWA90/UiA5JY7FhvI/AAAAAAAAAzU/vpjUPcr9n-8/s1600/01.Install+Plugin.png)](http://1.bp.blogspot.com/-WRV3aAlWA90/UiA5JY7FhvI/AAAAAAAAAzU/vpjUPcr9n-8/s1600/01.Install+Plugin.png) TypeScript會安裝到C:\Program Files(x86)\Microsoft SDKs\TypeScript資料夾內 [![](http://3.bp.blogspot.com/-6b-otXZ0x9E/UiA5dTiLGkI/AAAAAAAAAzc/2G9hqjPmoRk/s1600/02.TypeScriptPath.png)](http://3.bp.blogspot.com/-6b-otXZ0x9E/UiA5dTiLGkI/AAAAAAAAAzc/2G9hqjPmoRk/s1600/02.TypeScriptPath.png) 安裝後,VS2012會多出一個TypeScript的範本 [![](http://1.bp.blogspot.com/-sRAJODGYtag/UiA5nu229JI/AAAAAAAAAzk/5-2CuTjHTjk/s1600/03.TypeScriptProject.png)](http://1.bp.blogspot.com/-sRAJODGYtag/UiA5nu229JI/AAAAAAAAAzk/5-2CuTjHTjk/s1600/03.TypeScriptProject.png) 新增檔案的時後,也會多出一個TypeScript的檔案類型 [![](http://2.bp.blogspot.com/-l75O28OgDQU/UiA5xi9P4mI/AAAAAAAAAzs/lZxE6w-KyNA/s1600/04.TypeScriptFile.png)](http://2.bp.blogspot.com/-l75O28OgDQU/UiA5xi9P4mI/AAAAAAAAAzs/lZxE6w-KyNA/s1600/04.TypeScriptFile.png) 在檔案總管中,TypeScript會包含js和map檔案 建置動作會是TypeScriptCompile [![](http://4.bp.blogspot.com/-XM8zMJX6ob8/UiA599Vkm0I/AAAAAAAAAz0/RkiPnMCZQVY/s1600/05.TypeScriptCompilerAction.png)](http://4.bp.blogspot.com/-XM8zMJX6ob8/UiA599Vkm0I/AAAAAAAAAz0/RkiPnMCZQVY/s1600/05.TypeScriptCompilerAction.png)在設定選項中,會有存檔編譯的選項 [![](http://1.bp.blogspot.com/-fF_PzROOIp0/UiA6MrP-TwI/AAAAAAAAAz8/H_Tq_ipcW4g/s1600/06.CompileOnSave.png)](http://1.bp.blogspot.com/-fF_PzROOIp0/UiA6MrP-TwI/AAAAAAAAAz8/H_Tq_ipcW4g/s1600/06.CompileOnSave.png) 另外安裝Web Essentials套件會更方便,首先打開擴充功能和更新 [![](http://4.bp.blogspot.com/-ufoFt8-MuK0/UiA6kp5vRRI/AAAAAAAAA0E/8PJitTnYDlY/s1600/07.Extend.png)](http://4.bp.blogspot.com/-ufoFt8-MuK0/UiA6kp5vRRI/AAAAAAAAA0E/8PJitTnYDlY/s1600/07.Extend.png) 選擇Web Essentials 2012安裝 [![](http://3.bp.blogspot.com/-4MawRq3pVmQ/UiA6sq3YV6I/AAAAAAAAA0M/2Mpn7jqw2KU/s1600/08.Essentials.png)](http://3.bp.blogspot.com/-4MawRq3pVmQ/UiA6sq3YV6I/AAAAAAAAA0M/2Mpn7jqw2KU/s1600/08.Essentials.png) 安裝後在編輯TypeScript檔案時,會出現預覽視窗[![](http://4.bp.blogspot.com/-hYLgm21kKVY/UiA8x6rBUWI/AAAAAAAAA0o/NHu0N31kKSw/s1600/09.VS2012.png)](http://4.bp.blogspot.com/-hYLgm21kKVY/UiA8x6rBUWI/AAAAAAAAA0o/NHu0N31kKSw/s1600/09.VS2012.png) 選項中的會有更多設定 [![](http://2.bp.blogspot.com/-nLOUDuY4taU/UiA7BErne1I/AAAAAAAAA0c/OhkGZ9wot98/s1600/10.PreviewWindow.png)](http://2.bp.blogspot.com/-nLOUDuY4taU/UiA7BErne1I/AAAAAAAAA0c/OhkGZ9wot98/s1600/10.PreviewWindow.png) P.S. Web Essentails 套件在V3.0版本中,已經移除所有對TypeScript的支援 原因是VS2013已經內建了 如果在VS2012還要使用之前提供的功能的話,建議安裝V2.