一,前言
JS的發展:
隨着互聯網的發展,JavaScript被廣泛應用
目前JavaScript不僅侷限於網站開發,還可以進行APP,服務端,桌面應用等多端應用開發
JavaScript還被廣泛應用於IOT,AI,大數據等諸多新興領域
無處不在的JS已經成爲了不折不扣的全棧開發語言,也賦予了前端開發者更多的機會和挑戰
JS野蠻生長的同時也暴露出自身的很多問題,對語言的安全性,健壯性和可維護性提出了更高的要求
JS的問題:
JS作爲一門動態弱類型語言,對變量類型非常寬容,使得語言具有極大"靈活性",同時這也是JS的一種"缺陷"
1)JS不會像Java這種靜態強類型語言一樣可以在編譯階段執行靜態代碼檢測,很多問題只能在執行時才能被發現
如: TypeError: "xxx" is not a function;
TypeError: Cannot read property "length" of undefined;
2)爲了保證代碼的健壯性,需要對輸入參數進行各種假設和校驗
3)對於底層代碼中參數類型的改動,不能確定對引用處的影響
4)字段類型問題引起的接口API的調用報錯
5)變量或方法與調用者之間不能通過類型約束建立結構化契約,導致調用異常時常發生
在程序猿的世界中,隱約存在一條"語言鄙視鏈",而JS的這種"缺陷"使得它長久以來處於被"鄙視"的那一端
前端開發者在長期沒有類型約束的環境下進行開發,造成了類型思維缺失,成爲前端開發者的短板
這就是爲什麼Java轉JavaScript很簡單,而JavaScript轉Java卻很困難
解決方案-TypeScript:
開源社區也一直在努力解決這個問題
2014年FaceBook推出了Flow,同年微軟也發佈了TypeScript
兩者都致力於爲JavaScript提供靜態類型檢查功能
目前TypeScript更勝一籌
Angular和Vue也正在全面使用TypeScript進行代碼重構
甚至FaceBook自家的產品也在從Flow向TypeScript進行遷移
在ES標準推出靜態類型檢查之前,TypeScript是目前解決此問題的最佳方案
學習TypeScript的必要性:
如果在一年前,可能TypeScript還不是剛需
但按目前的趨勢看,不管是對於JS語言本身還是開發者類型思維的塑造,TypeScript已經是開發者的必備技能
ES6,TypeScript等也都是面試中經常會被問到的點
二,TypeScript是什麼
TypeScript並不是一門獨立的新語言，它是擁有類型系統的JavaScript的超集
TypeScript可編譯成純JavaScript，提供了類型檢查，語言擴展,工具屬性等特性
TypeScript編譯器會先掃描源代碼，把它轉換抽象語法樹，然後再轉換成JavaScript
三,爲什麼要使用TypeScript
1,類型檢查
TypeScript在代碼編譯時會進行嚴格的靜態類型檢查
這意味着能夠在編碼階段發現可能存在的隱患,從而降低將它們帶到線上可能
2,語言擴展
TypeScript包括ES6和未來體驗中的特性,如: 異步操作和裝飾器
也會從其他語言借鑑某些特性,如接口和抽象類
3,工具屬性
TypeScript可以編譯成標準的JavaScript,可以在任何瀏覽器,操作系統上運行,無需任何運行時的額外開銷
從這個角度上講,TypeScript更像是一個工具,而不是一門獨立的語言
4,VSCode支持
VSCode具有強大的自動補全,導航和重構功能,同時提供了TS相關插件:如TypeScript Extension Pack
使接口定義可以直接代替文檔,同時可以提高開發效率,降低維護成本
5,幫助團隊重塑”類型思維”
擁有類型檢查能力的TypeScript,可以幫助團隊重塑”類型思維”,使開發者從代碼的編寫者蛻變爲代碼的設計者
四,強類型與弱類型
JS是動態弱類型語言,與之對應的還有靜態類型語言和強類型語言
1.強類型 ：
調用函數與被調用函數的參數相同 （廣義)
強類型語言,不允許改變變量的數據類型,除非進行強制類型轉換
以Java爲例:
class Test {
public static void main(String[] args) {
int x = 1;
boolean y = true
x = y;
System.out.println(x);
}
}
定義變量x爲int類型,y爲boolean類型,
將y賦值給x會發生類型不兼容,不能將boolean型轉換爲整形
class Test {
public static void main(String[] args) {
int x = 1;
boolean y = true;
//x = y;
char z = 'a'; // 字符a的十進制97
x = z;
System.out.println(x);
}
}
將char類型的變量z賦值給x,輸入97沒有報錯
因爲java進行了強制類型轉換,將字符a的ascii碼賦值給了x
2.弱類型
弱類型語言中,變量可以被賦值不同的數據類型,變量定義後仍然可以改變其類型
JavaScript就是一門弱類型語言
以JavaScript爲例:
> let x = 1;
let y = true;
x = y;
< true
整型x和boolean型y,可以將y賦值給x
> let z = 'a';
x = z
< "a"
可以直接賦值,不會進行強制類型轉換
總結:
強類型語言
對變量類型的轉換有嚴格的限制,不同類型的變量是不能相互賦值的,這樣可以避免很多低級的錯誤
弱類型語言
沒有什麼約束,雖然相對靈活,但也更容易產生bug
五,動態類型與靜態類型
靜態類型語言:
在編譯階段確定所有變量的類型
動態類型語言:
在執行階段確定所有變量的類型
動態類型語言則會把這項工作推遲到程序的執行階段
js示例:
class C {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
function add(a, b) {
return a.x + a.y + b.x + b.y;
}
定義了一個類C,爲它添加兩個實例成員x和y,
定義了一個add函數,作用是將兩個實例的所有屬性相加
當js編譯器看到這段代碼時,完全不能獲知變量類型,
只有在程序執行時,才能根據實際傳進來的變量來確定
如果是強類型語言,如Java,在編譯階段就可以知道變量的類型一定是整形
總結
靜態類型語言:
對類型有較嚴格的要去,能夠理解發現代碼中的錯誤,運行時性能較好,可以實現自文檔化
動態類型語言:
對類型要求比較寬鬆,遺留下的bug可能會隱藏很久很久纔會被發現,運行時性能較差,可讀性性能較差
六,TypeScript的示例和編譯
使用TS對變量類型的約束:
const message: string = 'hello world';
console.log(message);
編譯成JS:
"use strict";
const message = 'hello world';
console.log(message);
查看TS編譯爲JS的效果 : http://www.typescriptlang.org/play/index.html
七,結尾
簡單介紹了JS的發展和存在的問題,
TS的誕生和使用TS所能帶來的優勢
以及JS作爲動態弱類型語言存在的問題,及TS對JS的增強
還通過網站查看了TS編譯成JS的形式
維護日誌:
20190905:
編寫文章