一、“前浪” 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 工程師!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/92054.html
標籤:JavaScript
