一文搞懂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)文章
前端使用JSON.stringify實現(xiàn)深拷貝的巨坑詳解
這篇文章主要為大家介紹了JSON.stringify實現(xiàn)深拷貝的巨坑詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03Javascript中string轉(zhuǎn)date示例代碼
string轉(zhuǎn)date的方法有很多,在接下來為大家介紹下Javascript中是如何做到的,感性取的朋友不要錯過2013-11-11基于JS如何實現(xiàn)類似QQ好友頭像hover時顯示資料卡的效果(推薦)
通過本文給大家介紹鼠標(biāo)經(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