用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在靜態頁面中的應用。