快捷導(dǎo)航

全面解讀TypeScript和JavaScript的區(qū)別

更新時間：2023年09月16日 10:19:13 作者：全面解讀

TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語言, TypeScript是JavaScript的一個超集,JavaScript是一種輕量級的解釋性腳本語言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下

特征	JavaScript	TypeScript
類型系統(tǒng)	弱類型	強(qiáng)類型
靜態(tài)類型檢查	無	有
可選類型注解	無	有
類型推斷	有	有
接口	無	有
繼承	基于原型的繼承	基于類的繼承
泛型	無	支持
支持裝飾器	無	支持
編譯時類型檢查	不支持	支持
編譯后代碼可讀性	高	低
社區(qū)活躍度	非常高	非常高

總結(jié)：

TypeScript 是 JavaScript 的超集，它在 JavaScript 的基礎(chǔ)上添加了強(qiáng)類型、接口、類、泛型等特性，并提供了靜態(tài)類型檢查等工具，讓開發(fā)者能夠在編寫代碼時更加安全、高效、可靠。與 JavaScript 相比，TypeScript 具有更強(qiáng)的類型系統(tǒng)、更嚴(yán)格的類型檢查、更好的代碼可讀性和維護(hù)性等優(yōu)點(diǎn)。此外，TypeScript 的社區(qū)活躍度也非常高，它被越來越多的開發(fā)者和公司所采用。

1.TypeScript 特性

TypeScript 是 Microsoft 開發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以載入 JavaScript 代碼運(yùn)行，并擴(kuò)展了 JavaScript 的語法。

推薦先精通JS的的前提下再學(xué)習(xí)TS；這樣更有利于同時學(xué)習(xí)兩門語言

TS一般用于大型項(xiàng)目，就像微信小程序底層庫是用TS實(shí)現(xiàn)的，而微信小程序自身即應(yīng)用層卻是以JS來實(shí)現(xiàn)的。

1.1 特點(diǎn)

TypeScript 具有以下特點(diǎn)：

TypeScript 增加了靜態(tài)類型、類、模塊、接口和類型注解（強(qiáng)調(diào)代碼的模塊化，面向?qū)ο螅?/code>
TypeScript 更適合用于開發(fā)大型的應(yīng)用（大型應(yīng)用=模塊的集成，大型應(yīng)用優(yōu)先需要易于維護(hù)，小應(yīng)用優(yōu)先需要開發(fā)效率）


