TypeScript數(shù)據(jù)類型以及與JavaScript對(duì)比

免費(fèi)學(xué)習(xí)推薦：javascript視頻教程

文章目錄

• TypeScript數(shù)據(jù)類型以及與JavaScript對(duì)比
• 介紹
• 一、數(shù)據(jù)類型與基礎(chǔ)數(shù)據(jù)類型
• • 1.數(shù)據(jù)類型
  • 2.基礎(chǔ)數(shù)據(jù)類型
  • 3.二者關(guān)系
  • 4.實(shí)例
• 二、字面量與變量
• • 1.字面量(Literals)
  • 2.變量(Variable)
  • 3.實(shí)例
  • 4.模板字面量（template literals）
• 三、JavaScript的數(shù)據(jù)類型
• 四、TypeScript的數(shù)據(jù)類型
• 五、TypeScript與JavaScript數(shù)據(jù)類型對(duì)照比
• 總結(jié)

介紹

本文簡(jiǎn)單介紹了TypeScript的數(shù)據(jù)類型以及與JavaScript的數(shù)據(jù)類型，基礎(chǔ)數(shù)據(jù)類型是什么？與數(shù)據(jù)類型的關(guān)系？列出了對(duì)照表比較TypeScript的數(shù)據(jù)類型以及JavaScript的數(shù)據(jù)類型。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、數(shù)據(jù)類型與基礎(chǔ)數(shù)據(jù)類型

1.數(shù)據(jù)類型

數(shù)據(jù)類型其實(shí)是一種編程語(yǔ)言內(nèi)置的數(shù)據(jù)結(jié)構(gòu)，各種編程語(yǔ)言之間都有自己內(nèi)置的數(shù)據(jù)結(jié)構(gòu)，各有自己的特點(diǎn)。它們是用來(lái)構(gòu)建其他數(shù)據(jù)結(jié)構(gòu)。

2.基礎(chǔ)數(shù)據(jù)類型

基本類型（基本數(shù)值、基本數(shù)據(jù)類型）是一種既非對(duì)象也無(wú)方法的數(shù)據(jù)(但是JavaScript有基本類型包裝對(duì)象，是對(duì)象也有方法。例如，基礎(chǔ)數(shù)據(jù)類型number的包裝對(duì)象Number 是經(jīng)過(guò)封裝的能讓你處理數(shù)字值的對(duì)象)。多數(shù)情況下，基本類型直接代表了最底層的語(yǔ)言實(shí)現(xiàn)。所有基本類型的值都是不可改變的。但需要注意的是，基本類型本身和一個(gè)賦值為基本類型的變量的區(qū)別。變量會(huì)被賦予一個(gè)新值，而原值不能像數(shù)組、對(duì)象以及函數(shù)那樣被改變。

3.二者關(guān)系

它們之間關(guān)系就是，數(shù)據(jù)類型是基礎(chǔ)數(shù)據(jù)類型的一個(gè)超集。

4.實(shí)例

JavaScript基礎(chǔ)數(shù)據(jù)類型的值都是不可改變的，以下是實(shí)例：

// 使用字符串方法不會(huì)改變一個(gè)字符串var bar = "bar" //值"bar"是string類型，是js中基礎(chǔ)數(shù)據(jù)類型console.log(bar);// bazbar.toUpperCase();console.log(bar);// baz//值"bar"本身不會(huì)改變，賦值行為可以給變量bar賦予一個(gè)新值基本類型的值"BAR"，而不是改變它。bar = bar.toUpperCase();console.log(bar);// BAR// 數(shù)組也是一種數(shù)據(jù)類型，但是使用數(shù)組方法可以改變一個(gè)數(shù)組，因此不是基本數(shù)據(jù)類型var foo = [];console.log(foo);               // []foo.push("plugh");console.log(foo);               // ["plugh"]

二、字面量與變量

1.字面量(Literals)

