Typescript基礎類型以及與Javascript對比示例

小編給大家分享一下Typescript基礎類型以及與Javascript對比示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

1.數(shù)據類型

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

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

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

3.二者關系

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

4.實例

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

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

二、字面量與變量

1.字面量(Literals)

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

2.變量(Variable)

在應用程序中，使用變量來作為值的符號名。變量的名字又叫做標識符，其需要遵守一定的規(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ù)據類型的字面量賦值
*///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），模板字符串提供了一些語法糖來幫你構造字符串。這與Perl、Python、Shell還有其他語言中的字符串插值（string interpolation）的特性非常相似。除此之外，你可以在通過模板字符串前添加一個tag來自定義模板字符串的解析過程，這可以用來防止注入攻擊，或者用來建立基于字符串的高級數(shù)據抽象。
以下是例子：

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

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

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

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

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

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

  2.引用類型:

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

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

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

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

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

1.enum(枚舉):是對JavaScript標準數(shù)據類型的一個補充像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里的哪個名字，我們可以查找相應的名字：enum Color {Red = 1, Green, Blue}let colorName: string = Color[2];console.log(colorName);  // 顯示'Green'因為上面代碼里它的值是2

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

例子:

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

在對現(xiàn)有代碼進行改寫的時候，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'.//當你只知道一部分數(shù)據的類型時，any類型也是有用的。 比如，你有一個數(shù)組，它包含了不同的類型的數(shù)據：：let list: any[] = [1, true, "free"];list[1] = 100;值是2

3.void:某種程度上來說，void類型像是與any類型相反，它表示沒有任何類型。 當一個函數(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類型，當它們被永不為真的類型保護所約束時。
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//當訪問一個已知索引的元素，會得到正確的類型：console.log(x[0].substr(1)); // OKconsole.log(x[1].substr(1)); // Error, 'number' does not have 'substr'//當訪問一個越界的元素，會使用聯(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ù)據類型對照比

以上是“Typescript基礎類型以及與Javascript對比示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！