Typescript基礎類型以及與Javascript對比講解

TypeScript數據類型以及與JavaScript對比

免費學習推薦：javascript視頻教程

文章目錄

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

介紹

本文簡單介紹了TypeScript的數據類型以及與JavaScript的數據類型，基礎數據類型是什么？與數據類型的關系？列出了對照表比較TypeScript的數據類型以及JavaScript的數據類型。

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

一、數據類型與基礎數據類型

1.數據類型

數據類型其實是一種編程語言內置的數據結構，各種編程語言之間都有自己內置的數據結構，各有自己的特點。它們是用來構建其他數據結構。

2.基礎數據類型

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

3.二者關系

它們之間關系就是，數據類型是基礎數據類型的一個超集。

4.實例

JavaScript基礎數據類型的值都是不可改變的，以下是實例：

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

二、字面量與變量

1.字面量(Literals)

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

2.變量(Variable)

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

3.實例

JavaScript字面量賦值變量實例：

//變量var anyname//var num是變量 = 1是number類型的字面量var num = 1/** *	javascrip中各種數據類型的字面量賦值 *///1.數組字面量(Array literals)var animal = ["dog","cat","mouse"]//2.布爾字面量 (Boolean literals)var isTrue = truevar isTrue = false//3.整數 (Integers)var num =0 //117 and -345 (十進制, 基數為10)var num = 015 //0001 and -0o77 (八進制, 基數為8)var num = 0x1123 //0x00111 and -0xF1A7 (十六進制, 基數為16或"hex")var num = 0b11 //0b0011 and -0b11 (二進制, 基數為2)//4.浮點數字面量 (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），模板字符串提供了一些語法糖來幫你構造字符串。這與Perl、Python、Shell還有其他語言中的字符串插值（string interpolation）的特性非常相似。除此之外，你可以在通過模板字符串前添加一個tag來自定義模板字符串的解析過程，這可以用來防止注入攻擊，或者用來建立基于字符串的高級數據抽象。
以下是例子：

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

三、JavaScript的數據類型

JavaScript 是一種弱類型或者說動態語言。這意味著你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。這也意味著你可以使用同一個變量保存不同類型的數據：以下先介紹一下JavaScript的數據類型。

• 最新的 ECMAScript 標準定義了8種數據類型：

  1.七種基本數據類型:

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

  2.引用類型:

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

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

四、TypeScript的數據類型

TypeScript幾乎支持所有的JavaScript的數據類型，也有特定的數據類型比如枚舉，Any,Void,Never等。也就是說TypeScript的數據類型是JavaScript的一個超集。TypeScript通過在JavaScript的基礎上添加靜態類型定義構建而成。TypeScript通過TypeScript編譯器或Babel轉譯為JavaScript代碼，可運行在任何瀏覽器，任何操作系統。

1.除了JavaScript七種基本數據類型，還有以下:

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

例子:

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

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

例子:

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

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

例子:

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'.//當你只知道一部分數據的類型時，any類型也是有用的。 比如，你有一個數組，它包含了不同的類型的數據：：let list: any[] = [1, true, "free"];list[1] = 100;值是2

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

例子:

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

4.never:never類型表示的是那些永不存在的值的類型。 例如， never類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型； 變量也可能是 never類型，當它們被永不為真的類型保護所約束時。
never類型是任何類型的子類型，也可以賦值給任何類型；然而，沒有類型是never的子類型或可以賦值給never類型（除了never本身之外）。 即使 any也不可以賦值給never。

例子:

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

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

例子:

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

五、TypeScript與JavaScript數據類型對照比

總結

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

相關免費學習推薦：javascript（視頻）