学习TypeScript，笔记一：TypeScript的简介与数据类型

该文章用于督促本身学习TypeScript，做为学笔记进行保存，若是有错误的地方欢迎指正

 2019-03-27  16:50:03

---

 

1、什么是TypeScript?

TypeScript是javascript的超集，在ts中可使用全部的js代码，并对js进行了扩展，包括类型效验，数据类型，接口等

如图所示，TypeScript包含了javascript并进行延伸

 

2、准备工做

在说TypeScript以前先说一下如何让ts编译为js代码

首先安装 typescrpt，

npm install -g typescript 

将ts编译为js代码，在命令行中输入

tsc index.ts

但不能每次写完代码都输入一遍 tsc 来进行编译吧？那也太麻烦了，咱们能不能直接保存就自动编译呢？能够的，下面是使用VScode的自动编译方法

首先在文件根目录下打开命令行输入，

tsc --init

 

输入之后会在文件中出现一个 tsconfig.json 文件

 

在文件中将 "outDir" : "./"打开，改成 "outDir" : "./js" ，表示编译后的 .js 文件 的存放位置

 

 

在 VScode 的工具栏中选择：终端 --> 运行任务

 

在工具栏弹出框里选择：

tsc:监视 - tsconfig.json

 

这样就配置完成了，能够在文件中试一试，保存ts文件后，会在文件中生成一个名为js的文件，里面就是编译后的 同名.js 文件，在html中引入js，就能够进行测试了

 

3、TypeScript的数据类型

1）布尔值类型（boolean）

使用 ts 的高级工具 类型注解来建立一个变量 bol ，要求 变量bol 的值得类型为 boolean 类型，不然会报错

 

2）数字类型（number）

支持全部浮点数，并支持二进制、八进制、十进制、十六进制的写法

 

3）字符串类型（string）

支持双引号 " "、单引号 ' ' 和模板字符串 ` `

 

4）数组类型（Array）

建立模板字符串有两种方式：

第一种：在变量名的类型后面加上 [ ] ，表示数组内的元素都是同一个类型：

 

第二种：是数组泛型，使用Array<元素类型>

 

5）元组类型（Tuple）

元组也是数组的一种，ts的数组若是使用使用类型注解来建立，数组的元素就具备效验的功能，可是未免太单一，而使用元组的方式建立数组，会稍微灵活那么一点点

使用元组来建立：

浏览器输出为：

在图示中能够看到，元组能够规定前两个元素的类型，下标为 0 的元素必须为 string，下标为 1 的元素必须为 number，然后的元素则会使用联合类型替代，能够是 string 或 number ，我尝试了隔空添加元素，下标为 2 的元素 显示为 empty（空），在遍历这个元组的时候，empty不会被遍历出来，只会遍历到 “10”  1  “123” ,对应的下标为0,1,3

图示中的报错是vscode插件的报错，不会影响运行

 

6）枚举类型（enum）

枚举类型能够是对状态码的标识，如 0 表明成功支付 ，1 表明失败支付，2 表明取消订单，3 表明未支付 这样的状态码标识不易读，可使用枚举的方式来标识

看到枚举类型 Status 的输出，就明白了为何能够获得 Status[1] 为success 了

枚举类型也能够不赋值，默认从 0 开始，一旦手动赋值后，前面的值不变，后面的值会依次递增

 

7）任意类型（any）

在实际使用中咱们也许并不想让 ts 进行类型注解，就可使用 any类型 ，any类型的好处在于，当咱们不肯定这个值为何类型的时候，用 any类型注解 声明后的变量，他的类型是不肯定的，从而使得这个变量能够调用任何不一样类型的方法，可是编译器不会检查

 

 

可使用 any 来进行数组的类型注解，不限制数组的元素类型

 

 8）无类型（void）

void类型能够说与any类型彻底相反，当函数没有返回值时返回的类型就是 void 类型，通常来讲声明一个 void类型 的变量没有什么用，void 类型只能被赋值，undefined 和 null 

在 typescript 中 默认状况下 undefined 和 null 是全部类型的子类型，能够将他们赋值给 number 类型的变量

当指定了严格模式 --strictNullChecks 后，undefined 和 null 只能赋值给他自己

 

9）never类型（never）

never类型表示永远不存在的值的类型，

引入官方文档的示例图

never类型是全部类型的子类型，但never类型自己没有子类型或任何类型都不能赋值给他，连any都不行，never只能赋值给never

 

9）Object类型

object类型表示非原始类型，就是除了 boolean，number，string，array，undefined，null 以外的类型

参考官方给的图片

图片示例的意思我理解的是这样的：

建立一个create函数，参数 o 的类型注解表示，参数的类型为 object 或者 null ，函数create的返回值为 void类型

接着调用函数，发现参数为 {prop:0} 和 null 是能够的

参数为 数字 42，字符串 "string"，布尔值 false，无类型 undefined，都不能够

 

补充：类型断言

类型断言使用在告诉编译器，你已彻底肯定这个值的类型，编译器将会跳过数据检查，不影响运行

类型断言有两种写法

第一种：使用尖括号

 

第二种：使用 as 语法

 

注意：在 TypeScript 中使用 JSX，只能用 as语法 的类型断言