01_TypeScript中的数据类型

豆沙小饼干
229 阅读6分钟

前言

这是一个系列的笔记，记录自己学习TypeScript的过程，使用的时候方便查看。我为什么学习TyPeScript？公司项目是使用TypeScript来写的，自己之前写js的突然转到TypeScript有些不适应，同时项目经验比较少，脑子比较笨，所以找了视频课程来学习。但没有哪个程序员是用来拼智商的，冲冲冲就完了。

数据类型

​ 数据类型在js里面就有了，但是在TypeScript里面为了使代码更规范，更有利于维护，在变量声明里面就有了类型声明。在TypeScript中主要给我们提供的数据类型有：布尔类型、数字类型、字符串类型、数组类型、元组类型(tuple),属于数组的一种类型、枚举类型、任意类型、 null和undefined、void类型、never类型

1.布尔类型(boolean)

// 在es5中布尔类型的写法
let flag = true;
console.log(flag);

​ 在ts中代码必须指定类型,中途也不能更改类型，比如这里定义的是boolean类型，但是不能改成数字或者字符串等其他类型，但是在true和false之间可以相互转换

let tsflag:boolean = true; //这里声明tsflag的变量类型是布尔类型，后面tsflag变量的值只能在true和false之间切换，不能改成数字、字符串、数组等类型
tsflag = false;//这里更改布尔类型tsflag变量的值是可以的
console.log(tsflag);//false
let tsflag1:boolean = false;
tsflag1 = 1; //这里将tsflag1改成1，是不对的。但是依旧可以编译成js，有输出。但但是在ts里面会报错
tsflag1 = 'string'; //同上

2.数字类型(number)

let num1:number = 123; //声明num1变量类型是number数字类型，初始化值123
num1 = 456;//更改num1的值，在数字范围内是可以改变的，但是不能在类型之间进行切换
// num1 = 'aaa'; //错误。更改了num1的类型是字符串，即使js编译没有问题，但是ts的编辑器里面也会有相应的报错提示
console.log(num1); //123

3.字符串类型(string)

let str:string = "this is str"; //声明str变量类型是string字符串类型
// str = 123;
console.log(str); //this is str

4.数组类型(array)

​ 我们先看一下es5里面如何定义数组的，可以看到这个数组里面既有数字也有字符串，在es5里面是可以的

let arr = [1,2,3,'4']; 
console.log(arr); //[1,2,3,'4']

​ ts中定义数组有两种方式。无论是哪种方式，数组里面只能是数字，不能还有字符串、对象等类型的数据

  • 第一种方式

    let arr1:number[] = [11,22,33]; //第一种方式,定义数组arr1，数组内所有内容都是number类型，如果里面有一个字符串，是不可以的，可以编译通过，但是报错
console.log(arr1); //[11,22,33]

  • 第二种方式

    let arr2:Array<number> = [111,222,333]; 
console.log(arr2); //[111,222,333]

5.元组类型(tuple)

元组类型tuple ，属于数组的一种类型，上面定义数组的两种方法只能是数字，但是出现了数组里面有字符串也有数字的情况上面定义数组的方式是不正确的，这里就需要元组来完成了。但是也有局限性：这种方法只能给每个位置定义一下类型，中间一旦有数据类型发生变动，还是会报错。这里是定义的数组只能是第一个值的类型是数字类型，第二个值的类型是字符串类型

let arr3:[number,string]=[123,"this is string"]// 这种方法只能给每个位置定义一下类型，中间一旦有数据类型发生变动，还是会报错。这里是定义的数组只能是第一个值的类型是数字类型，第二个值的类型是字符串类型
console.log(arr3);

6.枚举类型

枚举类型，平时计算的时候都是通过数值来计算的，但是在计算机系统里面也只识别数值类的计算，不能识别字符串，比如性别，星期几。想要计算机识别这些，就需要自己定义特定的数字来代表星期或者性别

// 比如：1-success，2-error；1-男，0-女;还有一些返回的状态码。这里赋值使用的是 = 号
enum Flag {
    success = 1,
    error = 0
};
let f:Flag = Flag.error;
console.log(f); //0
let t:Flag = Flag.success;
console.log(t); //1
//如果枚举的时候没有赋值，就是下标，下标是从0开始的
enum Sex {
    male,
    famale
}
let sex:Sex = Sex.male;
console.log(sex); //0

//如果枚举的时候有的赋值了，有的没有赋值，就会按照赋值的方式自动累加，这里male没有赋值，famale赋值了4，mmale没有赋值，但是枚举之后会自动累加famale赋值之后的值，所以就变成了5
enum Sex2 {
    male,
    famale=4,
    mmale
}
let sex2:Sex2 = Sex2.mmale;
console.log(sex2);

7.任意类型(any)

任意类型(any),数据类型没有具体定义为哪种，可以是任意类型。前几种变量声明的时候，只要声明了变量，变量的类型就不能改变了。any类型可以在中间可以自由转换

let numany:any = 'this is any'; //声明numany的类型是any任意类型，初始化的时候类型是字符串
numany = false; //赋值之后变成布尔类型
numany = true; //布尔类型
numany = 123; //最终赋值类型是数组类型
console.log(numany); //123

8.null和undeined

无论是null还是undefined，其他类型never类型的子类型

//undefined 在es5中是声明了变量但是没有赋值会出现undefined，同样在ts里面也是一样的
let numun1:undefined;
console.log(numun1); //undefined

let numun2:number | undefined; //numun2的类型既可以是number也可以是undefined类型
numun2 = 123;
console.log(numun2); //123

//null类型
let numany2:number | null; //numany2的类型既可以是number也可以是null类型
numany2 = null;
console.log(numany2);

//当一个元素可能是number类型 也可能是null或者undefined的时候我们可以将元素类型设置为any也可以分别进行或的关系来声明变量类型
let aa:any = 123;
console.log(aa);
//也可以使用 ｜ 来定义 什么类型或什么类型或什么类型
let aaa:number | null | undefined;
aaa = null;
console.log(aaa);

9.void类型

void类型，表示没有任何类型，一般用于定义方法的时候该方法没有返回值

//es5的定义方法,这里的run方法没有返回值，只有一个log输出值
function run() {
    console.log("run");
}
run(); //调用run方法会打印run

function runvoid():void { //ts定义了runvoid方法，没有返回值，只有一个log输出值
    console.log("runvoid");
}
runvoid(); //调用runvoid方法会打印runvoid方法

10.never类型

//never类型：其他类型包括null和undefined的子类型，代表从来不会出现的值。
//意味着声明元素类型的变量只能被never类型所赋值
let never:undefined;
never = undefined;

let aanull:null;
aanull = null;
avatar
文章
阅读
粉丝