1.2 差異
JavaScript 和 TypeScript 的主要差異
TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進(jìn)行了擴(kuò)展。
JavaScript 代碼可以在無需任何修改的情況下與 TypeScript 一同工作，同時可以使用編譯器將 TypeScript 代碼轉(zhuǎn)換為 JavaScript。
TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。
TypeScript提供了很多數(shù)據(jù)類型，通過類型對變量進(jìn)行限制，稱之為類型注解，使用類型注解后，就不能夠隨意變更變量的類型。 項(xiàng)目較大時，變量類型被變更的頻率就會增加，出錯的概率就會提高，因此TS時強(qiáng)類型的面向?qū)ο蟮摹?/p>
TypeScript 中的數(shù)據(jù)要求帶有明確的類型，JavaScript不要求。
TypeScript 為函數(shù)提供了缺省參數(shù)值。
缺省參數(shù)使用主要規(guī)則：調(diào)用時你只能從最后一個參數(shù)開始進(jìn)行省略，換句話說，如果你要省略一個參數(shù)，你必須省略它后面所有的參數(shù)。
TypeScript 引入了 JavaScript 中沒有的“類”概念。
TypeScript 中引入了模塊的概念，可以把聲明、數(shù)據(jù)、函數(shù)和類封裝在模塊中。
學(xué)過.NET 的同學(xué)也許會突然發(fā)現(xiàn)，TS和C# 有點(diǎn)類似，沒錯；這兩門語言都出自 微軟之手。。
1.3 優(yōu)勢
TypeScript 比 JavaScript 更好嗎？
1.3.1 JavaScript優(yōu)勢
根據(jù)我的描述，TS 似乎只是JS的一個更好的版本。
所以你可能會認(rèn)為TS會在不久的將來取代JavaScript。其實(shí)不然，我仍然相信JavaScript會有用武之地。
例如我們用TS開發(fā)微信小程序難免會推遲項(xiàng)目的開發(fā)周期，而用JS則更快完成。
復(fù)雜性是一個需要考慮的關(guān)鍵因素。
JavaScript 非常適合更簡單的應(yīng)用程序，因?yàn)樗梢栽谒衅脚_（跨平臺）上運(yùn)行并且非常輕量級。另外，與JS的最小開銷相比，編譯TS代碼需要的時間和CPU資源對項(xiàng)目而言會更麻煩。
1.3.2 TypeScript優(yōu)勢
與JavaScript相比，TypeScript有很多好處。
TS 使代碼重構(gòu)變得更加容易，并且更強(qiáng)調(diào)顯式類型，使開發(fā)人員能夠掌握各種組件的交互方式。由于它支持編譯時調(diào)試，對于處理大型復(fù)雜應(yīng)用程序的團(tuán)隊(duì)來說，有一定的好處。
為任何項(xiàng)目設(shè)置TypeScript都是容易的。一些框架，如Angular，默認(rèn)使用TypeScript。因此，在我看來TypeScript更勝一籌。
什么時候應(yīng)該將項(xiàng)目遷移到TypeScript？
當(dāng)代碼的大小、復(fù)雜性和出錯率增加時，需要在編譯過程中確定具體問題時，就可以使用TypeScript。
TypeScript 還具有接口和訪問修飾符，允許開發(fā)人員在單個代碼庫上進(jìn)行協(xié)作和交互。因此，最好在項(xiàng)目一開始就使用TypeScript。
但是你如果喜歡像Ember.js或Glimmer.js這樣的框架，那你就不會喜歡TypeScript，這些框架的首選是JavaScript。
2.代碼對比
typescript 定義學(xué)生類
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代碼更簡潔，更好理解，更易于維護(hù)。與C#,Java,C++類似。
2.1 DEMO案列
先來看一個經(jīng)典的程序Hello World。代碼如下：
<script type="text/typescript">
  var hw:string="Hello World!";     //定義一個字符串變量
  document.write(<h1>"+hw+"</h1>);  //將結(jié)果顯示在頁面上，這句話是不是很熟悉呢。
