TypeScript的4種編譯方式

--編譯

知道TypeScript是什么，也知道怎么安裝，那怎么使用？

其實編寫TypeScript腳本時，只要有面向對象編程思維的，就可以很快速的編寫出來。這里不講怎么編寫TS腳本（網上有很多TS腳本編寫教程）。進入正題。

1、手動編譯

　　1.1、首先找到TypeScript的安裝目錄，我的在”C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0“。

　　　　　

　　1.2、使用cmd工具命令cd到安裝目錄。

　　　　　

　　1.3、輸入命令：tsc 文件名.ts，回車編譯。

　　　　　

一旦編譯成功，就會在相同目錄下生成同名的js文件（編譯成功后是沒有任何消息提示的。上圖中，這也是編譯成功的。只要不存在語法錯誤）。

2、設置自動編譯

　　2.1、找到項目文件（*.csproj的文件），編輯打開，找到<Target Name="BeforeBuild">節點，在里面添加如下節點信息：

　　　　　　<Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\1.0\tsc&quot;    @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

　　　　　　或

　　　　　　<Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

　　　　　　

　　　　　　（上圖的<Exec>節點二選一）

　　　　　　這樣設置完后，每次編譯項目都會自動編譯項目中所有*.ts文件

3、解析編譯（個人理解），如果不想在項目中編譯，這需要在頁面添加<script src="typescript.js" />來編譯。typescript.js文件在  盤符/Program Files(x86)|Program Files/Microsoft SDKs/TypeScript/版本號/typescript.js 。
4、動態編譯

動態編譯，在寫完ts代碼后，按下ctrl+s，右邊視圖區是出現對應編譯后的js腳本。

　　4.1、找到項目文件，編輯打開

　　4.2、在<PropertyGroup>並行節點下，添加如下節點信息：

　　　　　<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
   　　　　　　 <TypeScriptTarget>ES5</TypeScriptTarget>
    　　　　　　<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    　　　　　　<TypeScriptSourceMap>true</TypeScriptSourceMap>
    　　　　　　<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  　　　　</PropertyGroup>
  　　　　<PropertyGroup Condition="'$(Configuration)' == 'Release'">
    　　　　　　<TypeScriptTarget>ES5</TypeScriptTarget>
   　　　　　　 <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    　　　　　　<TypeScriptSourceMap>false</TypeScriptSourceMap>
   　　　　　　 <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  　　　　</PropertyGroup>
  　　　　<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')" />

　　　　

　建議使用第4種編譯方式，雖性能可能有些會下降，但編寫完一段腳本后，按下ctrl+s，右側js視圖立馬可以顯示js腳本。這樣有助於理解TS與JS之間的某種轉換關系，也可以快速加深對TS語法的理解。

　　　　

 

https://www.cnblogs.com/backbone/p/4987662.html