1. 初識 TypeScript

上篇文章給大家介紹過TypeScript的安裝、使用、自動編譯的實現(xiàn)  需要的朋友點擊查看。

TypeScript 的介紹

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

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

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

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

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

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

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

TypeScript 的特點

TypeScript 主要有 3 大特點：

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

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

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

總結

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

2. 安裝 TypeScript

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

npm install -g typescript

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

tsc -V

3. 第一個 TypeScript 程序

編寫 TS 程序

   src/helloworld.ts

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

   src/index.html

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

手動編譯代碼

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

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

tsc helloworld.ts

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

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

node helloworld.js

修改src/index.html

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

控制臺輸出：

Hello, Yee

我們再看 helloworld.js 中的代碼

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

總結

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

vscode 自動編譯

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

步驟：
   新建文件夾，打開終端，輸入命令，會自動生成tsconfig.json配置

tsc --init

2). 打開該文件修改tsconfig.json配置

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

3). 啟動監(jiān)視任務:

終端 -> 運行任務 -> 顯示所有任務->監(jiān)視tsconfig.json

再次修改保存，就會自動生成對應的js文件。

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

最新評論