</script>
我們可以把javascript的代碼用到TypeScript里面運(yùn)行。上面的代碼是寫在script標(biāo)簽中，類型是typescript。如果想在頁面上直接編譯看到結(jié)果，還需要引用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ù)值都是浮點(diǎn)型，而在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ù)組，關(guān)鍵字為Array.
var arr:Array = [1,2,3,"a","b","c"]; // 任意類型數(shù)組
alert(arr[1]);
3.1.1 enum
枚舉類型是 TypeScript 中新添加的，而 JavaScript 中是沒有這個類型的。用關(guān)鍵字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。因?yàn)镚reen的值是 2，而沒有一個枚舉定義的值是 4，所以返回undefined。
3.1.2 任意類型 any
和 JavaScript 中變量的默認(rèn)類型一樣，指代是動態(tài)的，能夠賦予任意類型。例如：
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;  // 定義為boolen型
定義為any后，將失去語法感知的功能，就相當(dāng)于寫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ù)表達(dá)式的返回值類型，當(dāng)變量被永不為真的類型保護(hù)所約束時，該變量也是 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ù)的關(guān)鍵字，function_name 為自定義函數(shù)的名字，arg為參數(shù)列表，_returntype為該函數(shù)的返回值類型，code為函數(shù)被調(diào)用時要執(zhí)行的代碼，使用return關(guān)鍵字返回?cái)?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ù)
可選與默認(rèn)參數(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
默認(rèn)參數(shù)：在參數(shù)名后直接給定一個值，如果這個值沒有被傳入，那么將會被賦值為默認(rèn)值。如下代碼：
function buildName(firstName: string, lastName = "Smith") {
  return firstName + " " + lastName;
}
var result1 = buildName("Bob");  //沒有傳入第二個參數(shù)，則被賦值為默認(rèn)的smith,結(jié)果為:Bob Smith
var result2 = buildName("Bob", "Adams");  //結(jié)果為:Bob Adams
注：可選參數(shù)和默認(rèn)參數(shù)必須在參數(shù)列表的最后。
3.3 TS的類
3.3.1 類的結(jié)構(gòu)及聲明
JavaScript語言基于函數(shù)和原型鏈繼承機(jī)制的方式構(gòu)建可重用的組件。這對于面向?qū)ο缶幊虂碚f顯得比較笨拙。
在下一代的JavaScript標(biāo)準(zhǔn)將為我們提供基于class base的面向?qū)ο蟮脑O(shè)計(jì)方式。但在TypeScript中可以使用這種方式，它將編譯為目前大多數(shù)瀏覽器能允許的普通JavaScript代碼.
所以我們不用在等下一代Javascript標(biāo)準(zhǔn)的到來了。
類是面向?qū)ο缶幊痰暮诵幕A(chǔ)，是屬性和方法的集合，類不能真接編寫程序時引用，必須實(shí)例化后才能使用。
創(chuàng)建一個TypeScript類時，必須使用關(guān)鍵字class進(jìn)行聲明，該關(guān)鍵字后緊跟類的名稱，之后用大括號將類體進(jìn)行封裝，類的基本聲明格式如下。
class 類名{
    //類體
}
創(chuàng)建完成類的基本結(jié)構(gòu)后就可以編寫類體。類體中主要包括屬性和方法的聲明及定義，當(dāng)然也可能在類體中只定義屬性或只定義方法，甚至類體內(nèi)可以不定義任何屬性。完整的類的定義格式如下。
class 類名{
  name:string;  //定義類的屬性
  fun(){ //定義類的方法
           //定義該方法所要實(shí)現(xiàn)的功能
  }
}
 為什么可以不定義任何屬性？
 類可以被繼承，它的方法和屬性可以在子類中被繼承
 未定義任何方法的空類可以作為泛型類
 綜上未定義任何方法的空類其名稱具有價值
