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数据类型对照比

TypeScript#null✅ ✅bigint✅✅string#✅✅ ##symbol#✅ ##✅✅✅✅undefined✅Object❌ ##Array✅❌ (js不是) ✅ (ts是)

資料型別	JavaScript	TypeScript	JavaScript
#是否基礎類型
✅
✅
✅
		✅	✅
##boolean
	number	##✅	#✅
		✅	✅
		✅	#✅
✅

---

tuple(元組[])

❌

✅

✅

enum❌✅

✅###############any#########❌## ####✅######✅###############void#########❌######✅###################################################################################################################################################################################################################################### #✅###############never#########❌######✅######✅################################################################################################################################################ #############總結############以上舉例介紹了JavaScript與TypeScript的資料型別，以及什麼是基礎資料型別；簡單介紹了變數及字面量，ES6/ES2015新特性範本字面；最後還有總結了JavaScript與TypeScript資料類型的對照表。 ###############相關免費學習推薦：#########javascript#########（影片）######### #

以上是Typescript基礎類型以及與Javascript比較講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！