全面解讀TypeScript和JavaScript的區(qū)別
| 特征 | JavaScript | TypeScript |
|---|---|---|
| 類型系統 | 弱類型 | 強類型 |
| 靜態(tài)類型檢查 | 無 | 有 |
| 可選類型注解 | 無 | 有 |
| 類型推斷 | 有 | 有 |
| 接口 | 無 | 有 |
| 繼承 | 基于原型的繼承 | 基于類的繼承 |
| 泛型 | 無 | 支持 |
| 支持裝飾器 | 無 | 支持 |
| 編譯時類型檢查 | 不支持 | 支持 |
| 編譯后代碼可讀性 | 高 | 低 |
| 社區(qū)活躍度 | 非常高 | 非常高 |
總結：
TypeScript 是 JavaScript 的超集，它在 JavaScript 的基礎上添加了強類型、接口、類、泛型等特性，并提供了靜態(tài)類型檢查等工具，讓開發(fā)者能夠在編寫代碼時更加安全、高效、可靠。與 JavaScript 相比，TypeScript 具有更強的類型系統、更嚴格的類型檢查、更好的代碼可讀性和維護性等優(yōu)點。此外，TypeScript 的社區(qū)活躍度也非常高，它被越來越多的開發(fā)者和公司所采用。
1.TypeScript 特性
TypeScript 是 Microsoft 開發(fā)和維護的一種面向對象的編程語言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以載入 JavaScript 代碼運行，并擴展了 JavaScript 的語法。
推薦先精通JS的的前提下再學習TS；這樣更有利于同時學習兩門語言
TS一般用于大型項目，就像微信小程序底層庫是用TS實現的，而微信小程序自身即應用層卻是以JS來實現的。
1.1 特點
TypeScript 具有以下特點：
TypeScript 增加了靜態(tài)類型、類、模塊、接口和類型注解
（強調代碼的模塊化，面向對象）TypeScript 更適合用于開發(fā)大型的應用
（大型應用=模塊的集成，大型應用優(yōu)先需要易于維護，小應用優(yōu)先需要開發(fā)效率）
1.2 差異
JavaScript 和 TypeScript 的主要差異
TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進行了擴展。
JavaScript 代碼可以在無需任何修改的情況下與 TypeScript 一同工作，同時可以使用編譯器將 TypeScript 代碼轉換為 JavaScript。
TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。
TypeScript提供了很多數據類型，通過類型對變量進行限制，稱之為類型注解，使用類型注解后，就不能夠隨意變更變量的類型。 項目較大時，變量類型被變更的頻率就會增加，出錯的概率就會提高，因此TS時強類型的面向對象的。
TypeScript 中的數據要求帶有明確的類型，JavaScript不要求。
TypeScript 為函數提供了缺省參數值。
缺省參數使用主要規(guī)則：調用時你只能從最后一個參數開始進行省略，換句話說，如果你要省略一個參數，你必須省略它后面所有的參數。
TypeScript 引入了 JavaScript 中沒有的“類”概念。
TypeScript 中引入了模塊的概念，可以把聲明、數據、函數和類封裝在模塊中。
學過.NET 的同學也許會突然發(fā)現，TS和C# 有點類似，沒錯；這兩門語言都出自 微軟之手。。
1.3 優(yōu)勢
TypeScript 比 JavaScript 更好嗎？
1.3.1 JavaScript優(yōu)勢
根據我的描述，TS 似乎只是JS的一個更好的版本。
所以你可能會認為TS會在不久的將來取代JavaScript。其實不然，我仍然相信JavaScript會有用武之地。
例如我們用TS開發(fā)微信小程序難免會推遲項目的開發(fā)周期，而用JS則更快完成。
復雜性是一個需要考慮的關鍵因素。
JavaScript 非常適合更簡單的應用程序，因為它可以在所有平臺（跨平臺）上運行并且非常輕量級。另外，與JS的最小開銷相比，編譯TS代碼需要的時間和CPU資源對項目而言會更麻煩。
1.3.2 TypeScript優(yōu)勢
與JavaScript相比，TypeScript有很多好處。
TS 使代碼重構變得更加容易，并且更強調顯式類型，使開發(fā)人員能夠掌握各種組件的交互方式。由于它支持編譯時調試，對于處理大型復雜應用程序的團隊來說，有一定的好處。
為任何項目設置TypeScript都是容易的。一些框架，如Angular，默認使用TypeScript。因此，在我看來TypeScript更勝一籌。
什么時候應該將項目遷移到TypeScript？
當代碼的大小、復雜性和出錯率增加時，需要在編譯過程中確定具體問題時，就可以使用TypeScript。
TypeScript 還具有接口和訪問修飾符，允許開發(fā)人員在單個代碼庫上進行協作和交互。因此，最好在項目一開始就使用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案列
先來看一個經典的程序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 的基本數據類型
TypeScript 的基本數據類型有boolean、number 、string 、 array 、 enum 、any 、void。
- 如定義一個boolean的變量:
var isDone: boolean = false;
- JS與TS中的所有數值都是浮點型，而在TS中定義為“number”型。聲明一個number類型的變量：
var isNumber:number=6; var isfloat:number=6.01;
- 使用一對雙引號(")或一對單引號(')來表示字符串
var name: string = "bob"; var family_name: string = 'Green';
- TypeScript 中數組使用“[]”來聲明，代碼如下:
var list: number[] = [1, 2, 3]; var name: string[] = ["阿龍","阿貓","阿狗"]; // 訪問方式 var list: number[] = [1, 2, 3]; alert(list[0])); // 定義任意類型的數組，關鍵字為Array. var arr:Array = [1,2,3,"a","b","c"]; // 任意類型數組 alert(arr[1]);
3.1.1 enum
枚舉類型是 TypeScript 中新添加的，而 JavaScript 中是沒有這個類型的。用關鍵字enum來聲明。代碼示例如下：
enum Color {
Red, //枚舉元素列表
Green,
Blue
};
var c: Color = Color.Green;假如我們有一個數值，但是我們不知道枚舉類型中是否有定義，可以用以下方式來獲取，代碼如下:
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可以配合數組來使用，代碼如下:
var list: any[] = [1, true, "free"]; list[1] = 100; //更改list[1]的值
請注意，不要濫用 any，如果任何值都指定為 any 類型，那么 TypeScript 將失去它的意義。失去了type的script將是沒有意義的。
3.3.3 類型void
void 和 any 相反，any 是表示任意類型，而 void 是表示沒有任意類型，就是什么類型都不是，這在我們定義函數，函數沒有返回值時會用到：
const consoleText = (text: string): void => {
console.log(text);
};void 類型的變量只能賦值為 undefined 和 null，其他類型不能賦值給 void 類型的變量。
3.3.4 never類型
never 類型指那些永不存在的值的類型，它是那些總會拋出異?；蚋静粫蟹祷刂档暮瘮当磉_式的返回值類型，當變量被永不為真的類型保護所約束時，該變量也是 never 類型。
這個類型比較難理解，我們先來看幾個例子：
const errorFunc = (message: string): never => {
throw new Error(message);
};這個 errorFunc 函數總是會拋出異常，所以它的返回值類型是 never，用來表明它的返回值是永不存在的。
const infiniteFunc = (): never => {
while (true) {}
};3.2 函數的定義與調用
在TypeScript中定義函數的語法為：
function function_name(arg:number,arg1:number,....):return_type{
code 函數要執(zhí)行的代碼;
return data;
}其中 function 為聲明函數的關鍵字，function_name 為自定義函數的名字，arg為參數列表，_returntype為該函數的返回值類型，code為函數被調用時要執(zhí)行的代碼，使用return關鍵字返回數據，data為要返回的數據，要使用“{}”括起來。函數的調用就很簡單了，如下代碼：
function add(x: number, y: number): number { //定義返回值為number類型的函數
return x+y;
}
add(5,6); //調用函數- 匿名函數：
匿名函數是沒有名稱只有主體的函數，不需要指定返回類型，它的返回值類型是從函數主體內的 return 語句推斷的。如下代碼：
var myAdd = function(x:number, y:number) { //定義匿名函數
return x+y;
};
myAdd(3,4); //調用匿名函數- 可選與默認參數
可選參數：在參數名后面，冒號前面添加一個問號，則表明該參數是可選的。如下代碼：
function buildName(firstName: string, lastName?: string) { //lastName為可選參數
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
var result1 = buildName("Bob"); //正確調用 Bob
var result2 = buildName("Bob", "Adams"); //正確調用 Bob Adams默認參數：在參數名后直接給定一個值，如果這個值沒有被傳入，那么將會被賦值為默認值。如下代碼：
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
var result1 = buildName("Bob"); //沒有傳入第二個參數，則被賦值為默認的smith,結果為:Bob Smith
var result2 = buildName("Bob", "Adams"); //結果為:Bob Adams注：可選參數和默認參數必須在參數列表的最后。
3.3 TS的類
3.3.1 類的結構及聲明
JavaScript語言基于函數和原型鏈繼承機制的方式構建可重用的組件。這對于面向對象編程來說顯得比較笨拙。
在下一代的JavaScript標準將為我們提供基于class base的面向對象的設計方式。但在TypeScript中可以使用這種方式，它將編譯為目前大多數瀏覽器能允許的普通JavaScript代碼.
所以我們不用在等下一代Javascript標準的到來了。
類是面向對象編程的核心基礎，是屬性和方法的集合，類不能真接編寫程序時引用，必須實例化后才能使用。
創(chuàng)建一個TypeScript類時，必須使用關鍵字class進行聲明，該關鍵字后緊跟類的名稱，之后用大括號將類體進行封裝，類的基本聲明格式如下。
class 類名{
//類體
}創(chuàng)建完成類的基本結構后就可以編寫類體。類體中主要包括屬性和方法的聲明及定義，當然也可能在類體中只定義屬性或只定義方法，甚至類體內可以不定義任何屬性。完整的類的定義格式如下。
class 類名{
name:string; //定義類的屬性
fun(){ //定義類的方法
//定義該方法所要實現的功能
}
}- 為什么可以不定義任何屬性？
- 類可以被繼承，它的方法和屬性可以在子類中被繼承
- 未定義任何方法的空類可以作為泛型類
- 綜上未定義任何方法的空類其名稱具有價值
構造函數
class student{ //定義student類
name:string; //定義類的屬性
constructor(myname:string){ //定義構造函數
this.name=myname;
}
study(){ //定義類的方法
//定義該方法所要實現的功能
}
}用這種方式定義出來的類，感覺在寫C#、Java或C++的程序，沒錯，TS就是面向對象的。
3.3.2 類的實例化
一般情況下，創(chuàng)建一個類后并不能直接的對屬性和方法進行引用，必須對類進行實例化，即創(chuàng)建一個對象。TypeScript中用new 關鍵字創(chuàng)建對象。實例化后通過“.”來訪問屬性和方法。實例代碼如下：
class student{ //定義student類
name:string; //定義類的屬性
constructor(myname:string){ //定義帶參數的構造函數
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(); // 調用study方法
document.write("<h1>"+s1.write()+"</h1>");3.4 TS的模塊
我們先舉個例子，比如數據驗證，我們需要驗證用戶數字的內容是否是數字或者字母時，需要使用正則表達式。
var lettersRegexp = / ^ [A-Za-z]+$/; var numberRegexp = / ^ [0-9]+$/;
數據驗證可改善用戶體驗防止輸入錯誤的信息，在學了前面的知識，我們很可能會寫出以下代碼：
// 驗證的封裝
interface StringValidator { //定義驗證接口
isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator { //實現接口
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
class ZipCodeValidator implements StringValidator { //實現接口
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+"
"); //調用類的方法
}
}- 那么這段代碼最大的問題是什么呢？
- 一個是沒法復用，驗證的封裝
interface StringValidatorLettersOnlyValidatorZipCodeValidator和驗證的過程即 下面的 方法 在同一個文件，驗證的封裝已經是可以復用的。 - 另一個是接口和兩個實現的類都直接掛接在全局變量上，假如數量一多的話，將會影響整個全局變量，如果把類的內部類和類的內部方法分離開，就會提高模塊化，強化面向對象特征。
- 而TypeScritp中模塊的出現給我們解決了這一問題。
- 使用 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 模塊內容的調用
在前面一節(jié)中我學習了模塊的聲明，而在模塊聲明完成以后，我們就可以調用這個模塊了，調用模塊中的接口、類、方法等。調用方法簡單，就是用模塊名后面跟一個點來調用類、接口、方法等。如下代碼：
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 分隔模塊到多個文件
隨著我們項目的擴展，我們的代碼總不可能只寫在一個文件里。為了更好地維護項目，我們會將特定功能放到一個文件里，然后加載多個文件實現我們想需要的功能?，F在我們先將上面的代碼分割到多個文件里。
文件一 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>"); //調用類的方法
}
}在項目中新建好以上四個文件，然后我們編譯項目，如果我們代碼編寫沒錯的話，是能夠編譯通過的。
我們可以見到后面三個文件開頭有類似于 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ū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js中 某個函數的內部函數在該函數執(zhí)行結束后仍然可以訪問這個函數中定義的變量，這稱為閉包(Closure)2008-11-11
在同一窗口瀏覽圖片的方法有很多，本例要為大家介紹的是使用js獲取img的src屬性后進行替換2014-09-09
這篇文章主要介紹了JS實現多物體運動的方法,結合實例形式較為詳細的分析了javascript實現多物體運動的原理與相關操作技巧,需要的朋友可以參考下2018-01-01
展開和收起這樣的效果想必大家早就眼熟了吧，利用閑暇時間用js寫了一個具體功能：當自己處于全部顯示的時候，點擊自己的收起，自己收起等等感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了js使用DOM操作實現簡單留言板的方法,涉及javascript中DOM操作的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04
在C#中，有可變長參數params[]，但是在js中，如何實現這種可變參數呢？本片文章主要介紹利用arguments，實現可變長參數。有需要的請參考下2016-11-11
這篇文章主要介紹了JavaScript簡單下拉菜單,采用JavaScript定時函數遞歸調用實現菜單漸顯效果,非常簡單實用,需要的朋友可以參考下2015-09-09
使用TypeScript接口優(yōu)化數據結構的示例詳解
在現代軟件開發(fā)中,數據結構的設計至關重要,它直接影響到程序的性能和可維護性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統,本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數據結構,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了JavaScript如何實現跨域請求，告訴大家什么是跨域請求？什么時候會用到跨域請求？感興趣的小伙伴們可以參考一下2016-08-08