TypeScript是什麼?解決了JavaScript的什麼問題?

語言: CN / TW / HK

theme: fancy

小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。

大家好,我是一碗周,一個不想被喝(內卷)的前端。如果寫的文章有幸可以得到你的青睞,萬分有幸~

寫在前面

TypeScript是JavaScript的超集,它可以編譯成純JavaScript程式碼。

那為什麼會出現TypeScript這門語言,主要是因為現在的JavaScript可以開發很多複雜的專案,但是JavaScript又缺乏其可靠性,在使用的時候需要我們為了程式碼的健壯性需要新增很多業務邏輯去判斷。

TypeScript可以執行在瀏覽器環境、Node.js環境或者ECMAScript3或者更高的JavaScript的引擎中。

JavaScript的問題

JavaScript的問題主要有如下幾個:

  1. JavaScript的型別異常只有在執行的時候才可以發現。
  2. 因為JavaScript的函式的型別是不明確的,有可能導致函式的最終功能導致出現問題,如下這段程式碼:

JavaScript function sum(x, y){ return x + y } sum(100, '100') // 100100

TypeScript的優勢

JavaScript是動態型別的程式語言,所謂的動態型別,就是在編譯時候時候才知道其資料型別是Number 還是String;而TypeScript是靜態型別的程式語言,所謂的靜態型別就是編寫的時候就知道其資料型別是什麼,比例定義一個變數

TypeScript let num: number = 6;

num這個變數從頭到尾只能是number型別,如果將字串賦值給他就會丟擲異常。

所以說,TypeScript的優勢如下:

  1. 在開發過程中,就可以定位的錯誤的地方,方便我們檢查錯誤
  2. 減少了我們在開發過程中的不必要的型別檢查
  3. 靜態型別的程式碼提示是要優於靜態型別程式碼提示的。
  4. 在進行專案重構的時候會更加簡單
  5. 靜態型別的程式碼語義化比動態型別更好,可讀性更好。

TypeScript的執行環境

TypeScript是執行是建立在Node.js環境基礎之上的,所以需要先安裝一下Node.js。

安裝Node.js等一系列操作以忽略

安裝TypeScript的命令如下

PowerShell npm install -g [email protected]

這裡我通過@指定版本號,也可以不指定版本號

安裝完TypeScript後,還需要安裝一個ts-node的工具,如果安裝該工具話是不能直接執行TS程式碼的,需要將TS的程式碼編成JavaScript後才能執行。執行流程如下

```PowerShell

編譯 TS 程式碼

tsc demo.ts

編譯後會得到 demo.js 檔案,然後就可以運行了

```

如果安裝了node-ts工具後,就可以直接執行TS程式碼了。具體步驟如下

```PowerShell

1. 全域性安裝

npm install -g [email protected]

2. 執行程式碼

ts-node demo.ts ```

值得注意的是安裝之後的目錄一定需要在環境變數中,不然會報錯的。