全面解讀TypeScript和JavaScript的區(qū)別
| 特征 | JavaScript | TypeScript |
|---|---|---|
| 類型系統(tǒng) | 弱類型 | 強類型 |
| 靜態(tài)類型檢查 | 無 | 有 |
| 可選類型注解 | 無 | 有 |
| 類型推斷 | 有 | 有 |
| 接口 | 無 | 有 |
| 繼承 | 基于原型的繼承 | 基于類的繼承 |
| 泛型 | 無 | 支持 |
| 支持裝飾器 | 無 | 支持 |
| 編譯時類型檢查 | 不支持 | 支持 |
| 編譯后代碼可讀性 | 高 | 低 |
| 社區(qū)活躍度 | 非常高 | 非常高 |
總結：
TypeScript 是 JavaScript 的超集，它在 JavaScript 的基礎上添加了強類型、接口、類、泛型等特性，并提供了靜態(tài)類型檢查等工具，讓開發(fā)者能夠在編寫代碼時更加安全、高效、可靠。與 JavaScript 相比，TypeScript 具有更強的類型系統(tǒng)、更嚴格的類型檢查、更好的代碼可讀性和維護性等優(yōu)點。此外，TypeScript 的社區(qū)活躍度也非常高，它被越來越多的開發(fā)者和公司所采用。
1.TypeScript 特性
TypeScript 是 Microsoft 開發(fā)和維護的一種面向?qū)ο蟮木幊陶Z言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以載入 JavaScript 代碼運行，并擴展了 JavaScript 的語法。
推薦先精通JS的的前提下再學習TS；這樣更有利于同時學習兩門語言
TS一般用于大型項目，就像微信小程序底層庫是用TS實現(xiàn)的，而微信小程序自身即應用層卻是以JS來實現(xiàn)的。
1.1 特點
TypeScript 具有以下特點：
TypeScript 增加了靜態(tài)類型、類、模塊、接口和類型注解
（強調(diào)代碼的模塊化，面向?qū)ο螅?/code>TypeScript 更適合用于開發(fā)大型的應用
（大型應用=模塊的集成，大型應用優(yōu)先需要易于維護，小應用優(yōu)先需要開發(fā)效率）
1.2 差異
JavaScript 和 TypeScript 的主要差異
TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進行了擴展。
JavaScript 代碼可以在無需任何修改的情況下與 TypeScript 一同工作，同時可以使用編譯器將 TypeScript 代碼轉(zhuǎn)換為 JavaScript。
TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。
TypeScript提供了很多數(shù)據(jù)類型，通過類型對變量進行限制，稱之為類型注解，使用類型注解后，就不能夠隨意變更變量的類型。 項目較大時，變量類型被變更的頻率就會增加，出錯的概率就會提高，因此TS時強類型的面向?qū)ο蟮摹?/p>
TypeScript 中的數(shù)據(jù)要求帶有明確的類型，JavaScript不要求。
TypeScript 為函數(shù)提供了缺省參數(shù)值。
缺省參數(shù)使用主要規(guī)則：調(diào)用時你只能從最后一個參數(shù)開始進行省略，換句話說，如果你要省略一個參數(shù)，你必須省略它后面所有的參數(shù)。
TypeScript 引入了 JavaScript 中沒有的“類”概念。
TypeScript 中引入了模塊的概念，可以把聲明、數(shù)據(jù)、函數(shù)和類封裝在模塊中。
學過.NET 的同學也許會突然發(fā)現(xiàn)，TS和C# 有點類似，沒錯；這兩門語言都出自 微軟之手。。
1.3 優(yōu)勢
TypeScript 比 JavaScript 更好嗎？
1.3.1 JavaScript優(yōu)勢
根據(jù)我的描述，TS 似乎只是JS的一個更好的版本。
所以你可能會認為TS會在不久的將來取代JavaScript。其實不然，我仍然相信JavaScript會有用武之地。
例如我們用TS開發(fā)微信小程序難免會推遲項目的開發(fā)周期，而用JS則更快完成。
復雜性是一個需要考慮的關鍵因素。
JavaScript 非常適合更簡單的應用程序，因為它可以在所有平臺（跨平臺）上運行并且非常輕量級。另外，與JS的最小開銷相比，編譯TS代碼需要的時間和CPU資源對項目而言會更麻煩。
1.3.2 TypeScript優(yōu)勢
與JavaScript相比，TypeScript有很多好處。
TS 使代碼重構變得更加容易，并且更強調(diào)顯式類型，使開發(fā)人員能夠掌握各種組件的交互方式。由于它支持編譯時調(diào)試，對于處理大型復雜應用程序的團隊來說，有一定的好處。
為任何項目設置TypeScript都是容易的。一些框架，如Angular，默認使用TypeScript。因此，在我看來TypeScript更勝一籌。
什么時候應該將項目遷移到TypeScript？
當代碼的大小、復雜性和出錯率增加時，需要在編譯過程中確定具體問題時，就可以使用TypeScript。
TypeScript 還具有接口和訪問修飾符，允許開發(fā)人員在單個代碼庫上進行協(xié)作和交互。因此，最好在項目一開始就使用TypeScript。
但是你如果喜歡像Ember.js或Glimmer.js這樣的框架，那你就不會喜歡TypeScript，這些框架的首選是JavaScript。
2.代碼對比
typescript 定義學生類
class Student{
name:string;
age:number;
}
var s1=new Student();
s1.name="Jim";
s1.age=20;
document.write("name:"+s1.name+" age:"+s1.age);我們再來看用TypeScript編譯以后的JavaScript代碼：
var Student = (function () {
function Student() {
}
return Student;
})();
var s1 = new Student();
s1.name = "Jim";
s1.age = 20;
document.write("name:" + s1.name + " age:" + s1.age);通過對代碼的對比，TypeScript代碼更簡潔，更好理解，更易于維護。與C#,Java,C++類似。
2.1 DEMO案列
先來看一個經(jīng)典的程序Hello World。代碼如下：
<script type="text/typescript"> var hw:string="Hello World!"; //定義一個字符串變量 document.write(<h1>"+hw+"</h1>); //將結果顯示在頁面上，這句話是不是很熟悉呢。 </script>
我們可以把javascript的代碼用到TypeScript里面運行。上面的代碼是寫在script標簽中，類型是typescript。如果想在頁面上直接編譯看到結果，還需要引用typescript.min.js與typescript.compile.min.js。
2.2如何引用
<html>
<head>
<title>demo</title>
</head>
<body>
<script type="text/typescript">
// TypeScript代碼
</script>
<script src="lib/typescript.min.js"></script>
<script src="lib/typescript.compile.min.js"></script>
</body>
</html>3.語法區(qū)別
3.1TypeScript 的基本數(shù)據(jù)類型
TypeScript 的基本數(shù)據(jù)類型有boolean、number 、string 、 array 、 enum 、any 、void。
- 如定義一個boolean的變量:
var isDone: boolean = false;
- JS與TS中的所有數(shù)值都是浮點型，而在TS中定義為“number”型。聲明一個number類型的變量：
var isNumber:number=6; var isfloat:number=6.01;
- 使用一對雙引號(")或一對單引號(')來表示字符串
var name: string = "bob"; var family_name: string = 'Green';
- TypeScript 中數(shù)組使用“[]”來聲明，代碼如下:
var list: number[] = [1, 2, 3]; var name: string[] = ["阿龍","阿貓","阿狗"]; // 訪問方式 var list: number[] = [1, 2, 3]; alert(list[0])); // 定義任意類型的數(shù)組，關鍵字為Array. var arr:Array = [1,2,3,"a","b","c"]; // 任意類型數(shù)組 alert(arr[1]);
3.1.1 enum
枚舉類型是 TypeScript 中新添加的，而 JavaScript 中是沒有這個類型的。用關鍵字enum來聲明。代碼示例如下：
enum Color {
Red, //枚舉元素列表
Green,
Blue
};
var c: Color = Color.Green;假如我們有一個數(shù)值，但是我們不知道枚舉類型中是否有定義，可以用以下方式來獲取，代碼如下:
enum Color {
Red = 1,
Green,
Blue
};
var colorName: string = Color[2]; //訪問第二個枚舉子元素Green
alert(colorName);
colorName = Color[4];
alert(colorName);那么將會輸出Green和undefined。因為Green的值是 2，而沒有一個枚舉定義的值是 4，所以返回undefined。
3.1.2 任意類型 any
和 JavaScript 中變量的默認類型一樣，指代是動態(tài)的，能夠賦予任意類型。例如：
var notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // 定義為boolen型
定義為any后，將失去語法感知的功能，就相當于寫JavaScript 一樣。值得一提的是，any可以配合數(shù)組來使用，代碼如下:
var list: any[] = [1, true, "free"]; list[1] = 100; //更改list[1]的值
請注意，不要濫用 any，如果任何值都指定為 any 類型，那么 TypeScript 將失去它的意義。失去了type的script將是沒有意義的。
3.3.3 類型void
void 和 any 相反，any 是表示任意類型，而 void 是表示沒有任意類型，就是什么類型都不是，這在我們定義函數(shù)，函數(shù)沒有返回值時會用到：
const consoleText = (text: string): void => {
console.log(text);
};void 類型的變量只能賦值為 undefined 和 null，其他類型不能賦值給 void 類型的變量。
3.3.4 never類型
never 類型指那些永不存在的值的類型，它是那些總會拋出異?；蚋静粫蟹祷刂档暮瘮?shù)表達式的返回值類型，當變量被永不為真的類型保護所約束時，該變量也是 never 類型。
這個類型比較難理解，我們先來看幾個例子：
const errorFunc = (message: string): never => {
throw new Error(message);
};這個 errorFunc 函數(shù)總是會拋出異常，所以它的返回值類型是 never，用來表明它的返回值是永不存在的。
const infiniteFunc = (): never => {
while (true) {}
};3.2 函數(shù)的定義與調(diào)用
在TypeScript中定義函數(shù)的語法為：
function function_name(arg:number,arg1:number,....):return_type{
code 函數(shù)要執(zhí)行的代碼;
return data;
}其中 function 為聲明函數(shù)的關鍵字，function_name 為自定義函數(shù)的名字，arg為參數(shù)列表，_returntype為該函數(shù)的返回值類型，code為函數(shù)被調(diào)用時要執(zhí)行的代碼，使用return關鍵字返回數(shù)據(jù)，data為要返回的數(shù)據(jù)，要使用“{}”括起來。函數(shù)的調(diào)用就很簡單了，如下代碼：
function add(x: number, y: number): number { //定義返回值為number類型的函數(shù)
return x+y;
}
add(5,6); //調(diào)用函數(shù)- 匿名函數(shù)：
匿名函數(shù)是沒有名稱只有主體的函數(shù)，不需要指定返回類型，它的返回值類型是從函數(shù)主體內(nèi)的 return 語句推斷的。如下代碼：
var myAdd = function(x:number, y:number) { //定義匿名函數(shù)
return x+y;
};
myAdd(3,4); //調(diào)用匿名函數(shù)- 可選與默認參數(shù)
可選參數(shù)：在參數(shù)名后面，冒號前面添加一個問號，則表明該參數(shù)是可選的。如下代碼：
function buildName(firstName: string, lastName?: string) { //lastName為可選參數(shù)
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
var result1 = buildName("Bob"); //正確調(diào)用 Bob
var result2 = buildName("Bob", "Adams"); //正確調(diào)用 Bob Adams默認參數(shù)：在參數(shù)名后直接給定一個值，如果這個值沒有被傳入，那么將會被賦值為默認值。如下代碼：
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
var result1 = buildName("Bob"); //沒有傳入第二個參數(shù)，則被賦值為默認的smith,結果為:Bob Smith
var result2 = buildName("Bob", "Adams"); //結果為:Bob Adams注：可選參數(shù)和默認參數(shù)必須在參數(shù)列表的最后。
3.3 TS的類
3.3.1 類的結構及聲明
JavaScript語言基于函數(shù)和原型鏈繼承機制的方式構建可重用的組件。這對于面向?qū)ο缶幊虂碚f顯得比較笨拙。
在下一代的JavaScript標準將為我們提供基于class base的面向?qū)ο蟮脑O計方式。但在TypeScript中可以使用這種方式，它將編譯為目前大多數(shù)瀏覽器能允許的普通JavaScript代碼.
所以我們不用在等下一代Javascript標準的到來了。
類是面向?qū)ο缶幊痰暮诵幕A，是屬性和方法的集合，類不能真接編寫程序時引用，必須實例化后才能使用。
創(chuàng)建一個TypeScript類時，必須使用關鍵字class進行聲明，該關鍵字后緊跟類的名稱，之后用大括號將類體進行封裝，類的基本聲明格式如下。
class 類名{
//類體
}創(chuàng)建完成類的基本結構后就可以編寫類體。類體中主要包括屬性和方法的聲明及定義，當然也可能在類體中只定義屬性或只定義方法，甚至類體內(nèi)可以不定義任何屬性。完整的類的定義格式如下。
class 類名{
name:string; //定義類的屬性
fun(){ //定義類的方法
//定義該方法所要實現(xiàn)的功能
}
}- 為什么可以不定義任何屬性？
- 類可以被繼承，它的方法和屬性可以在子類中被繼承
- 未定義任何方法的空類可以作為泛型類
- 綜上未定義任何方法的空類其名稱具有價值
構造函數(shù)
class student{ //定義student類
name:string; //定義類的屬性
constructor(myname:string){ //定義構造函數(shù)
this.name=myname;
}
study(){ //定義類的方法
//定義該方法所要實現(xiàn)的功能
}
}用這種方式定義出來的類，感覺在寫C#、Java或C++的程序，沒錯，TS就是面向?qū)ο蟮摹?/p>
3.3.2 類的實例化
一般情況下，創(chuàng)建一個類后并不能直接的對屬性和方法進行引用，必須對類進行實例化，即創(chuàng)建一個對象。TypeScript中用new 關鍵字創(chuàng)建對象。實例化后通過“.”來訪問屬性和方法。實例代碼如下：
class student{ //定義student類
name:string; //定義類的屬性
constructor(myname:string){ //定義帶參數(shù)的構造函數(shù)
this.name=myname;
}
study(){ //定義類的方法
document.write("<h1> My name is "+this.name+".</h1>");
}
write():string{
return "write name:"+this.name;
}
}類的使用
var s1=new student("Jim");
document.write("<h1>"+s1.name+"</h1>"); //獲取name屬性
s1.study(); // 調(diào)用study方法
document.write("<h1>"+s1.write()+"</h1>");3.4 TS的模塊
我們先舉個例子，比如數(shù)據(jù)驗證，我們需要驗證用戶數(shù)字的內(nèi)容是否是數(shù)字或者字母時，需要使用正則表達式。
var lettersRegexp = / ^ [A-Za-z]+$/; var numberRegexp = / ^ [0-9]+$/;
數(shù)據(jù)驗證可改善用戶體驗防止輸入錯誤的信息，在學了前面的知識，我們很可能會寫出以下代碼：
// 驗證的封裝
interface StringValidator { //定義驗證接口
isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator { //實現(xiàn)接口
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
class ZipCodeValidator implements StringValidator { //實現(xiàn)接口
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
// 驗證的過程
var strings = ['Hello', '98052', '101'];
var validators: { [s: string]: StringValidator; } = {};
validators['ZIP code'] = new ZipCodeValidator(); //實例化類
validators['Letters only'] = new LettersOnlyValidator(); //實例化類
for(var i=0;i<strings.length;i++){
for (var name in validators) {
document.write('"' + strings[i] + '" ' + (validators[name].isAcceptable(strings[i]) ? ' matches ' : ' does not match ') + name+"
"); //調(diào)用類的方法
}
}- 那么這段代碼最大的問題是什么呢？
- 一個是沒法復用，驗證的封裝
interface StringValidatorLettersOnlyValidatorZipCodeValidator和驗證的過程即 下面的 方法 在同一個文件，驗證的封裝已經(jīng)是可以復用的。 - 另一個是接口和兩個實現(xiàn)的類都直接掛接在全局變量上，假如數(shù)量一多的話，將會影響整個全局變量，如果把類的內(nèi)部類和類的內(nèi)部方法分離開，就會提高模塊化，強化面向?qū)ο筇卣鳌?/li>
- 而TypeScritp中模塊的出現(xiàn)給我們解決了這一問題。
- 使用 module 關鍵字來定義模塊，并在末尾加花括號即可用；
- 用export 關鍵字使接口、類等成員對模塊外可見。
module Validation { //定義模塊
export interface StringValidator { //聲明接口對外部可以使用
isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
export class LettersOnlyValidator implements StringValidator { //聲明類對外部可用
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}3.4.1 模塊內(nèi)容的調(diào)用
在前面一節(jié)中我學習了模塊的聲明，而在模塊聲明完成以后，我們就可以調(diào)用這個模塊了，調(diào)用模塊中的接口、類、方法等。調(diào)用方法簡單，就是用模塊名后面跟一個點來調(diào)用類、接口、方法等。如下代碼：
var strings = ['Hello', '98052', '101'];
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator(); //使用模塊中的類
validators['Letters only'] = new Validation.LettersOnlyValidator();
// 顯示匹配結果
for(var i=0;i<strings.length;i++){
for (var name in validators) {
document.write('"' + strings[i] + '" ' + (validators[name].isAcceptable(strings[i]) ? ' matches ' : ' does not match ') + name+"<br>"); // 使用方法
}
}3.4.2 分隔模塊到多個文件
隨著我們項目的擴展，我們的代碼總不可能只寫在一個文件里。為了更好地維護項目，我們會將特定功能放到一個文件里，然后加載多個文件實現(xiàn)我們想需要的功能?，F(xiàn)在我們先將上面的代碼分割到多個文件里。
文件一 Validation.ts
module Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}文件二 LettersOnlyValidator.ts
/// <reference path="Validation.ts" />
module Validation {
var lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}文件三 ZipCodeValidator.ts
/// <reference path="Validation.ts" />
module Validation {
var numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}文件四 Test.ts
/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
var strings = ['Hello', '98052', '101'];
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
for(var i=0;i<strings.length;i++){
for (var name in validators) {
document.write('"' + strings[i] + '" ' + (validators[name].isAcceptable(strings[i]) ? ' matches ' : ' does not match ') + name+"<br>"); //調(diào)用類的方法
}
}在項目中新建好以上四個文件，然后我們編譯項目，如果我們代碼編寫沒錯的話，是能夠編譯通過的。
我們可以見到后面三個文件開頭有類似于 C# 的文檔注釋，
/// < reference path=“Validation.ts” />
/// < reference path=“LettersOnlyValidator.ts” />
/// < reference path=“ZipCodeValidator.ts” />這是告訴 TypeScript 編譯器該文件依賴于哪些文件，假如依賴的文件不存在的話，編譯就會不通過。當然我們不寫也是可以的，只不過編譯器在編譯時不會幫我們檢查，一般來說，還是建議寫上。
3.4.3 TS的編譯
我們知道.js的文件可以直接在瀏覽器中運行的，而.ts或者.tsx卻不行，所以我們在運行TS項目時需要編譯成瀏覽器引擎可以識別的JS語言。同時為了提高編譯速度，我們可以將穩(wěn)定的module提前編譯成js文件放到工程中，這樣下次編譯就會直接跳過該nodule的編譯。在引用編譯生成的 JavaScript 文件時，我們需要注意好順序。以上面的代碼為例，我們在 Html 代碼中這么引用。
<script src="Validation.js" type="text/javascript"/> <script src="LettersOnlyValidator.js" type="text/javascript"/> <script src="ZipCodeValidator.js" type="text/javascript"/> <script src="Test.js" type="text/javascript"/>
到此這篇關于全面解讀TypeScript和JavaScript的區(qū)別的文章就介紹到這了,更多相關TypeScript和JavaScript的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家分享一篇js點擊時關閉該范圍下拉菜單之外的菜單方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了解決webpack多頁面內(nèi)存溢出的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JSON 數(shù)字排序在使用中比較常見，在本文將為大家詳細介紹下具體是如何排序的，感興趣的朋友可以參考下2013-09-09
本篇文章主要介紹了D3.js實現(xiàn)拓撲圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)圖片輪播跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于js中typeof用法的相關資料,typeof運算符把類型信息當作字符串返回,包括有大家常有變量類型,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制
這篇文章主要介紹了微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標跟隨小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08