TypeScript資料型別以及與JavaScript對比

介紹

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

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

一、資料型別與基礎資料型別

1.資料型別

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

2.基礎資料型別

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

3.二者關系

它們之間關系就是，資料型別是基礎資料型別的一個超集，

4.實體

JavaScript基礎資料型別的值都是不可改變的，以下是實體：

// 使用字串方法不會改變一個字串
var bar = "bar" //值"bar"是string型別，是js中基礎資料型別
console.log(bar);// baz
bar.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 = true
var 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.14
var decimals = -.2345789 // -0.23456789
var decimals = -3.12e+12  // -3.12*1012
var 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型別來標記這些變數，

例子:

//any
let 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 runtime
notSure.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);
}

// 推斷的回傳值型別為never
function fail() {
    return error("Something failed");
}

// 回傳never的函式必須存在無法達到的終點
function infiniteLoop(): never {
    while (true) {
    }
}

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

例子:

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

//當訪問一個已知索引的元素，會得到正確的型別：
console.log(x[0].substr(1)); // OK
console.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' 都有 toString
x[6] = true; // Error, 布爾不是(string | number)型別

五、TypeScript與JavaScript資料型別對照比

總結

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