TypeScript
最大的一个特点就是变量是强类型的
,也就是说,在声明变量的时候,我们必须给他一个类型。比如:字符串、数字、布尔,枚举…
TypeScript中的数据类型有:
- undefined;
- number:数值类型;
- string : 字符串类型;
- boolean: 布尔类型;
- enum:枚举类型;
- any : 任意类型(不建议用);
- void:空类型;
- Array : 数组类型;
- Tuple : 元组类型;
- Null :空类型。
Undefined类型
在js中当你定义了一个变量,但没有给他赋予任何值的时候,他就是Undefined类型。这可能和你以前学的语言稍有不同,其他语言会有个类型的默认值。
我们现在来看一个例子,比如我们要声明一个年龄的变量age,我们要使用数值类型,也就是Number,但是我们不给他任何的值,我们只是在控制台给它输出,然后我们来看结果。
新建demo01.ts文件,下入下面代码:
//声明数值类型的变量age,但不予赋值
var age:number
console.log(age)
写完后保存代码,进行运行任务,然后生成demo01.js,在终端中使用node demo01.js来进行查看运行结果。控制台输出了undefined,跟我们预想的一模一样。
Number类型
在TypeScript中,所有的数字都是Number类型,这不分是整数还是小数。比如下面我们声明一个年龄是18岁,身高是178.5厘米。
新建一个文件demo01_1.ts文件,写入下面代码:
var age:number = 18
var stature:number = 178.5
console.log(age)
console.log(stature)
然后执行转换,查看结果,我们可以在控制台看到结果已经顺利输出,没有任何意外。
在TypeScrip中有几种特殊的Number类型 我们需要额外注意一下:
- NaN:它是Not a Number 的简写,意思就是不是一个数值。如果一个计算结果或者函数的返回值本应该是数值,但是由于种种原因,他不是数字。出现这种状况不会报错,而是把它的结果看成了NaN。(这就好比我们去泰国外,找了一个大长腿、瓜子脸、水蛇腰的女神。房也开好了,澡也洗完了,发现跟我们的性别统一,我们只能吃个哑巴亏,你绝不会声张)
- Infinity :正无穷大。
- -Infinity:负无穷大。
string类型
由单引号或者双引号括起来的一串字符就是字符串。比如"哈哈", ‘呵呵’。看下面的代码:
demo01_2.ts
var hh: string = "哈哈"
console.log(hh)
这时候控制图就会乖乖的输出技术胖 哈哈
boolean布尔类型
做任何业务逻辑判断都要有布尔类型的参与,通过对与错的判断是最直观的逻辑处理。boolean类型只有两种值,true和false
。
var b:boolean = true
var c:boolean = false
enum 类型
这个世界有很多值是多个并且是固定的,比如:
- 世界上人的类型:男人、女人、中性
- 一年的季节:春、夏、秋、冬 ,有四个结果。
这种变量的结果是固定的几个数据时,就是我们使用枚举类型的最好时机:
demo01_3.ts
enum REN{ nan , nv ,yao}
console.log(REN.yao) //返回了2,这是索引index,跟数组很想。
如果我们想给这些枚举赋值,可以直接使用=,来进行赋值。
enum REN{
nan = '男',
nv = '女',
yao= '妖'
}
console.log(REN.yao) //返回了妖 这个字
any类型
一个写惯了前端的人,有时候不自觉的就分不清类型了。这是个不好的习惯,也是前端的痛,就因为这个原因,JavaScript也多次被人诟病说大型项目不适合用JavaScript。但是习惯一旦养成,改是需要时间和磨练的。TypeScript友好的为我们提供了一种特殊的类型any
,比如我们在程序中不断变化着类型,又不想让程序报错,这时候就可以使用any了。
var t:any =10
t = "hhhh"
t = true
console.log(t)
Null类型:
与 Undefined 类似,都代表空。Null 代表是引用类型为空。意义不大,但是有用。后续学习中会使用到。
引用类型-数组
初始化数组的两种方法:
声明数组跟声明一个普通变量是一样的,都是通过 var let 关键字实现的,只不过数组的类型说明符比较复杂而已。
1. 声明数组的2种方法
声明数组跟声明一个普通变量是一样的,都是通过 var let 关键字实现的,只不过数组的类型说明符比较复杂而已。
let arr1: number[] = [1, 2, 3, 4]
let arr2:Array<number> = [4, 4, 5]
2. 给数组赋值
数组是存储大量数据的集合,声明数组之后,需要给数组存储数据。这时候有两种方法:
- 字面量赋值法:直接使用“[ ]”对数组进行赋值。
- 构造函数赋值法:
字面量赋值:
//定义一个空数组,数组容量为0
let arr1:number[] = []
//定义一个数组时,直接给数组赋值
let arr2:number[] = [1,2,3,4,5]
//定义数组 的同事给数组赋值
let arr3:Array<string> = ['hh','哈哈','呵呵']
let arr4:Array<boolean> = [ true,false,false]
需要注意的是,在TypeScript中指定数据类型的数组只能存储同一类型的数组元素。
//报错! 必须存储number类型的数据
let arr5:number[] = [1,2,true]
构造函数赋值:
在 TypeScript 中使用 Array 这个引用类型来表示数组的,那么每一个数组都是 Array 类型的实例。那么,我们在创建数组的时候也可以使用构造函数来进行赋值。
let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string> = new Array('hh','哈哈','呵呵')
let arr4:Array<boolean> = new Array(true,false,false)
这两种方法,都可以给数组进行赋值,在实际开发中使用哪种方法都是可以的。
认识元组,一种特殊的数组
元组是一种特殊的数组,元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如,你可以定义一对值分别为string和number类型的元组。元组在实际开发中使用的非常少,大家了解一下就可以了,不做过多介绍。
//声明一个元祖类型
let x : [string,number]
//正确的初始化
x = ['hello',10]
//错误的初始化方法
x = [10,'hello']
TypeScript中其它的数组知识跟JavaScript中的一样,我再这里就不磨磨唧唧的浪费大家时间了。感兴趣的可以写一下JS中的数组方法。