2020你應(yīng)該知道的TypeScript學(xué)習(xí)路線【Typescript基礎(chǔ)介紹】
公眾號：前端微服務(wù)
GitHub：https://github.com/yongbolu
作 ?者：子奕
一、概述
隨著Vue3用TypeScript的重構(gòu)與發(fā)布，作為JavaScript類型超集的TypeScript，以可以編譯成JavaScript，可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行，并且開源，被再一次被推向了前端開發(fā)語言的巔峰，為了順應(yīng)時代的變化，爭取成為與時俱進(jìn)的開發(fā)者，小編今天從Typescript的概念、由來以及優(yōu)缺點(diǎn)方面進(jìn)行系統(tǒng)的講解，希望為學(xué)習(xí)路上的大家提供一點(diǎn)點(diǎn)幫助，如果大家覺得有幫助，記得給小編點(diǎn)個贊，如果想獲取更多干貨請關(guān)注前端微服務(wù)公眾號，不定期為大家?guī)砀韶洝?/p>
二、TypeScript是什么？
說到TypeScript一定離不開熟悉的JavaScript，JavaScript本身就是一門優(yōu)秀且強(qiáng)大的編程語言。既然JavaScript已經(jīng)這么優(yōu)秀，為什么還要使用TypeScript呢，這要從JavaScript的缺點(diǎn)入手，在早期由于JavaScript是弱類型語言，在開發(fā)過程中如果書寫代碼不嚴(yán)謹(jǐn)，就會出現(xiàn)各種各樣的bug，導(dǎo)致代碼質(zhì)量下降，為了預(yù)防這種問題的出現(xiàn),Facebook 出品的一個用于 JavaScript 代碼的靜態(tài)類型檢查工具。用于找出JavaScript 代碼中的類型錯誤。Flow 采用 OCaml 語言開發(fā)。正是由于這種問題的存在，在很長一段時間內(nèi)JavaScript被貼上了無類型的標(biāo)簽，但由于近幾年Node的出現(xiàn)，推動了前端工程化和自動化以及三大框架(Angular、React、Vue)的發(fā)展，把前端推向了一個更高的起點(diǎn)，Node.js之父瑞安達(dá)爾（Ryan Dahl）發(fā)布了新的開源項(xiàng)目 deno，而該項(xiàng)目最終是要提供一個安全的 TypeScript 運(yùn)行環(huán)境。
三、為什么要學(xué)習(xí)TypeScript？
擁有強(qiáng)大的靠山，分別為微軟與谷歌。TypeScript是由微軟開發(fā)的，谷歌的Angular框架是用Typescript開發(fā)的。所以TypeScript很有可能是未來的前端腳本語言發(fā)展的主流方向。 三大主流框架中，Vue 3.0 源碼全部用typescript重寫。 TypeScript 是微軟在2012年開發(fā)的一門免費(fèi)開源的編程語言。它是 JavaScript 的一個超集（增強(qiáng)版）。它在JS原來的基礎(chǔ)上增加了一套十分強(qiáng)大的類型系統(tǒng)，從而可以讓小伙伴們在寫代碼的時候獲得更加豐富的語法提示。在代碼的編譯階段也可以通過類型系統(tǒng)的檢查，從而有效避免一些線上錯誤。 TypeScript是一門比Java更Script的編程語言。也就是說TypeScript具有真正的面向?qū)ο缶幊趟枷?，你可以采用它來完成更加大型?fù)雜的應(yīng)用。 TypeScript始于JavaScript終于JavaScript。也就是說TypeScript遵循JavaScript的語法和語義，任何Js都可以在Ts內(nèi)運(yùn)行，但TypeScript它不可以直接在瀏覽器中運(yùn)行，必須要將其轉(zhuǎn)換為JavaScript。
四、環(huán)境搭建
因?yàn)門ypeScript在JavaScript的基礎(chǔ)上增加了類型系統(tǒng)，所以TypeScript不能夠直接在瀏覽器當(dāng)中運(yùn)行。我們需要使用編譯器將TypeScript編譯為JavaScript。因?yàn)門ypeScript編譯為JavaScript需要Node環(huán)境的支持，所以在編譯前請保證你本地已經(jīng)安裝Node運(yùn)行環(huán)境。
4.1 全局安裝TypeScript
$ npm install typescript -g
# OR
$ yarn global add typescript
查看TypeScript版本
$ tsc --version
4.2 編寫TypeScript代碼
所有TypeScript代碼全部以.為后綴
創(chuàng)建index.ts文件
// index.ts
const name:string = "xunzhaotech.com";// string 為設(shè)置變量類型
console.log(name);
編譯將index.ts文件
$ tsc index.ts
在文件夾內(nèi)多出一個名字為index.js的文件 接下來按照js的方式運(yùn)行
$ node index.js
五、推薦閱讀
官網(wǎng)：https://www.typescriptlang.org 中文：http://www.tslang.cn 官方博客：https://blogs.msdn.microsoft.com/typescript
六、關(guān)注我們
點(diǎn)擊下方關(guān)注我???