一、“前浪” JavaScript 2007年 Jeff Atwood 在他的博客里提出了著名的 Atwood 定律,即“任何能夠用 JavaScript 實現的應用系統,最終都必將用 JavaScript 實現。” JavaScript 的強大毋庸置疑,十餘年的時間早已驗證了這一點:語法結構簡單、 ...
一、“前浪” JavaScript
2007年 Jeff Atwood 在他的博客里提出了著名的 Atwood 定律,即“任何能夠用 JavaScript 實現的應用系統,最終都必將用 JavaScript 實現。”
JavaScript 的強大毋庸置疑,十餘年的時間早已驗證了這一點:語法結構簡單、萬物皆可對象、前後端通吃、單線程……這些特點使它幾乎無處不在。
正因為它的應用領域之廣,對這門語言的安全性、可維護性等方面的要求日漸拔高,可偏偏“萬物皆可對象”的特點,又使得它註定是一門動態弱類型的編程語言,於是乎使用 JavaScript的工程師們,他們經常會碰到這麼一種情況:
<script>
function getLength(str) {
return str length;
}
console.log("1.正在的代碼執行");
console.log("2.開始函數");
getLength("abc"); //正確的調用
getLength(); //錯誤的調用(IDE並不會報錯)
//當上面的代碼報錯後,後續所有的代碼都無法正常執行了
console.log("3.調用結束");
<script>
在 JavaScript 里編譯以上代碼時,不會出現報錯,可在瀏覽器運行時,就會出現以下畫面↓↓
出現這一情況的原因就在於:JavaScript 對我們傳入的參數,不會進行任何限制。
二、“後浪” TypeScript
今年的五四,B站的《後浪》刷了屏,一周了熱度也沒算完全消退。
儘管 JavaScript 這一“前浪”著實優秀,卻也有著不可避免的限制和缺陷,在這種情況下,“後浪” TypeScript 出現了,它既能完美融合 JavaScript 已有的優點和特點,也在此基礎上,又增加了類型約束。
為什麼說 JS 工程師遇到了 TypeScript 會擁有超能力呢?接下來我們將通過課程《TypeScript 基礎入門》的第一章,讓你初步瞭解“後浪” TypeScript。
三、初見 TypeScript
TypeScript 是 JavaScript 的一個超集,他們兩個之間有非常深入的聯繫,所以在學習 TypeScript 之前,你需要學習 JavaScript 相關教程。在本實驗我們將會對 TypeScript 進行簡單的介紹並初步使用它。
知識點
- TypeScript 簡介
- 為何選擇 TypeScript
- 安裝使用 TypeScript
TypeScript 簡介
什麼是TypeScript?
TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集,而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。它擴展了 JavaScript 的語法,所以任何現有的 JavaScript 程式可以不加改變的在 TypeScript 下工作。TypeScript 是為大型應用之開發而設計,而編譯時它產生 JavaScript 以確保相容性。
TypeScript 與 JavaScript 的區別
- TypeScript 是 JavaScript 的超集,擴展了 JavaScript 的語法。
- TypeScript 可處理已有的 JavaScript 代碼,並只對其中的 TypeScript 代碼進行編譯。
- TypeScript 文件的尾碼名 .ts (.ts,.tsx,.dts),JavaScript 文件是 .js。
- 在編寫 TypeScript 的文件的時候就會自動編譯成 js 文件。
用一張表格來更清晰的觀察兩者的區別:
為何選擇 TypeScript
- TypeScript 增加了代碼的可讀性和可維護性
- 新增了其他語言的語法,比如 Class(類)、Interface(介面)、Generics(泛型)、Enums(枚舉)等。
- TypeScript 擁抱了 ES6 規範
- 相容很多第三方庫,即使第三方庫不是用 TypeScript 寫的,也可以編寫單獨的類型文件供 TypeScript 讀取。
- TypeScript 擁有活躍的社區
更值得一提的是,TypeScript 在開發時就能給出編譯錯誤,而 JavaScript 錯誤則需要在運行時才能暴露。作為強類型語言,你可以明確知道數據的類型,代碼可讀性極強,幾乎每個人都能理解。TypeScript 被很多業界大佬使用,像 Asana、Circle CL 和 Slack 這些公司都在用 TypeScript。
安裝使用 TypeScript
打開終端 terminal 輸入全局安裝命令:
cnpm install -g typescript
新建一個文件index.ts,輸入以下內容:
console.log("hello world");
var a: string = "2"; //這是ts寫法,暫時不需要掌握,後續會講到
在終端輸入tsc index.ts編譯文件,編譯成功則會生成一個同名的 js 文件。
生成的 js 文件里則將 ts 語法轉換成了 js 語法。
四、總結
本小節我們學習了以下知識點:
- TypeScript 簡介
- 為何選擇 TypeScript
- 安裝使用 TypeScript
我相信你已經對 TypeScript 有了一個初步瞭解,接下來我們將會對 TypeScript 進行進一步學習。後續還有以下章節等著你來掌握:
- 基本數據類型
- 接囗
- 類(Class)
- 函數
- 模塊
- 命名空間
登陸實驗樓官網,搜索《JavaScript 基礎入門》《TypeScript 基礎入門》,一起擁抱 TypeScript,做一個擁有超能力的JS 工程師!