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	是否基础类型
null	✅	✅	✅
bigint	✅	✅	✅
string	✅	✅	✅
symbol	✅	✅	✅
boolean	✅	✅	✅
number	✅	✅	✅
undefined	✅	✅	✅
Object	✅	✅	❌
Array	✅	✅	❌ (js不是) ✅ (ts是)
tuple(元组[])	❌	✅	✅
enum	❌	✅	✅
any	❌	✅	✅
void	❌	✅	✅
never	❌	✅	✅

---

总结

以上举例介绍了JavaScript与TypeScript的数据类型，以及什么是基础数据类型；简单介绍了变量及字面量，ES6/ES2015新特性模板字面量；最后还有总结了JavaScript与TypeScript数据类型的对照表。

相关免费学习推荐：javascript（视频）

以上是Typescript基础类型以及与Javascript对比讲解的详细内容。更多信息请关注PHP中文网其他相关文章！