欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文搞懂TypeScript的安裝、使用、自動編譯的教程

 更新時間:2021年06月24日 09:07:27   作者:韓子昕  
TypeScript 是一種由微軟開發(fā)的開源、跨平臺的編程語言。它是 JavaScript 的超集,最終會被編譯為 JavaScript 代碼,關(guān)于TypeScript的安裝、使用、自動編譯很多朋友不是很清楚,今天抽空給大家普及下,感興趣的朋友一起看看吧

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 擴展了 JavaScript 的語法,所以任何現(xiàn)有的 JavaScript 程序可以運行在 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 代碼,并且可以運行在任何瀏覽器上、Node.js 環(huán)境中和任何支持 ECMAScript 3(或更高版本)的 JavaScript 引擎中。

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

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

總結(jié)

      TypeScript 在社區(qū)的流行度越來越高,它非常適用于一些大型項目,也非常適用于一些基礎(chǔ)庫,極大地幫助我們提升了開發(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

輸出結(jié)果為一個 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));

總結(jié)

  •  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)視任務(wù):

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

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

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

相關(guān)文章

最新評論