博客

前言

忠告:
不要学习TypeScript, 因为它的学习成本很低
不要学习TypeScript, 因为它能减少团队无效沟通
不要学习TypeScript, 因为它能让你的代码更健壮
不要学习TypeScript, 因为它能帮助你快速掌握其它后端语言
不要学习TypeScript, 因为你会迷恋它

今日份干货分享ts的基本数据类型哦，本文主要涉及ts的基本数据类型的概念及使用语法。需要的小伙伴及得点赞收藏哦～

如果你是ts刚起步，还不明白为什么要学习ts的话，可以

移步这里

进行ts初识学习呀～

正文

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

1、布尔值

语法：let isDone: boolean = false
isDone = true;
// isDone = 2 // error：boolean类型不能获得类型为number

2、数字类型

语法：let a1: number = 10 // 十进制
//支持二进制、十进制、八进制、十六进制

3、字符串

语法：let name:string = 'tom'
//和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串

4、undefined和null

let u: undefined = undefined
let n: null = null
//TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null
//默认情况下 null 和 undefined 是所有类型的子类型，就是说你可以把 null 和 undefined 赋值给 其他类型的变量

5、数组和元组

• 数组：

//语法1：let 变量名：数据类型[]= [值1、值2、值3]
let list1: number[] = [1, 2, 3]
//语法2泛型数组:let 变量名：Array<数据类型>= [值1、值2、值3]
let list2: Array<number> = [1, 2, 3]

//注意问题：数组定义后，里面的数据类型必须和定义数组时候的类型是一致的，否则会有错误信息提示，也不会编译通过

• 元组：一个已知元素的数量和元素的类型的数组，各元素的类型不必相同

元组：在定义数组的时候，**数组的类型和数据的个数**一开始就已经限定。
let t1: [string, number]
t1 = ['hello', 10] // OK

//当访问一个已知索引的元素，会得到正确的类型，并可以使用该类型的方法
ex：console.log（t1[0].substring(1)）

//注意问题：元组类型在使用的时候，数组的类型及位置及个数应该与在定义的时候的数据类型个数及位置是一致的

6、可枚举的类型

枚举的每个数据值都可以叫做元素，各个元素都有自己的编号，编号是从0开始的，会依次递增1.

enum Color {
//元素可以是中文的数据值，但是不推荐
  Red,//Red=10，元素可以设置值，不设置值默认是从0开始的，依次递增
  Green,//11 默认是1
  Blue//12 默认是2
}

// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 1
console.log(myColor, Color.Red, Color.Blue)// 1 ，0，2 

//可以有枚举的值找到其对应的名字

7、any类型和void类型

• any类型
  
  当一个数组中要储存多个数据，个数不确定，类型也不确定，可以用any定义数组

语法：let 变量名：any = 值

• void类型：没有任何类型
  
  某种程度上来说，void 类型像是与 any 类型相反。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

在函数声明的时候，小括号后面使用：void，代表的是该函数没有任何返回值
语法：function showmsg（）：void {
	console.log("哈哈哈")
}
showmsg()

8、联合类型

表示取值可以为多种类型的一种
语法：let str :string|number

//需求1、定义一个函数得倒一个数字或者字符串形式的值
function getstr (str:string|number):string{
	return str.tostring()
}
console.log(1233)
console.log("123")

//需求2:定义一个函数得倒一个数字或者字符串值的长度
function getstr (str:string|number):number{
	//return str.tostring().length//方法1:代码合理性不高：如果str本身是string类型，没有必要调用tostring方法
  if(str.length){
     //return str.length//此时编译器会爆红，因为它不确定你的str究竟是number或者是string类型，此时就需要类型断言
    return（str as string）.length//类型断言
     }else{
    return str.tostring()
  }
}
console.log(1233)
console.log("123")

9、类型断言

//通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”，TypeScript 会假设你，程序员，已经进行了必须的检查
/*
类型断言的两种方式：
语法1: <类型>值
语法2:值 as 类型  tsx中只能用这种方式
*/

/语法1: <类型>值/
function getstr (str:string|number):number{
  if((<string>str).length){
			return (<string>str).length
     }else{
    return str.tostring().length
  }
}
console.log(getstr(1233))
console.log(getstr("12345"))

/语法2:值 as 类型  tsx中只能用这种方式/
function getstr (str:string|number):number{
  if((str as string).length){
			return (str as string).length
     }else{
    return str.tostring().length
  }
}
console.log(getstr(1233))
console.log(getstr("12345"))

10、类型推断

类型推断: TS会在没有明确的指定类型的时候推测出一个类型
/*
类型推断的两种情况：
1、定义变量时赋值了, 推断为对应的类型
2、定义变量时没有赋值, 推断为any类型
*/


//情况1:
/定义变量时赋值了, 推断为对应的类型 /
let b9 = 123 // number
// b9 = 'abc' // error

//情况2:
/定义变量时没有赋值, 推断为any类型 /
let b10  // any类型
b10 = 123
b10 = 'abc'

以上就是typescript关于基本数据类型的全部内容啦。

除了js的常用的类型之外，ts新增的元组、枚举、any及联合类型都是很有用的类型，希望大家在学习的过程中可以勤加练习(也是希望我自己可以不断练习)，

大家加油呀～