一.ts的基本数据类型
ts的基本数据类型和js的一样,语法上在变量后面加了type类型,Number类型支持八进制和二进制。其他的和js一样。下面我们来敲敲代码。
// 基本数据类型语法 Number类型 // let 变量名:格式 = 值; 比如let a:Number = 10; // Number类型 let a1:number = 10; let a2:number = 0b1010 // 二进制 let a3:number = 0o12; // 八进制 let a4:number = 0xa // 十六进制 console.log(a1); //10 console.log(a2); //10 console.log(a3); //10 console.log(a4); //10 // 字符串类型 模板字符串也是可以用的 let str1:string = "张杰"; let str2:string = "我"; let str3:string = "爱"; let str4:string = "你"; console.log(`${str1}${str2}${str3}${str4}`); //张杰我爱你 // 字符串和数字的拼接 let str:string = "小呆瓜" let a:number = 2; console.log(str+a); // 小呆瓜2 // 布尔类型 let aFlag:boolean = true; console.log(aFlag); // true // ts需要注意的点 // 声明的时候用的数据类型和你赋值时这个值的数据类型要保持一致,否则就会报错 // 比如let str:string="大宝贝";str = 10(不允许); // undefined和null类型 let u:undefined=undefined; let n:null = null; console.log(u,n); // undefined null // undefined 和 null可以作为其他类型的子类型,意思就是可以赋值给其他类型 // 比如 a1 = null; str1 = undefined; console.log(a1,str1); // null undefined
二.ts的数组和元组
ts的数组有三种定义方式,元组是其中的一种定义方式,看代码帮助理解。
// 数组类型: // 数组定义方式1:let 变量名:数据类型[]=[值1,值2,值3] // 注意:值1,值2,值3必须符合定义的数据类型 let arr1:number[]=[1,2,3]; // 数组定义方式2:let 变量名:Array<数据类型>=[值1,值2,值3]; 泛型的写法 let arr2:Array<string>=["小甜甜","zhangjie"]; // 元组类型 // 变量名:[数据类型1,数据类型2,数据类型3]=[值1,值2,值3]; // 注意:定义的数据类型和位置与元素的数据类型及位置一一对应 let arr3:[number,string,boolean]=[100,'zhangjie',true];
三.ts的枚举类型
ts的枚举类型是对js基本类型的补充,如果一些变量常用且固定,可以使用枚举类型,枚举里面的每个值可以称为元素,每个元素默认从0开始为编号,依次递增加一。(可以手动赋值)枚举中的元素可以是汉字,但不推荐。
// ts的枚举类型 // 对js基本类型的补充,如果一些变量常用且固定,可以使用枚举类型 // 枚举里面的每个值可以称为元素,每个元素默认从0开始为编号,依次递增加一 enum Color{ red, green, blue, } console.log(Color.red,Color.green,Color.blue); // 0 1 2 console.log(Color[0],Color[1],Color[2]); // red green blue // 枚举中的元素可以是汉字,但不推荐 enum Ae{ 男=100, 女=1000 } console.log(Ae.女,Ae.男); // 1000 100
四.any类型和void类型
any类型大家都懂,ts的any类型就是js,它可以包容所有数据类型,但是它编译的时候也不会报错,跟js一样。当我们不知道这个值是什么类型并且我们想保存这个变量我们就会用any来定义变量。相信很多初学者跟我一样,刚开始写vue3项目时用的any挺多的。
void类型是当函数没有返回值时我们会用到void类型,他的值就是undefined
function strMsg():void{ // return "a"; // 报错 "a"; } console.log(strMsg()); // undefined
五.Object类型
ts的object类型和js的一样
function getObj(obj:object){ console.log(obj); } getObj({name:"张杰",age:18});
六.基础类型之联合类型和类型断言
联合类型也是属于ts的基本数据类型,一般用于函数中,可以允许传入多种类型的形参
// 联合类型:一个变量可以有多种数据类型 function shoe(str:number|string):string{ return str.toString(); } console.log(shoe("123")); // 字符串123 console.log(shoe(123)); // 字符串123
类型断言:我自己知道我在干神魔,请相信我,OK?在编译阶段起作用,告诉编译器我是谁,我在那,你别哔哔,看代码演示哈哈
语法 <数据类型>值 (值 as 数据类型)
// 联合类型:一个变量可以有多种数据类型 function shoe(str:number|string):number{ if((<string>str).length){ // return str.length; // 报错 因为编译器不知道这个形参到底是什么类型 return (str as string).length; }else{ return str.toString().length; } } console.log(shoe("1234")); // 4 console.log(shoe(123)); // 3
类型推断:编译器会根据你第一次初始化的值预测出数据类型,如果只声明未赋值,那么你的数据类型就是any类型。