1. 初識 TypeScript

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

TypeScript 的介紹

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

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

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

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

      TypeScript 是為大型應(yīng)用的開發(fā)而設(shè)計，并且可以編譯為 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 代碼，并且可以運(yùn)行在任何瀏覽器上、Node.js 環(huán)境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。

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

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

總結(jié)

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

2. 安裝 TypeScript

命令行運(yùn)行如下命令，全局安裝 TypeScript：

npm install -g typescript

安裝完成后，在控制臺運(yùn)行如下命令，檢查安裝是否成功(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 擴(kuò)展名，但是這段代碼僅僅是 JavaScript 而已。

   在終端上，運(yùn)行 TypeScript 編譯器：

tsc helloworld.ts

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

在終端上，通過 Node.js 運(yùn)行這段代碼：

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));

總結(jié)

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

vscode 自動編譯

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

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

tsc --init

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

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

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

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

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

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

最新評論