JavaScript是程序員可以在前端和后端使用的最常見的語言。但是,不清楚數據在純JavaScript中的類型是什么,因為函數,參數和變量沒有類型。這使得讀取和維護項目變得困難。
如果您正在使用 JavaScript 開發一個項目,并且遇到此類問題,則類型腳本是解決這些問題的最合適語言。
類型腳本是添加靜態類型的 JavaScript 的語法超集。這意味著您可以在使用類型腳本時向數據添加類型,實際上,這只不過是用JavaScript編寫代碼。
在本文中,我將介紹如何使用類型腳本而不是 JavaScript 開發一個簡單的網站。
我將使用 VS 代碼作為 IDE。
讓我們從創建基本文件開始。
如您所知,基本上是一個簡單的項目外觀。但我想用主.ts更改文件.js因為類型腳本文件的擴展名“.ts”。我在 main.ts 中創建了一個簡單的函數。
我將類型腳本文件添加到文件索引中.html就像一個 JavaScript 文件。我用文件索引中的按鈕調用該函數.html。
結果是:
它給出了兩個錯誤。第一個原因是因為函數具有類型(此處為 void)。第二個源于第一個。由于 main.ts 文件中的函數具有類型,因此在 HTML 文件中是未知的。
為了解決這個問題,我們必須安裝Node.js(如果不可用),然后安裝typescript包。您可以按照此鏈接安裝 Node.js。您可以通過在終端中鍵入以下命令來安裝typescript包。
npm install typescript
安裝軟件包后,我在終端中鍵入以下命令:
tsc script/main.ts
通過此命令,您將在文件夾腳本中看到一個新的主.js文件。生成的文件是由類型腳本轉譯器生成的等效的 JavaScript 文件。
現在在索引.html文件中,我調用生成的主.js文件,而不是main.ts文件。
但是在編譯之后,您可能會收到此錯誤:“無法重新聲明塊范圍的變量'myFunction'。
為了解決這個問題,我將代碼“export{}”添加到 main.ts 的最后一行。它應該如下所示:
const myFunction = (): void => {return console.log(“Hello World!”);};export {};
結果是:
賓果游戲
請記住,在 main.ts 文件進行每次更改后,我們必須運行以下代碼:
tsc script/main.ts