構(gòu)造函數(shù)
class student{  //定義student類
  name:string;  //定義類的屬性
  constructor(myname:string){ //定義構(gòu)造函數(shù)
      this.name=myname;
  }
  study(){ //定義類的方法
           //定義該方法所要實(shí)現(xiàn)的功能
  }
}
用這種方式定義出來的類，感覺在寫C#、Java或C++的程序，沒錯，TS就是面向?qū)ο蟮摹?/p>
3.3.2 類的實(shí)例化
一般情況下，創(chuàng)建一個類后并不能直接的對屬性和方法進(jìn)行引用，必須對類進(jìn)行實(shí)例化，即創(chuàng)建一個對象。TypeScript中用new 關(guān)鍵字創(chuàng)建對象。實(shí)例化后通過“.”來訪問屬性和方法。實(shí)例代碼如下：
class student{  //定義student類
  name:string;  //定義類的屬性
  constructor(myname:string){ //定義帶參數(shù)的構(gòu)造函數(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ù)驗(yàn)證，我們需要驗(yàn)證用戶數(shù)字的內(nèi)容是否是數(shù)字或者字母時，需要使用正則表達(dá)式。
var lettersRegexp = / ^ [A-Za-z]+$/;
var numberRegexp = / ^ [0-9]+$/;
數(shù)據(jù)驗(yàn)證可改善用戶體驗(yàn)防止輸入錯誤的信息，在學(xué)了前面的知識，我們很可能會寫出以下代碼：
// 驗(yàn)證的封裝
interface StringValidator {  //定義驗(yàn)證接口
  isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator {　//實(shí)現(xiàn)接口
  isAcceptable(s: string) {
    return lettersRegexp.test(s);
  }
}
class ZipCodeValidator implements StringValidator {   //實(shí)現(xiàn)接口
  isAcceptable(s: string) {
    return s.length === 5 && numberRegexp.test(s);
  }
}
// 驗(yàn)證的過程
var strings = ['Hello', '98052', '101'];
var validators: { [s: string]: StringValidator; } = {};
validators['ZIP code'] = new ZipCodeValidator();  //實(shí)例化類
validators['Letters only'] = new LettersOnlyValidator(); //實(shí)例化類
for(var i=0;i&ltstrings.length;i++){
    for (var name in validators) {
       document.write('"' + strings[i] + '" ' + (validators[name].isAcceptable(strings[i]) ? ' matches ' : ' does not match ') + name+"
"); //調(diào)用類的方法
    }
}
 那么這段代碼最大的問題是什么呢？
 一個是沒法復(fù)用，驗(yàn)證的封裝interface StringValidator LettersOnlyValidator ZipCodeValidator 和驗(yàn)證的過程即 下面的 方法 在同一個文件，驗(yàn)證的封裝已經(jīng)是可以復(fù)用的。
 另一個是接口和兩個實(shí)現(xiàn)的類都直接掛接在全局變量上，假如數(shù)量一多的話，將會影響整個全局變量，如果把類的內(nèi)部類和類的內(nèi)部方法分離開，就會提高模塊化，強(qiáng)化面向?qū)ο筇卣鳌?/li>
 而TypeScritp中模塊的出現(xiàn)給我們解決了這一問題。
 使用 module 關(guān)鍵字來定義模塊，并在末尾加花括號即可用；
 用export 關(guān)鍵字使接口、類等成員對模塊外可見。
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é)中我學(xué)習(xí)了模塊的聲明，而在模塊聲明完成以后，我們就可以調(diào)用這個模塊了，調(diào)用模塊中的接口、類、方法等。調(diào)用方法簡單，就是用模塊名后面跟一個點(diǎn)來調(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();
// 顯示匹配結(jié)果
for(var i=0;i&ltstrings.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àng)目的擴(kuò)展，我們的代碼總不可能只寫在一個文件里。為了更好地維護(hù)項(xiàng)目，我們會將特定功能放到一個文件里，然后加載多個文件實(shí)現(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&ltstrings.length;i++){
  for (var name in validators) {
     document.write('"' + strings[i] + '" ' + (validators[name].isAcceptable(strings[i]) ? ' matches ' : ' does not match ') + name+"<br>"); //調(diào)用類的方法
    }
}
在項(xiàng)目中新建好以上四個文件，然后我們編譯項(xiàng)目，如果我們代碼編寫沒錯的話，是能夠編譯通過的。
我們可以見到后面三個文件開頭有類似于 C# 的文檔注釋，
/// < reference path=“Validation.ts” />
/// < reference path=“LettersOnlyValidator.ts” />
/// < reference path=“ZipCodeValidator.ts” />
這是告訴 TypeScript 編譯器該文件依賴于哪些文件，假如依賴的文件不存在的話，編譯就會不通過。當(dāng)然我們不寫也是可以的，只不過編譯器在編譯時不會幫我們檢查，一般來說，還是建議寫上。
3.4.3 TS的編譯
我們知道.js的文件可以直接在瀏覽器中運(yùn)行的，而.ts或者.tsx卻不行，所以我們在運(yùn)行TS項(xiàng)目時需要編譯成瀏覽器引擎可以識別的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"/>
到此這篇關(guān)于全面解讀TypeScript和JavaScript的區(qū)別的文章就介紹到這了,更多相關(guān)TypeScript和JavaScript的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
                            
                            
                                您可能感興趣的文章:詳解JavaScript到TypeScript的轉(zhuǎn)換過程
TypeScript轉(zhuǎn)javaScript的方法示例
解讀TypeScript與JavaScript的區(qū)別
JavaScript?與?TypeScript之間的聯(lián)系
一文詳解TypeScript跟js、es6這些的區(qū)別


                        
                        
                            
                        
                        
                            
                            
                                TypeScript
JavaScript
區(qū)別

                            
                        
                        
                            
                        
                        
                        
                            相關(guān)文章
                            
  js的閉包的一個示例說明
js中 某個函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問這個函數(shù)中定義的變量，這稱為閉包(Closure)
 2008-11-11 
  js實(shí)現(xiàn)在同一窗口瀏覽圖片
在同一窗口瀏覽圖片的方法有很多，本例要為大家介紹的是使用js獲取img的src屬性后進(jìn)行替換
 2014-09-09 
  JS實(shí)現(xiàn)多物體運(yùn)動的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)多物體運(yùn)動的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)多物體運(yùn)動的原理與相關(guān)操作技巧,需要的朋友可以參考下
 2018-01-01 
  自己寫了一個展開和收起的多更能型的js效果
展開和收起這樣的效果想必大家早就眼熟了吧，利用閑暇時間用js寫了一個具體功能：當(dāng)自己處于全部顯示的時候，點(diǎn)擊自己的收起，自己收起等等感興趣的你可以參考下哈
 2013-03-03 
  js使用DOM操作實(shí)現(xiàn)簡單留言板的方法
這篇文章主要介紹了js使用DOM操作實(shí)現(xiàn)簡單留言板的方法,涉及javascript中DOM操作的技巧,非常具有實(shí)用價值,需要的朋友可以參考下
 2015-04-04 
  JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下
 2015-04-04 
  javascript 利用arguments實(shí)現(xiàn)可變長參數(shù)
在C#中，有可變長參數(shù)params[]，但是在js中，如何實(shí)現(xiàn)這種可變參數(shù)呢？本片文章主要介紹利用arguments，實(shí)現(xiàn)可變長參數(shù)。有需要的請參考下
 2016-11-11 
  JavaScript簡單下拉菜單實(shí)例代碼
這篇文章主要介紹了JavaScript簡單下拉菜單,采用JavaScript定時函數(shù)遞歸調(diào)用實(shí)現(xiàn)菜單漸顯效果,非常簡單實(shí)用,需要的朋友可以參考下
 2015-09-09 
  使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下
 2024-09-09 
  JavaScript如何實(shí)現(xiàn)跨域請求
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)跨域請求，告訴大家什么是跨域請求？什么時候會用到跨域請求？感興趣的小伙伴們可以參考一下
 2016-08-08 

                        
                        
                            
                        
                        
                        
                            最新評論


                

                
                    
                        
                        
                        
                        
                            
                                大家感興趣的內(nèi)容
                                
                                    1JS刪除數(shù)組里的某個元素方法
