Bootstrap

TypeScript开发(二) 数据类型

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中的数组方法。

;