一文搞懂TypeScript的安裝、使用、自動(dòng)編譯的教程

1. 初識 TypeScript

上篇文章給大家介紹過(guò)  需要的朋友點(diǎn)擊查看。

TypeScript 的介紹

      TypeScript 是一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺的編程語(yǔ)言。它是 JavaScript 的超集，最終會(huì )被編譯為 JavaScript 代碼。

      2012 年 10 月，微軟發(fā)布了首個(gè)公開(kāi)版本的 TypeScript，2013 年 6 月 19 日，在經(jīng)歷了一個(gè)預覽版之后微軟正式發(fā)布了正式版 TypeScript

      TypeScript 的作者是安德斯·海爾斯伯格，C#的首席架構師。它是開(kāi)源和跨平臺的編程語(yǔ)言。

      TypeScript 擴展了 JavaScript 的語(yǔ)法，所以任何現有的 JavaScript 程序可以運行在 TypeScript 環(huán)境中。

      TypeScript 是為大型應用的開(kāi)發(fā)而設計，并且可以編譯為 JavaScript。

      TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類(lèi)型系統和對 ES6+ 的支持**，它由 Microsoft 開(kāi)發(fā)，代碼開(kāi)源于 GitHub 上

      TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類(lèi)型系統和對 ES6+ 的支持，它由 Microsoft 開(kāi)發(fā)，代碼開(kāi)源于 GitHub (opens new window)上

TypeScript 的特點(diǎn)

TypeScript 主要有 3 大特點(diǎn)：

始于 JavaScript，歸于 JavaScript
      TypeScript 可以編譯出純凈、 簡(jiǎn)潔的 JavaScript 代碼，并且可以運行在任何瀏覽器上、Node.js 環(huán)境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。

強大的類(lèi)型系統
      類(lèi)型系統允許 JavaScript 開(kāi)發(fā)者在開(kāi)發(fā) JavaScript 應用程序時(shí)使用高效的開(kāi)發(fā)工具和常用操作比如靜態(tài)檢查和代碼重構。

先進(jìn)的 JavaScript
      TypeScript 提供最新的和不斷發(fā)展的 JavaScript 特性，包括那些來(lái)自 2015 年的 ECMAScript 和未來(lái)的提案中的特性，比如異步功能和 Decorators，以幫助建立健壯的組件。

總結

      TypeScript 在社區的流行度越來(lái)越高，它非常適用于一些大型項目，也非常適用于一些基礎庫，極大地幫助我們提升了開(kāi)發(fā)效率和體驗。

2. 安裝 TypeScript

命令行運行如下命令，全局安裝 TypeScript：

npm install -g typescript

安裝完成后，在控制臺運行如下命令，檢查安裝是否成功(3.x)：

tsc -V

3. 第一個(gè) TypeScript 程序

編寫(xiě) TS 程序

   src/helloworld.ts

//str這個(gè)參數是string類(lèi)型的
 function aa(str:string){
        return "你好啊" + str
    }
    let text='小可愛(ài)'
    console.log(aa(text))

   src/index.html

//直接引入了ts的文件，瀏覽器是會(huì )報錯的（如果ts文件中只有單詞的js的語(yǔ)法，是可以正常引入及使用的）
  <script src="./helloworld.ts"></script>

手動(dòng)編譯代碼

   我們使用了 .ts 擴展名，但是這段代碼僅僅是 JavaScript 而已。

   在終端上，運行 TypeScript 編譯器：

tsc helloworld.ts

輸出結果為一個(gè) helloworld.js 文件，它包含了和輸入文件中相同的 JavsScript 代碼。

在終端上，通過(guò) Node.js 運行這段代碼：

node helloworld.js

修改src/index.html

<script src="./helloworld.js"></script>

控制臺輸出：

Hello, Yee

我們再看 helloworld.js 中的代碼

 function aa(str) {
        return "你好啊" + str;
    }
    var text = '小可愛(ài)';
    console.log(aa(text));

總結

•  ts的文件中直接書(shū)寫(xiě)js語(yǔ)法的代碼，那么在html文件中直接引入ts文件，在谷歌的瀏覽器中是可以直接使用的
• 如果ts文件中有了ts的語(yǔ)法代碼，那么久需要把這個(gè)ts文件編譯成為js文件，在html文件中引用js的文件來(lái)使用
• ts文件中的函數中的形參，如果使用了某個(gè)類(lèi)型進(jìn)行修飾，那么最終在編譯的js文件中是沒(méi)有這個(gè)類(lèi)型的
• ts文件中的變量使用的是let進(jìn)行修飾，編譯的js文件中修飾就變成了var了

vscode 自動(dòng)編譯

1). 生成配置文件tsconfig.json

步驟：
   新建文件夾，打開(kāi)終端，輸入命令，會(huì )自動(dòng)生成tsconfig.json配置

tsc --init

2). 打開(kāi)該文件修改tsconfig.json配置

 "outDir": "./js",
    "strict": false,

3). 啟動(dòng)監視任務(wù):

終端 -> 運行任務(wù) -> 顯示所有任務(wù)->監視tsconfig.json

再次修改保存，就會(huì )自動(dòng)生成對應的js文件。

以上就是一文搞懂TypeScript的安裝、使用、自動(dòng)編譯的教程的詳細內容，更多關(guān)于TypeScript安裝使用自動(dòng)編譯的資料請關(guān)注腳本之家其它相關(guān)文章！