2js刷新頁面方法大全
3JS中setTimeout()的用法詳解
4js頁面跳轉(zhuǎn)常用的幾種方式
5JS截取字符串常用方法詳細(xì)整理
6js保留兩位小數(shù)方法總結(jié)
7js數(shù)組與字符串的相互轉(zhuǎn)換方法
8JS設(shè)置cookie、讀取cookie、刪除cookie
9JS打開新窗口的2種方式
10js 將json字符串轉(zhuǎn)換為json對象的方法解析
                                
                            
                        
                        
                        
                            
                                最近更新的內(nèi)容
                                
                                    Websocket 向指定用戶發(fā)消息的方法
Javascript設(shè)計(jì)模式之觀察者模式(推薦)
利用javascript移動div層-javascript 拖動層
js字符串截取函數(shù)substr substring sl
js實(shí)現(xiàn)將json數(shù)組顯示前臺table中
JavaScript 申明函數(shù)的三種方法 每個函數(shù)就是一個對象（一）
BootStrap下拉菜單和滾動監(jiān)聽插件實(shí)現(xiàn)代碼
微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼
Javascript模仿淘寶信用評價實(shí)例(附源碼)
JavaScript 模擬類機(jī)制及私有變量的方法及思路
                                
                            
                        
                        
                            
                        
                        
                            
                                常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面解讀TypeScript和JavaScript的區(qū)別

目錄

1.TypeScript 特性

1.1 特點(diǎn)

1.2 差異

1.3 優(yōu)勢

1.3.1 JavaScript優(yōu)勢

1.3.2 TypeScript優(yōu)勢

2.代碼對比

2.1 DEMO案列

2.2如何引用

3.語法區(qū)別

3.1TypeScript 的基本數(shù)據(jù)類型

3.1.1 enum

3.1.2 任意類型 any

3.3.3 類型void

3.3.4 never類型

3.2 函數(shù)的定義與調(diào)用

3.3 TS的類

3.3.1 類的結(jié)構(gòu)及聲明

3.3.2 類的實(shí)例化

3.4 TS的模塊

3.4.1 模塊內(nèi)容的調(diào)用

3.4.2 分隔模塊到多個文件

3.4.3 TS的編譯

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具