字面量是由語(yǔ)法表達(dá)式定義的常量；或，通過(guò)由一定字詞組成的語(yǔ)詞表達(dá)式定義的常量。在JavaScript中，你可以使用各種字面量。這些字面量是腳本中按字面意思給出的固定的值，而不是變量。（譯注：字面量是常量，其值是固定的，而且在程序腳本運(yùn)行中不可更改。）

2.變量(Variable)

在應(yīng)用程序中，使用變量來(lái)作為值的符號(hào)名。變量的名字又叫做標(biāo)識(shí)符，其需要遵守一定的規(guī)則。一個(gè) JavaScript 標(biāo)識(shí)符必須以字母、下劃線（_）或者美元符號(hào)（$）開(kāi)頭；后續(xù)的字符也可以是數(shù)字（0-9）。因?yàn)?JavaScript 語(yǔ)言是區(qū)分大小寫(xiě)的，所以字母可以是從“A”到“Z”的大寫(xiě)字母和從“a”到“z”的小寫(xiě)字母

3.實(shí)例

JavaScript字面量賦值變量實(shí)例：

//變量var anyname//var num是變量 = 1是number類型的字面量var num = 1/** *	javascrip中各種數(shù)據(jù)類型的字面量賦值 *///1.數(shù)組字面量(Array literals)var animal = ["dog","cat","mouse"]//2.布爾字面量 (Boolean literals)var isTrue = truevar isTrue = false//3.整數(shù) (Integers)var num =0 //117 and -345 (十進(jìn)制, 基數(shù)為10)var num = 015 //0001 and -0o77 (八進(jìn)制, 基數(shù)為8)var num = 0x1123 //0x00111 and -0xF1A7 (十六進(jìn)制, 基數(shù)為16或"hex")var num = 0b11 //0b0011 and -0b11 (二進(jìn)制, 基數(shù)為2)//4.浮點(diǎn)數(shù)字面量 (Floating-point literals)var pi = 3.14var decimals = -.2345789 // -0.23456789var decimals = -3.12e+12  // -3.12*1012var decimals = .1e-23    // 0.1*10-23=10-24=1e-24//5.對(duì)象字面量 (Object literals)function say(name){ 	console.log("Hello",name)}var obj = {name:"World!",hello:say}obj.hello(obj.name) // Hello World//6.字符串字面量 (String literals)var foo = "foo"var bar = 'bar'var multiline = "one line  				another line "

4.模板字面量（template literals）

在ES2015/ES6中，還提供了一種模板字面量（template literals），模板字符串提供了一些語(yǔ)法糖來(lái)幫你構(gòu)造字符串。這與Perl、Python、Shell還有其他語(yǔ)言中的字符串插值（string interpolation）的特性非常相似。除此之外，你可以在通過(guò)模板字符串前添加一個(gè)tag來(lái)自定義模板字符串的解析過(guò)程，這可以用來(lái)防止注入攻擊，或者用來(lái)建立基于字符串的高級(jí)數(shù)據(jù)抽象。
以下是例子：

// String interpolation 字符串插值 使用 `xxx ${插值變量}`var name = "World"var str = `Hello ${name}`console.log(str)// Multiline strings`In JavaScript this is  not legal.`

三、JavaScript的數(shù)據(jù)類型

JavaScript 是一種弱類型或者說(shuō)動(dòng)態(tài)語(yǔ)言。這意味著你不用提前聲明變量的類型，在程序運(yùn)行過(guò)程中，類型會(huì)被自動(dòng)確定。這也意味著你可以使用同一個(gè)變量保存不同類型的數(shù)據(jù)：以下先介紹一下JavaScript的數(shù)據(jù)類型。

