使用Visual Studio Code開發TypeScript

jopen 9年前發布 | 165K 次閱讀 .NET開發 Visual Studio

注意

依照本篇操作步驟實作,就可以在「 Windows 」、「 OS X 」操作系統上,使用Visual Studio Code開發TypeScript。

前言

為了解決JavaScript:缺少面向對象語法、缺少編譯期間錯誤檢查...等等問題。微軟提供了一個開源的TypeScript語言,讓開發人員能夠使用面向對象撰寫TypeScript程序代碼,接著再透過TypeScript編譯程序將程序代碼編譯成為JavaScript程序代碼,就能夠建立經過編譯檢查的JavaScript程序代碼來提供平臺使用。

本篇文章介紹如何在「 Windows 」、「 OS X 」操作系統中,透過Visual Studio Code這個工具開發TypeScript,讓沒有預算添購相關工具的開發人員,也能夠學習TypeScript的語法。主要為自己留個紀錄,也希望能幫助到有需要的開發人員。

使用Visual Studio Code開發TypeScript

安裝Node.js

首先要安裝Node.js,后續就可以使用NPM這個工具來安裝TypeScript Compiler。而Node.js的安裝程序,可以從Node.js官網下載。

  • https://nodejs.org/download/
  • </ul>

    使用Visual Studio Code開發TypeScript

    使用Visual Studio Code開發TypeScript

    安裝TypeScript Compiler

    安裝TypeScript Compiler

    裝完Node.js,接著就可以使用NPM來安裝TypeScript Compiler,之后就能透過這個Compiler來將TypeScript編譯成為JavaScript。開發人員使用命令提示字符(or終端機),輸入下列指令即可完成TypeScript Compiler的安裝。

    npm install -g typescript

    使用Visual Studio Code開發TypeScript

    更新TypeScript Compiler

    檢視上一個步驟所安裝的TypeScript Compiler,會發現安裝的版本為1.4.1。但是因為后續步驟,需要使用到1.5.0版新加入的功能,所以開發人員同樣使用命令提示字符(or終端機),輸入下列指令來更新TypeScript Compiler到1.5.0版以上。

    npm update -g typescript

    使用Visual Studio Code開發TypeScript

    移除環境變量(Windows only)

    有些開發人員的計算機,先前可能已經安裝過TypeScript相關工具,這些工具會在Windows環境變量中加入TypeScript Compiler的安裝路徑。為了統一使用NPM來管理TypeScript Compiler的版本,開發人員需要手動從環境變量中移除TypeScript Compiler的安裝路徑:

    C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\

    使用Visual Studio Code開發TypeScript

    安裝Visual Studio Code

    裝完TypeScript Compiler,接著安裝Visual Studio Code,之后就能透過Visual Studio Code來開發TypeScript程序代碼。而Visual Studio Code的安裝程序,可以從Visual Studio Code官網下載。

    • https://code.visualstudio.com/Download
    • </ul>

      使用Visual Studio Code開發TypeScript

      使用Visual Studio Code開發TypeScript

      開發TypeScript

      建立Workspace

      完成安裝步驟后,開啟Visual Studio Code,并且選取一個文件夾做為開發TypeScript的工作文件夾(Workspace)。

      使用Visual Studio Code開發TypeScript

      使用Visual Studio Code開發TypeScript

      建立tsconfig.json

      接著在Workspace加入一個新檔案「tsconfig.json」,并且輸入下列JSON設定參數。

      {
          "compilerOptions": {
              "target": "es5",
              "noImplicitAny": false,
              "module": "amd",
              "removeComments": false,
              "sourceMap": true
          }
      }

      使用Visual Studio Code開發TypeScript

      使用Visual Studio Code開發TypeScript

      建立.settings\tasks.json

      再來同樣在Workspace加入一個新文件夾「.settings」,并且在這個文件夾中加入一個新檔案「tasks.json」,接著輸入下列JSON設定參數。

      {
          "version": "0.1.0", 
          "command": "tsc",
          "isShellCommand": true,
          "showOutput": "always",
          "args": ["-p", "."],
          "problemMatcher": "$tsc"
      }

      使用Visual Studio Code開發TypeScript

      使用Visual Studio Code開發TypeScript

      開發main.ts

      完成上述步驟后,在Workspace加入一個新檔案「main.ts」,并且輸入下列TypeScript程序代碼。

      class Greeter {
          data: string;
          constructor(data: string) {
              this.data = data;
          }
          run() {
              alert(this.data);    
          }
      }
      window.onload = () => {
          var greeter = new Greeter("Clark");
          greeter.run();
      };

      使用Visual Studio Code開發TypeScript

      最后按下快捷鍵「Ctrl+Shift+B」,就可以看到Visual Studio Code編譯TypeScript,并且輸出對應的JavaScript檔案:main.js。

      var Greeter = (function () {
          function Greeter(data) {
              this.data = data;
          }
          Greeter.prototype.run = function () {
              alert(this.data);
          };
          return Greeter;
      })();
      window.onload = function () {
          var greeter = new Greeter("Clark");
          greeter.run();
      };
      //# sourceMappingURL=main.js.map

      使用Visual Studio Code開發TypeScript

      參考數據

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!