TypeScript是微軟開發(fā)的一個(gè)開源的編程語(yǔ)言，通過在JavaScript的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。由于JavaScript語(yǔ)言本身的局限性，難以勝任大型項(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í)兩門語(yǔ)言。

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è)代碼庫(kù)上進(jìn)行協(xié)作和交互。因此，最好在項(xiàng)目一開始就使用TypeScript。
但是你如果喜歡像Ember.js或Glimmer.js這樣的框架，那你就不會(huì)喜歡TypeScript，這些框架的首選是JavaScript。

TypeScript 與 JavaScript 的區(qū)別

TypeScript 是 JavaScript 的超集，擴(kuò)展了 JavaScript 的語(yǔ)法，因此現(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無(wú)需任何修改，TypeScript 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。

TypeScript 可處理已有的 JavaScript 代碼，并只對(duì)其中的 TypeScript 代碼進(jìn)行編譯。

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

復(fù)雜性是一個(gè)需要考慮的關(guān)鍵因素。JavaScript 非常適合更簡(jiǎn)單的應(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基本語(yǔ)法

在語(yǔ)法層面，缺省類型注解的 TypeScript 與 JavaScript 完全一致。因此，我們可以把 TypeScript 代碼的編寫看作是為 JavaScript 代碼添加類型注解。在 TypeScript 語(yǔ)法中，類型的標(biāo)注主要通過類型后置語(yǔ)法來實(shí)現(xiàn)。

let num = 1;

示例中的語(yǔ)法同時(shí)符合 JavaScript 語(yǔ)法和 TypeScript 語(yǔ)法。而 TypeScript 語(yǔ)法與 JavaScript 語(yǔ)法的區(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 語(yǔ)言中，原始類型值是最底層的實(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ú)一無(wú)二的標(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)類型的編程語(yǔ)言即可準(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 的簡(jiǎn)介請(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 還無(wú)法檢測(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 類型的變量也是無(wú)比雞肋，示例如下所示：

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ū)傩钥赡苁强罩?。尤其是在前后端交互的接口，比?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è)無(wú)法做到絕對(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論