TypeScript入門筆記(一）：安裝和自動編譯

  • 2019 年 11 月 28 日
  • 筆記

TypeScript是一種由微軟開發的自由和開源的程式語言。是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。隨著vue3.0開源以來，學會typescript語言語言已經迫在眉睫，不然就會被這個時代所淘汰。

TypeScript學習手冊： https://www.tslang.cn/docs/handbook/basic-types.html

開發typescript需要的準備工作就不說了 1：安裝Node.js 2：nodejs的版本管理工具npm

今天來從零開始，記錄一下TypeScript入門筆記

1：全局安裝

打開cmd，右鍵管理員身份運行，輸入以下命令

npm  install  -g  typescript

安裝成功之後，開始寫ts程式碼了，因為有些瀏覽器無法解析es6程式碼。 能解析es5程式碼。所以需要一邊寫程式碼，一邊編譯成瀏覽器能識別的js程式碼，就像寫sass一樣。那麼

怎麼在vscode裡面配置自動解析？

打開vscode編輯器，導入剛剛在d盤新建一個項目

1：tsc --init

在編輯器Visual Studio Code打開一個終端

進入項目，執行命令tsc --init，這個時候可以看到生成了一個ts的配置文件

打開ts的配置文件 （生成tsconfig.json ），將改 "outDir": "./js", 表示index.js要輸出到根目錄的js裡面，修改保存。

2：任務-運行任務 選擇監視tsconfig.json

在編輯器裡面找到任務-運行任務 選擇監視tsconfig.json ，操作完成之後會發現這個時候，生成了一個js文件了。

ok，現在已經可以在編寫程式碼的時候實現vscode自動編譯ts了

現在來寫一段TypeScript語法測試一下，在ts文件裡面寫一段定義變數的指定類型程式碼，var str:string="你好ts"，打開js/index.js，可以看到，已經將這句程式碼解析為瀏覽器能夠識別的javascript的程式碼了。

console.log('你好ts')  function  getData(){    }  var str:string="你好ts";

繼續，在根目錄裡面新建一個index.html，引入js，需要查看ts寫出來的語法程式碼之後，打開這個index,在瀏覽器裡面查看即可，所寫的程式碼測試都可以列印在瀏覽器了。

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title></title>      </head>      <body>      </body>      <script src="js/index.js"></script>  </html>

Tags:

VirMach 便宜 VPS