用typescript寫靜態頁面

野生爬山虎發表於2019-02-16
TypeScript

typescript有許多的優點，對於已經上手angular開發的朋友想必都會很熟悉。那麼，如果想在其其他非angular框架環境下使用typescript需要哪些步驟呢？

以下內容，我們將以一個靜態頁面為例，簡述搭建typescript編譯環境步驟，並且講解如何在typescript中呼叫js庫

編譯環境

  1. 首先建立專案目錄結構
  2. 全域性安裝typescript npm i typescript -g。安裝完成後在執行 tsc -v 可以檢視安裝的typescript版本，即安裝成功

  3. 在根目錄手動建立tsconfig.json檔案，或者終端中輸入tsv --init自動生成tsconfig檔案，該檔案用來配置typescript編譯設定。修改後的tsconfig內容如下：

    {
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "module": "commonjs",
        "removeComments": true,
        "sourceMap": false,
        "outDir": "build"
    },
    "exclude": [
        "node_modules"
    ]
}

    我們將編譯後的目標格式設定為es5,採用commonjs檔案模組，將編譯後的目標檔案輸出到build資料夾

  4. 在終端中輸入tsc -w即可開始監聽ts檔案的變化，檔案儲存後將會同步編譯輸出到目標資料夾中。

在typescript中呼叫js庫

以呼叫一個canvas庫fabric為例

  1. typescript識別js庫需要一個介面檔案（.d.ts），fabricjs的介面檔案已經做好了，只需在終端眾npm i @types/fabric --save即可安裝
  2. 其餘步驟與以往寫js時一樣，在html中引入fabricjs<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>，在html中引入編譯後的js檔案<script src="./build/funny.js"></script>

以上就是typescript在靜態頁面中的應用。

相關文章