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

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

文章目錄

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

介紹

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

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

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

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

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

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

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

3.二者關(guān)系

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

4.實例

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

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

二、字面量與變量

1.字面量(Literals)

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

2.變量(Variable)

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

3.實例

JavaScript字面量賦值變量實例：

//變量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 (十進制, 基數(shù)為10)var num = 015 //0001 and -0o77 (八進制, 基數(shù)為8)var num = 0x1123 //0x00111 and -0xF1A7 (十六進制, 基數(shù)為16或"hex")var num = 0b11 //0b0011 and -0b11 (二進制, 基數(shù)為2)//4.浮點數(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.對象字面量 (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），模板字符串提供了一些語法糖來幫你構(gòu)造字符串。這與Perl、Python、Shell還有其他語言中的字符串插值（string interpolation）的特性非常相似。除此之外，你可以在通過模板字符串前添加一個tag來自定義模板字符串的解析過程，這可以用來防止注入攻擊，或者用來建立基于字符串的高級數(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 是一種弱類型或者說動態(tài)語言。這意味著你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。這也意味著你可以使用同一個變量保存不同類型的數(shù)據(jù)：以下先介紹一下JavaScript的數(shù)據(jù)類型。

• 最新的 ECMAScript 標準定義了8種數(shù)據(jù)類型：

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

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

  2.引用類型:

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

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

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

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

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

1.enum(枚舉):是對JavaScript標準數(shù)據(jù)類型的一個補充像C#等其它語言一樣，使用枚舉類型可以為一組數(shù)值賦予友好的名字。默認情況下，從0開始為元素編號。

例子:

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

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

例子:

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

在對現(xiàn)有代碼進行改寫的時候，any類型是十分有用的，它允許你在編譯時可選擇地包含或移除類型檢查。 你可能認為 Object有相似的作用，就像它在其它語言中那樣。 但是 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)你只知道一部分數(shù)據(jù)的類型時，any類型也是有用的。 比如，你有一個數(shù)組，它包含了不同的類型的數(shù)據(jù)：：let list: any[] = [1, true, "free"];list[1] = 100;值是2

3.void:某種程度上來說，void類型像是與any類型相反，它表示沒有任何類型。 當(dāng)一個函數(shù)沒有返回值時，你通常會見到其返回值類型是 void

例子:

function warnUser(): void {     console.log("This is my warning message");}//聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：let unusable: void = undefined;

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

例子:

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

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

例子:

// Declare a tuple typelet x: [string, number];// Initialize itx = ['hello', 10]; // OK// Initialize it incorrectlyx = [10, 'hello']; // Error//當(dāng)訪問一個已知索引的元素，會得到正確的類型：console.log(x[0].substr(1)); // OKconsole.log(x[1].substr(1)); // Error, 'number' does not have 'substr'//當(dāng)訪問一個越界的元素，會使用聯(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ù)類型對照比

總結(jié)

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

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