这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战
简介
- 在本章中，我们要介绍在
TS中常见类型的基本使用
原始值
- string、number、boolean、null、undefined、sbmbol、bigint
const str: string = "hello ts";
const num: number = 999;
const flag: boolean = false;
const _null: null = null;
const _undefined: undefined = undefined;
const _symbol:symbol = Symbol()
const _bigint :bigint =9007199254740991n
注意
Bigint是以字母n结尾,并没有写错，当然还有这种写法Bigint(9007199254740991)
数组
示例一
const arr: number[] = [1,2,3]
示例二
const arr: Array<number> = [1,2,3]
说明
- 要指定数组
[1,2,3]的类型，可以使用number[]语法 - 这个语法适用于任何类型，比如
string[]、boolean[] - 你还可以看到
Array<number>这样的写法,当我们学习泛型的时候，会解锁这种写法更多的姿势
元祖
介绍
- 元祖
Tuple属于另一种数组的类型，他能确切的知道包含多少个元素，以及索引下标对应的数据类型 使用场景 - 在使用地图API的时候，使用经纬度坐标来标记位置信息 示例
const position:[number, number] = [116.20, 39.56]
如图所示，我们设置了北京的经纬度，这样就可以通过元祖Tuple类型清晰的看到 position 属性中包含的数据个数和类型
- 错误示例
示例中我们定义了长度为2，类型都为
number的数组，但我们给定了3个初始化值，那么就会报错提示
联合类型
介绍
- 在上边的数组介绍中我们有这样的写法
number[]，表示当前数组中值的数据类型是number - 当我们的数组中既有
number类型又有string类型的时候就该联合类型出场了 示例
const arr: (number | string)[] = [1, 2, 3, "d", "d", "d", "d"];
说明
- 如果我们对
(number | string)[]类型的数组添加一个boolean类型的数据，就会提示报错
类型别名
介绍
- 可以为任意类型起别名 示例一
const arr: (number | string)[] = [1, 2, 3, "d", "d", "d", "d"];
const arr1: (number | string)[] = [1, 2, 3, "h", "x", "d", "m"];
说明
- 在上边我们定义了俩个数组，他们的类型都是
(number | string)[]这样的联合类型，本着代码精简化(偷懒少些代码)的原则,可以通过起别名的方式实现下 示例二
type Arr = (number | string)[]
const arr: Arr = [1, 2, 3, "d", "d", "d", "d"];
const arr1: Arr = [1, 2, 3, "h", "x", "d", "m"];
说明
- 通过关键字
type设置类型别名 - 在需要引用的地方直接使用
:类型别名的变量就可以了 - 大大提高了我们编码效率(
摸鱼时间)
函数
介绍
- 函数是
js中传递数据的主要方式，在ts中我们可以指定函数参数的类型和返回值的类型 示例一
function add(x:number, y:number) {
return x + y
}
add(1,2)
示例二
function add(x:number, y:number):number {
return x + y
}
add(1,2)
说明
- 写法和直接声明一个基本数据类型的类型是一样的
- 示例二中再函数上加了
:number，表示 当前函数的返回值类型是number - 这样，函数的入参类型我们都显示的定义了
number类型，返回值也显式的定义了number
- 当我们把鼠标挪到
add函数的调用上的时候，TS就会推导出当前函数的类型，非常方便 注意
- 只要我们指定了函数的入参数据类型，不显式的设置函数的返回值类型
ts会自动推导出返回值的类型，非常方便
any
介绍
any属于ts中的特殊类型，如果你不想TS检查你的代码，那么你就可以使用它 示例
let _any: any = 0
_any = "hello"
说明
- 当我们用
any修饰变量之后，TS就失去了类型保护 - 不建议使用
写在最后
- TS系列文章会由浅入深的逐步带你领略TS的魅力
- 欢迎大家评论，指出不完善的地方