• 最新的 ECMAScript 標(biāo)準(zhǔn)定義了8種數(shù)據(jù)類型：

  1.七種基本數(shù)據(jù)類型:

  1.Boolean(布爾值):有2個(gè)值分別是(true 和 false).
  2.null:一個(gè)表明 null 值的特殊關(guān)鍵字。 JavaScript 是大小寫(xiě)敏感的，因此 null 與 Null、NULL或變體完全不同。
  3.undefined:和 null 一樣是一個(gè)特殊的關(guān)鍵字，undefined 表示變量未賦值時(shí)的屬性。
  4.Number(數(shù)字)，整數(shù)或浮點(diǎn)數(shù)，例如：42 或者3.14159。
  5.BigInt(任意精度的整數(shù)) ( 在 ES2020 中新添加的類型)，可以安全地存儲(chǔ)和操作大整數(shù)，甚至可以超過(guò)數(shù)字的安全整數(shù)限制。
  6.String(字符串)，字符串是一串表示文本值的字符序列，例如：“Howdy” 。
  7.Symbol(在 ES6/ES2015 中新添加的類型).。一種實(shí)例是唯一且不可改變的數(shù)據(jù)類型。

  2.引用類型:

  1.對(duì)象(Object)、數(shù)組(Array)、函數(shù)(Function)，數(shù)組，函數(shù)是對(duì)象的一種

雖然這些數(shù)據(jù)類型相對(duì)來(lái)說(shuō)比較少，但是通過(guò)他們你可以在程序中開(kāi)發(fā)有用的功能。對(duì)象（Objects）和函數(shù)（functions）是這門語(yǔ)言的另外兩個(gè)基本元素。你可以把對(duì)象當(dāng)作存放值的一個(gè)命名容器，然后將函數(shù)當(dāng)作你的程序能夠執(zhí)行的步驟。

四、TypeScript的數(shù)據(jù)類型

TypeScript幾乎支持所有的JavaScript的數(shù)據(jù)類型，也有特定的數(shù)據(jù)類型比如枚舉，Any,Void,Never等。也就是說(shuō)TypeScript的數(shù)據(jù)類型是JavaScript的一個(gè)超集。TypeScript通過(guò)在JavaScript的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。TypeScript通過(guò)TypeScript編譯器或Babel轉(zhuǎn)譯為JavaScript代碼，可運(yùn)行在任何瀏覽器，任何操作系統(tǒng)。

1.除了JavaScript七種基本數(shù)據(jù)類型，還有以下:

1.enum(枚舉):是對(duì)JavaScript標(biāo)準(zhǔn)數(shù)據(jù)類型的一個(gè)補(bǔ)充像C#等其它語(yǔ)言一樣，使用枚舉類型可以為一組數(shù)值賦予友好的名字。默認(rèn)情況下，從0開(kāi)始為元素編號(hào)。

例子:

//枚舉enum Color {Red, Green, Blue}let c: Color = Color.Green;console.log(c) // 1//你也可以手動(dòng)的指定成員的數(shù)值。 例如，我們將上面的例子改成從 1開(kāi)始編號(hào)：enum Color {Red = 1, Green, Blue}let c: Color = Color.Green;console.log(c) // 2//枚舉類型提供的一個(gè)便利是你可以由枚舉的值得到它的名字。 例如，我們知道數(shù)值為2，但是不確定它映射到Color里的哪個(gè)名字，我們可以查找相應(yīng)的名字：enum Color {Red = 1, Green, Blue}let colorName: string = Color[2];console.log(colorName);  // 顯示'Green'因?yàn)樯厦娲a里它的值是2

2.any:有時(shí)候，我們會(huì)想要為那些在編程階段還不清楚類型的變量指定一個(gè)類型。 這些值可能來(lái)自于動(dòng)態(tài)的內(nèi)容，比如來(lái)自用戶輸入或第三方代碼庫(kù)。 這種情況下，我們不希望類型檢查器對(duì)這些值進(jìn)行檢查而是直接讓它們通過(guò)編譯階段的檢查。 那么我們可以使用 any類型來(lái)標(biāo)記這些變量。

