一文搞懂TypeScript的安裝、使用、自動編譯的教程
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安裝使用自動編譯的資料請關注腳本之家其它相關文章!
相關文章
前端使用JSON.stringify實現(xiàn)深拷貝的巨坑詳解
這篇文章主要為大家介紹了JSON.stringify實現(xiàn)深拷貝的巨坑詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07使用Javascript開發(fā)sliding-nav帶滑動條效果的導航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動條效果的導航插件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03基于JS如何實現(xiàn)類似QQ好友頭像hover時顯示資料卡的效果(推薦)
通過本文給大家介紹鼠標經(jīng)過好友列表中的好友頭像時顯示資料卡的效果,非常不錯具有參考借鑒價值,感興趣的朋友一起看下吧2016-06-06JavaScript時間操作之年月日星期級聯(lián)操作
這篇文章主要介紹了JavaScript時間操作之級聯(lián)日期選擇操作,涉及到年、月、日、星期,感興趣的小伙伴們可以參考一下2016-01-01瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性,從字面上來看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01