TypeScript與JavaScript的區(qū)別分析
TypeScript是微軟開發(fā)的一個(gè)開源的編程語言,通過在JavaScript的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。由于JavaScript語言本身的局限性,難以勝任大型項(xiàng)目的開發(fā)和維護(hù)。因此微軟開發(fā)了TypeScript ,使得其能夠勝任大型項(xiàng)目的開發(fā)。TypeScript通過TypeScript編譯器或Babel轉(zhuǎn)譯為JavaScript代碼,可運(yùn)行在任何瀏覽器,任何操作系統(tǒng)。
TypeScript可以使用JavaScript中的所有代碼和編程概念,TypeScript是為了使JavaScript的開發(fā)變得更加容易而創(chuàng)建的。推薦先精通JS的的前提下再學(xué)習(xí)TS,這樣更有利于同時(shí)學(xué)習(xí)兩門語言。
TypeScript優(yōu)勢(shì)
與JavaScript相比,TypeScript有很多好處。
TS 使代碼重構(gòu)變得更加容易,并且更強(qiáng)調(diào)顯式類型,使開發(fā)人員能夠掌握各種組件的交互方式。由于它支持編譯時(shí)調(diào)試,對(duì)于處理大型復(fù)雜應(yīng)用程序的團(tuán)隊(duì)來說,有一定的好處。
為任何項(xiàng)目設(shè)置TypeScript都是容易的。一些框架,如Angular,默認(rèn)使用TypeScript。因此,在我看來TypeScript更勝一籌。
什么時(shí)候應(yīng)該將項(xiàng)目遷移到TypeScript?
當(dāng)代碼的大小、復(fù)雜性和出錯(cuò)率增加時(shí),需要在編譯過程中確定具體問題時(shí),就可以使用TypeScript。
TypeScript 還具有接口和訪問修飾符,允許開發(fā)人員在單個(gè)代碼庫上進(jìn)行協(xié)作和交互。因此,最好在項(xiàng)目一開始就使用TypeScript。
但是你如果喜歡像Ember.js或Glimmer.js這樣的框架,那你就不會(huì)喜歡TypeScript,這些框架的首選是JavaScript。
TypeScript 與 JavaScript 的區(qū)別
TypeScript 是 JavaScript 的超集,擴(kuò)展了 JavaScript 的語法,因此現(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改,TypeScript 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。
TypeScript 可處理已有的 JavaScript 代碼,并只對(duì)其中的 TypeScript 代碼進(jìn)行編譯。
TS一般用于大型項(xiàng)目,就像微信小程序底層庫是用TS實(shí)現(xiàn)的,而微信小程序自身即應(yīng)用層卻是以JS來實(shí)現(xiàn)的。
復(fù)雜性是一個(gè)需要考慮的關(guān)鍵因素。JavaScript 非常適合更簡單的應(yīng)用程序,因?yàn)樗梢栽谒衅脚_(tái)(跨平臺(tái))上運(yùn)行并且非常輕量級(jí)。另外,與JS的最小開銷相比,編譯TS代碼需要的時(shí)間和CPU資源對(duì)項(xiàng)目而言會(huì)更麻煩。
TypeScript 其實(shí)就是類型化的 JavaScript,它不僅支持 JavaScript 的所有特性,還在 JavaScript 的基礎(chǔ)上添加了靜態(tài)類型注解擴(kuò)展。從某種意義上來說,TypeScript 其實(shí)就是 JavaScript 的超集。在 TypeScript 中,我們不僅可以輕易復(fù)用 JavaScript 的代碼、最新特性,還能使用可選的靜態(tài)類型進(jìn)行檢查報(bào)錯(cuò),使得編寫的代碼更健壯、更易于維護(hù)。比如在開發(fā)階段,我們通過 TypeScript 代碼轉(zhuǎn)譯器就能快速消除很多低級(jí)錯(cuò)誤(如 typo、類型等)。
TypeScript基本語法
在語法層面,缺省類型注解的 TypeScript 與 JavaScript 完全一致。因此,我們可以把 TypeScript 代碼的編寫看作是為 JavaScript 代碼添加類型注解。在 TypeScript 語法中,類型的標(biāo)注主要通過類型后置語法來實(shí)現(xiàn)。
let num = 1;
示例中的語法同時(shí)符合 JavaScript 語法和 TypeScript 語法。而 TypeScript 語法與 JavaScript 語法的區(qū)別在于,我們可以在 TypeScript 中顯式聲明變量num僅僅是數(shù)字類型,也就是說只需在變量num后添加: number類型注解即可
let num: number = 1;
TypeScript原始類型
在 JavaScript 中,原始類型指的是非對(duì)象且沒有方法的數(shù)據(jù)類型,它包括 string、number、bigint、boolean、undefined 和 symbol 這六種 (null 是一個(gè)偽原始類型,它在 JavaScript 中實(shí)際上是一個(gè)對(duì)象,且所有的結(jié)構(gòu)化類型都是通過 null 原型鏈派生而來)。在 JavaScript 語言中,原始類型值是最底層的實(shí)現(xiàn),對(duì)應(yīng)到 TypeScript 中同樣也是最底層的類型。
1.字符串
在 JavaScript 中,我們可以使用string表示 JavaScript 中任意的字符串(包括模板字符串)
let firstname: string = 'Captain'; // 字符串字面量 let familyname: string = String('S'); // 顯式類型轉(zhuǎn)換 let fullname: string = `my name is ${firstname}.${familyname}`; // 模板字符串
2.數(shù)字
number類型表示 JavaScript 已經(jīng)支持或者即將支持的十進(jìn)制整數(shù)、浮點(diǎn)數(shù),以及二進(jìn)制數(shù)、八進(jìn)制數(shù)、十六進(jìn)制數(shù)
/** 十進(jìn)制整數(shù) */ let integer: number = 6; /** 十進(jìn)制整數(shù) */ let integer2: number = Number(42); /** 十進(jìn)制浮點(diǎn)數(shù) */ let decimal: number = 3.14; /** 二進(jìn)制整數(shù) */ let binary: number = 0b1010; /** 八進(jìn)制整數(shù) */ let octal: number = 0o744; /** 十六進(jìn)制整數(shù) */ let hex: number = 0xf00d; /** 如果使用較少的大整數(shù),那么我們可以使用bigint類型來表示 */ let big: bigint = 100n;
3.布爾值
boolean表示 True 或者 False
/** TypeScript 真香 為 真 */ let TypeScriptIsGreat: boolean = true; /** TypeScript 太糟糕了 為 否 */ let TypeScriptIsBad: boolean = false;
4.Symbol原始類型
我們可以通過Symbol構(gòu)造函數(shù),創(chuàng)建一個(gè)獨(dú)一無二的標(biāo)記
let sym1: symbol = Symbol(); let sym2: symbol = Symbol('42');
當(dāng)然,TypeScript 還包含 Number、String、Boolean、Symbol 等類型(注意區(qū)分大小寫)。
let sym: symbol = Symbol('a'); let sym2: Symbol = Symbol('b'); sym = sym2 // ok or fail? sym2 = sym // ok or fail? let str: String = new String('a'); let str2: string = 'a'; str = str2; // ok or fail? str2 = str; // ok or fail?
實(shí)際上,我們壓根使用不到 Number、String、Boolean、Symbol 類型,因?yàn)樗鼈儾]有什么特殊的用途。這就像我們不必使用 JavaScript Number、String、Boolean 等構(gòu)造函數(shù) new 一個(gè)相應(yīng)的實(shí)例一樣。
{ let mustBeNum = 1; } { let mustBeNum: number = 1; }
下面,我們對(duì)上面的示例稍做一下修改
{ let mustBeNum = 'badString'; } { let mustBeNum: number = 'badString'; }
如果變量所處的上下文環(huán)境特別復(fù)雜,在開發(fā)階段就能檢測(cè)出低級(jí)類型錯(cuò)誤的能力將顯得尤為重要,而這種能力主要來源于 TypeScript 實(shí)現(xiàn)的靜態(tài)類型檢測(cè)。
5.靜態(tài)類型檢測(cè)
在編譯時(shí)期,靜態(tài)類型的編程語言即可準(zhǔn)確地發(fā)現(xiàn)類型錯(cuò)誤,這就是靜態(tài)類型檢測(cè)的優(yōu)勢(shì)。在編譯(轉(zhuǎn)譯)時(shí)期,TypeScript 編譯器將通過對(duì)比檢測(cè)變量接收值的類型與我們顯示注解的類型,從而檢測(cè)類型是否存在錯(cuò)誤。如果兩個(gè)類型完全一致,顯示檢測(cè)通過;如果兩個(gè)類型不一致,它就會(huì)拋出一個(gè)編譯期錯(cuò)誤,告知我們編碼錯(cuò)誤,具體示例如下代碼所示:
const trueNum: number = 42; const fakeNum: number = "42"; // ts(2322) Type 'string' is not assignable to type 'number'.
TypeScript引用類型
1.數(shù)組
因?yàn)?TypeScript 的數(shù)組和元組轉(zhuǎn)譯為 JavaScript 后都是數(shù)組,所以這里我們把數(shù)組和元組這兩個(gè)類型整合到一起介紹,也方便你更好地對(duì)比學(xué)習(xí)。
2.數(shù)組類型(Array)
在 TypeScript 中,我們也可以像 JavaScript 一樣定義數(shù)組類型,并且指定數(shù)組元素的類型。
/** 子元素是數(shù)字類型的數(shù)組 */ let arrayOfNumber: number[] = [1, 2, 3]; /** 子元素是字符串類型的數(shù)組 */ let arrayOfString: string[] = ['x', 'y', 'z'];
3.元組類型(Tuple)
元組最重要的特性是可以限制數(shù)組元素的個(gè)數(shù)和類型,它特別適合用來實(shí)現(xiàn)多值返回。我們熟知的一個(gè)使用元組的場(chǎng)景是 React Hooks(關(guān)于 React Hooks 的簡介請(qǐng)點(diǎn)擊這里查看),例如 useState 示例:
import { useState } from 'react' function useCount() { const [count, setCount] = useState(0); return ....; }
4. any
any 指的是一個(gè)任意類型,它是官方提供的一個(gè)選擇性繞過靜態(tài)類型檢測(cè)的作弊方式。我們可以對(duì)被注解為 any 類型的變量進(jìn)行任何操作,包括獲取事實(shí)上并不存在的屬性、方法,并且 TypeScript 還無法檢測(cè)其屬性是否存在、類型是否正確。比如我們可以把任何類型的值賦值給 any 類型的變量,也可以把 any 類型的值賦值給任意類型(除 never 以外)的變量,如下代碼所示:
let anything: any = {}; anything.doAnything(); // 不會(huì)提示錯(cuò)誤 anything = 1; // 不會(huì)提示錯(cuò)誤 anything = 'x'; // 不會(huì)提示錯(cuò)誤 let num: number = anything; // 不會(huì)提示錯(cuò)誤 let str: string = anything; // 不會(huì)提示錯(cuò)誤
5. unknown
unknown 是 TypeScript 3.0 中添加的一個(gè)類型,它主要用來描述類型并不確定的變量。比如在多個(gè) if else 條件分支場(chǎng)景下,它可以用來接收不同條件下類型各異的返回值的臨時(shí)變量,如下代碼所示:
let result: unknown; if (x) { result = x(); } else if (y) { result = y(); } ...
6. void、undefined、null
考慮再三,我們還是決定把 void、undefined 和 null “三廢柴”特殊類型整合到一起介紹。依照官方的說法,它們實(shí)際上并沒有太大的用處,尤其是在本專欄中強(qiáng)烈推薦并要求的 strict 模式下,它們是名副其實(shí)的“廢柴”。首先我們來說一下 void 類型,它僅適用于表示沒有返回值的函數(shù)。即如果該函數(shù)沒有返回值,那它的類型就是 void。在 strict 模式下,聲明一個(gè) void 類型的變量幾乎沒有任何實(shí)際用處,因?yàn)槲覀儾荒馨?void 類型的變量值再賦值給除了 any 和 unkown 之外的任何類型變量。然后我們說說 undefined 類型 和 null 類型,它們是 TypeScript 值與類型關(guān)鍵字同名的唯二例外。但這并不影響它們被稱為“廢柴”,因?yàn)閱渭兟暶?undefined 或者 null 類型的變量也是無比雞肋,示例如下所示:
let undeclared: undefined = undefined; // 雞肋 let nullable: null = null; // 雞肋
undefined 的最大價(jià)值主要體現(xiàn)在接口類型上,它表示一個(gè)可缺省、未定義的屬性。這里分享一個(gè)稍微有點(diǎn)費(fèi)解的設(shè)計(jì):我們可以把 undefined 值或類型是 undefined 的變量賦值給 void 類型變量,反過來,類型是 void 但值是 undefined 的變量不能賦值給 undefined 類型。
const userInfo: { id?: number; } = {}; let undeclared: undefined = undefined; let unusable: void = undefined; unusable = undeclared; // ok undeclared = unusable; // ts(2322)
而 null 的價(jià)值我認(rèn)為主要體現(xiàn)在接口制定上,它表明對(duì)象或?qū)傩钥赡苁强罩怠S绕涫窃谇昂蠖私换サ慕涌?,比?Java Restful、Graphql,任何涉及查詢的屬性、對(duì)象都可能是 null 空對(duì)象,如下代碼所示:
const userInfo: { name: null | string } = { name: null };
7. never
never 表示永遠(yuǎn)不會(huì)發(fā)生值的類型,這里我們舉一個(gè)實(shí)際的場(chǎng)景進(jìn)行說明。首先,我們定義一個(gè)統(tǒng)一拋出錯(cuò)誤的函數(shù),代碼示例如下:
function ThrowError(msg: string): never { throw Error(msg); }
以上函數(shù)因?yàn)橛肋h(yuǎn)不會(huì)有返回值,所以它的返回值類型就是 never。同樣,如果函數(shù)代碼中是一個(gè)死循環(huán),那么這個(gè)函數(shù)的返回值類型也是 never,如下代碼所示。
function InfiniteLoop(): never { while (true) {} }
never 是所有類型的子類型,它可以給所有類型賦值,如下代碼所示。
let Unreachable: never = 1; // ts(2322) Unreachable = 'string'; // ts(2322) Unreachable = true; // ts(2322) let num: number = Unreachable; // ok let str: string = Unreachable; // ok let bool: boolean = Unreachable; // ok
8. object
object 類型表示非原始類型的類型,即非 number、string、boolean、bigint、symbol、null、undefined 的類型。然而,它也是個(gè)沒有什么用武之地的類型,如下所示的一個(gè)應(yīng)用場(chǎng)景是用來表示 Object.create 的類型。
declare function create(o: object | null): any; create({}); // ok create(() => null); // ok create(2); // ts(2345) create('string'); // ts(2345)
TypeScript 類型檢測(cè)無法做到絕對(duì)智能,畢竟程序不能像人一樣思考。有時(shí)會(huì)碰到我們比 TypeScript 更清楚實(shí)際類型的情況,比如下面的例子:
const arrayNumber: number[] = [1, 2, 3, 4]; const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts(2322)
小結(jié)
TypeScript 其實(shí)就是添加了類型注解的 JavaScript,它并沒有任何顛覆性的變動(dòng)。因此,學(xué)習(xí)并掌握 TypeScript 一定會(huì)是一件極其容易的事情。
到此這篇關(guān)于TypeScript與JavaScript的區(qū)別分析的文章就介紹到這了,更多相關(guān)TypeScript與JavaScript的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ts?類型體操?Chainable?Options?可鏈?zhǔn)竭x項(xiàng)示例詳解
這篇文章主要為大家介紹了ts?類型體操?Chainable?Options?可鏈?zhǔn)竭x項(xiàng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09TypeScript與JavaScript的區(qū)別分析
TypeScript可以使用JavaScript中的所有代碼和編程概念,TypeScript是為了使JavaScript的開發(fā)變得更加容易而創(chuàng)建的。推薦先精通JS的的前提下再學(xué)習(xí)TS,這樣更有利于同時(shí)學(xué)習(xí)兩門語言。2022-12-12TypeScript數(shù)據(jù)結(jié)構(gòu)棧結(jié)構(gòu)Stack教程示例
這篇文章主要為大家介紹了TypeScript數(shù)據(jù)結(jié)構(gòu)棧結(jié)構(gòu)Stack教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02PureScript與JavaScript中equality設(shè)計(jì)的使用對(duì)比分析
這篇文章主要為大家介紹了PureScript中的equality與JavaScript中的equality設(shè)計(jì)對(duì)比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11typescript快速上手的基礎(chǔ)知識(shí)篇
靜態(tài)類型的typescript與傳統(tǒng)動(dòng)態(tài)弱類型語言javascript不同,在執(zhí)行前會(huì)先編譯成javascript,因?yàn)樗鼜?qiáng)大的type類型系統(tǒng)加持,能讓我們?cè)诰帉懘a時(shí)增加更多嚴(yán)謹(jǐn)?shù)南拗?。注意,它并不是一門全新的語言,所以并沒有增加額外的學(xué)習(xí)成本2022-12-12jsf實(shí)現(xiàn)微信小程序簡潔登錄頁面(附源碼)
這篇文章主要介紹了實(shí)現(xiàn)微信小程序簡潔登錄頁面?,對(duì)于正在學(xué)習(xí)的小伙伴都有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-01-01TypeScript類型級(jí)別和值級(jí)別示例詳解
這篇文章主要為大家介紹了TypeScript類型級(jí)別和值級(jí)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開發(fā)
Typescript目前在前端,網(wǎng)站,小程序中的位置基本無可替代,同時(shí)也可以構(gòu)建完美的CLI應(yīng)用。在移動(dòng),桌面,后端方面,性能不是要求很高的情況下完全可以勝任,并且在區(qū)塊鏈,嵌入式,人工智能方面也開始茁壯成長。2022-12-12