例子:

//anylet notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a boolean

在對(duì)現(xiàn)有代碼進(jìn)行改寫(xiě)的時(shí)候，any類型是十分有用的，它允許你在編譯時(shí)可選擇地包含或移除類型檢查。 你可能認(rèn)為 Object有相似的作用，就像它在其它語(yǔ)言中那樣。 但是 Object類型的變量只是允許你給它賦任意值 – 但是卻不能夠在它上面調(diào)用任意的方法，即便它真的有這些方法：

例子:

let notSure: any = 4;notSure.ifItExists(); // okay, ifItExists might exist at runtimenotSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)let prettySure: Object = 4;prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.//當(dāng)你只知道一部分?jǐn)?shù)據(jù)的類型時(shí)，any類型也是有用的。 比如，你有一個(gè)數(shù)組，它包含了不同的類型的數(shù)據(jù)：：let list: any[] = [1, true, "free"];list[1] = 100;值是2

3.void:某種程度上來(lái)說(shuō)，void類型像是與any類型相反，它表示沒(méi)有任何類型。 當(dāng)一個(gè)函數(shù)沒(méi)有返回值時(shí)，你通常會(huì)見(jiàn)到其返回值類型是 void

例子:

function warnUser(): void {     console.log("This is my warning message");}//聲明一個(gè)void類型的變量沒(méi)有什么大用，因?yàn)槟阒荒転樗x予undefined和null：let unusable: void = undefined;

4.never:never類型表示的是那些永不存在的值的類型。 例如， never類型是那些總是會(huì)拋出異?；蚋揪筒粫?huì)有返回值的函數(shù)表達(dá)式或箭頭函數(shù)表達(dá)式的返回值類型； 變量也可能是 never類型，當(dāng)它們被永不為真的類型保護(hù)所約束時(shí)。
never類型是任何類型的子類型，也可以賦值給任何類型；然而，沒(méi)有類型是never的子類型或可以賦值給never類型（除了never本身之外）。 即使 any也不可以賦值給never。

例子:

//下面是一些返回never類型的函數(shù)：// 返回never的函數(shù)必須存在無(wú)法達(dá)到的終點(diǎn)function error(message: string): never {     throw new Error(message);}// 推斷的返回值類型為neverfunction fail() {     return error("Something failed");}// 返回never的函數(shù)必須存在無(wú)法達(dá)到的終點(diǎn)function infiniteLoop(): never {     while (true) {     }}

5.Tuple:元組類型允許表示一個(gè)已知元素?cái)?shù)量和類型的數(shù)組，各元素的類型不必相同。 比如，你可以定義一對(duì)值分別為 string和number類型的元組。

例子:

// Declare a tuple typelet x: [string, number];// Initialize itx = ['hello', 10]; // OK// Initialize it incorrectlyx = [10, 'hello']; // Error//當(dāng)訪問(wèn)一個(gè)已知索引的元素，會(huì)得到正確的類型：console.log(x[0].substr(1)); // OKconsole.log(x[1].substr(1)); // Error, 'number' does not have 'substr'//當(dāng)訪問(wèn)一個(gè)越界的元素，會(huì)使用聯(lián)合類型替代：x[3] = 'world'; // OK, 字符串可以賦值給(string | number)類型console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toStringx[6] = true; // Error, 布爾不是(string | number)類型

五、TypeScript與JavaScript數(shù)據(jù)類型對(duì)照比

總結(jié)

以上舉例介紹了JavaScript與TypeScript的數(shù)據(jù)類型，以及什么是基礎(chǔ)數(shù)據(jù)類型；簡(jiǎn)單介紹了變量及字面量，ES6/ES2015新特性模板字面量；最后還有總結(jié)了JavaScript與TypeScript數(shù)據(jù)類型的對(duì)照表。

相關(guān)免費(fèi)學(xué)習(xí)推薦：javascript（視頻）