【TypeScript】从零开始玩转TypeScript - TypeScript中的基础数据类型

前言

小伙伴们大家好。上一篇文章我们对typescript已经有了一个初步的了解：掌握了什么是typescript，如何使用typescript以及什么时候使用typescript。今天我们将一起来学习一下typescript中的数据类型。

前面文章已经提到：TypeScript是JavaScript的一个超集，既然是超集那么JavaScript中有的数据类型在TypeScript肯定也是存在的，同时作为超集的TypeScript，肯定也不仅仅是只有JavaScript中的那几种数据类型，那么除了这些数据类型还是有哪些呢，下面我们就来一起扒一扒ts中的数据类型。

TypeScript中的数据类型

TypeScript支持与JavaScript几乎相同的数据类型，并在此基础上又扩展了一些其它类型了。那我们就先来回顾一下JavaScript中的数据类型，同时也是TypeScript支持的类型：

• number：数值类型，无论是整数值还是浮点数值，乃至二进制，八进制、十进制和十六进制，统统都是number类型
• string：字符串（文本）类型，用双引号(")或单引号(’)或es6中的模板字符串均可表示字符串
• boolean：布尔类型，值只有两个true和false
• null：表示一个空值，一般用于释放一些变量引用的对象，表示变量不再指向任何地址
• undefined：是所有没有赋值的变量的默认值，如果一个变量只声明没赋值，则默认值就是undefined
• symbol：symbol是es6中新增的一个定义唯一值的一种类型，通过symbol类型的变量的值都是唯一的。
• object：对象类型（表示非原始类型），在堆内存中
• array：数组类型
• function：函数类型
• RegExp：正则类型

除了上述这些typescript和JavaScript共有常用类型外，TypeScript还扩展了一些其它类型：

• tuple：元组类型，可以用来表示一个已知数据类型和长度的数组，数组中的类型不一定是相同的，但在赋值时，值和类型一定要一一匹配并且赋值的长度与定义时的长度保持一致。否则会报错（将在后面进行举例说明）
• enum：枚举类型，枚举类型一般用于定义一组数值，方便开发者使用和后期维护，枚举值默认从0开始编号依次递增，当然我们也可手动指定它的初始值，也可以为每个枚举指定我们想要的值，默认情况下是从初始值（默认值为0）开始递增
• any：表示任意类型，有些时候我们可能还不确定是什么数据类型，有可能是string，有可能是number，也有可能是其它任何类型等等，这个时候就可以声明为any类型，其实这个跟我们平时声明JavaScript变量时就没什么区别了，也是在赋值后才能决定一个变量是什么类型
• void：表示没有类型，与any相反void表示没有任何类型，一般一个函数没有返回值时可以声明为void类型，如果给一个变量定义为void类型，那么这个变量只能赋值为null或undefined，一般变量声明为void没有任何意义。
• never：表示永远不存在的值的类型，never是其它类型的子类型，一般用于总是抛出异常或者永远不会有返回值的函数的返回值类型，比如：如果一个函数总是抛出异常，那么这时这个函数的返回值类型就可以定义为never

各数据类型代码演示

• number

let x: number = 3; //十进制
let y: number = 0b1010; // 二进制
let z: number = 0xf00d // 十六进制
let a: number = '123' //报错，type 'string' is not assignable to type 'number'

• string

let str: string = "abc";
let hello: string = 'hello world';
let name: string = `hello: ${
      
      str}`
let abc: string= 123 //报错，type 'number' is not assignable to type 'string'

• boolean

let isTrue: boolean = true;

• null null类型是任何类型的子类型，因此可以赋值给任何类型

let x: number = null;
let y: string = null;
let z: boolean = null;

• undefined undefined与null类型类似也是任何类型的子类型，因此可以赋值给任何类型，并且undefined和null类型的变量可以互相赋值

let x: number = undefined;
let y: string = undefined;
let z: boolean = undefined;
let a: null = undefined;
let b: undefined = null;

• symbol 唯一值类型

let x: symbol= Symbol('abc');
let y: symbol = Symbol('abc');;
console.log(x == y); //false

• object：对象类型。所有的引用数据类型都可赋值给object类型的变量，包括null和undefined

let obj: object = {
    
    }
let fun: object = function(){
    
    }
let arr: object = [];
let reg: object = /^abc/;

• array：数组类型

//声明数组的方式有两种
// 1. 通过 "数据类型[]" 的形式
let arr: string[] =  ['1','2'] //string类型的数组，数组中的值必须都是string类型
// 2. 通过 "Array<数据类型>" 的形式
let arrNum:Array<number> = [1, 2] //number类型的数组，数组中的元素必须都是number类型

let arrAny:Array<any> = [1,'2',true]//任意类型的数组，数组的元素可以是任意类型

• tuple元组，元组时长度和类型固定的数组

let arr:[string, number] = ["1", 1];
let arr2:[string, number] = [1,"1"]; //报错,类型不匹配
let arr3:[string, number] = ["1","1"]; //报错,类型不匹配
let arr4:[string, number] = ["1",1,true]; //报错，长度不匹配

• enum 枚举类型，枚举类型一般用于定义一组功能描述相似的值或者固定的常量值，比如定义一组颜色值。枚举类型的值与其它类型都不一样，枚举类型需要用 enum 关键字来定义

• 使用 enum 关键字定义枚举，如：enum Color {Red, Green, Blue}
• 使用枚举时用 枚举名.xxx来获取枚举值, 如：Color.Red
• 枚举值是一个number类型，枚举值对应的是枚举描述所在的索引，默认从0开始递增
• 枚举的值可以手动指定，并通过枚举名.xxx来获取
• 还可以通过**枚举名[枚举值]**的形式来获取枚举描述，该描述为字符串类型，如：Color[0] => Red

//先定义一个枚举
enum Color {
    
    Red, Green, Blue}
//使用枚举
let c: Color = Color.Green;
console.log(c)// 输出 1
//其中 Red、Green和Blue为描述，枚举的值是一个number类型，在该案例中枚举值是3个描述对应的索引，默认是从0开始递增，可以手动指定初始值
//因为Green对应的索引值为1 所以输出c的结果为1

// 手动指定首个枚举值，其它自增
enum Color {
    
    Red=1, Green, Blue}//让枚举值从1开始递增
console.log(Color.Green); //输出 2

//手动指定所有枚举值
enum Color {
    
    Red=1, Green=3, Blue=5}
console.log(Color.Green); //输出 3

//  根据枚举值获取枚举描述
enum Color {
    
    Red, Green, Blue}
console.log(Color[1]);// "Green"

• any：任意类型，当还不确定一个值的数据类型时可以使用any

let a: any;
a = 3;
a = "abc";
a = true

• void：没有类型，一般多用于一个函数没有返回值的情况，如果给一个变量定义为void类型是没有意义的，因为只能赋值为null或undefined

function helloworl():void{
    
    
	console.log('hello world')
}
let a:void = 1;//报错
let b:void = null;

• never 表示永远不存在的值的类型，一般用于总是抛出异常或者永远不会有返回值的函数的返回值类型

function myException(msg: string):never{
    
    
	throw new Error(msg)
}

function diedLoop():never{
    
    
	while(true){
    
    
	}
	return true;
}

TypeScript中的类型断言

类型断言就类似于一种数据类型转换，比如说我们在定义一个变量时还不知道它是什么类型，所以就指定了一个any类型，但是在后期使用时，根据变量的值我们很明显就能够确定它是什么类型，这个时候就可以使用类型断言了。
类型断言的特点：

• 类型断言不进行数据检查，因为TypeScript会认为我们已经做了必要的检查
• 类型断言只在编译阶段生效，不会影响运行时
• 类型断言有两种方式：
  • 通过尖括号的形式：<数据类型>变量名
  • 通过as关键字：变量名 as 数据类型

let something: any = "this is a zifuchuan";
let len:number = (<string>something).length;
//或者
let len:number = (something as string).length;

总结

本文我们学习了TypeScript中的常用的数据类型，并总结了每个数据类型的特点以及给出了具体使用的代码。最后还学到了一个新知识：类型断言。相信有JavaScript基础的小伙伴学起来应该并不难，如果接触过后端语言的话则更有助于对TypeScript的学习和理解。

好了小伙伴们，本次分享就到这里了，喜欢的小伙伴欢迎点赞留言加关注哦！