欢迎光临散文网 会员登陆 & 注册

TypeScript 入门基础

2023-03-20 11:37 作者:千锋前端  | 我要投稿


● 上一章, 我们讲了 TS 的编译和初步使用

● 现在我们就开始正式进入 TS 的学习之旅


基础类型

●  我们先来对我们最基础的数据类型进行一些限制


布尔类型

● 当前这个 boo 变量的数据类型被限制为了 布尔类型

● 一旦将来给这个变量赋值的时候, 只要不是布尔类型, 就会提示你类型错误


数值类型

● ts 内的 number 类型都是按照浮点数存储的, 同时也支持十六进制, 八进制, 二进制等其他进制表示

● 给 num 变量限制为了 number 类型, 只要你给 num 赋值的是 number 类型数据就没问题, 其他不行

字符串类

● 给 str 变量限制为了 string 数据类型

多个基础类型

● 我们也可以通过 ( | ) 来给一个变量设置多个数据类型

● 这个 foo 变量就被限制为 string 或者 boolean 类型的数据, 可以接受这两种数据类型


数组类型

定义方式1

● 定义了一个 list 变量, 限制为一个数组的同时, 这个数组只能接受 number 数据

定义方式2

● 这种方式是采用的泛型的方式进行定义, 泛型后面我们会详细说

● 这种方式定义的数组, 也可以让数组内包含多种数据类型

● 表示这个数组内可以添加 number 或者 string 类型的数据

元组类型

基础定义

● 元组( Tuple ) : 是 TS 中给出的一个概念, 其实就是一个已知元素数量和数据类型的数组

元组是 TS 的一个概念, 在 JS 内没有元素这个概念

在 JS 中

数组是不限制长度的, 可以随意添加多少数据

TS 的元组, 编译以后, 其实就是 JS 中的数组

所以是不会被真正限制长度的

在 TS 中

元组也只是一个形式上的 已知元素数量 和 数据类型 的数组

不是说超过限定长度就会报错

只是通过元组的方式, 建议你该数组的长度和类型

毕竟 TS 也只是在开发中给 JS 的各种数据添加上类型限制而已

● 将 list 限定为一个元组

○ 该元组建议有两个数据

○ [0] 位置数据是一个 number 类型数据

○ [1] 位置数据是一个 string 类型数据

○ 初始化的时候, 就必须直接赋好值

● 一定要注意一个问题, 就是元组的值顺序不能变

可选值

● 我们可以使用 问号( ? ) 来决定某个值为选填项

● 这个时候就是就是对 number 和 string 数据做了一个选填限制

● 该索引对应位置可以有值可以没有值

○ 但是一定要注意, 顺序不能变哦


元组越界

● 刚才我们说了, 元组其实本质上还是数组

○ 数组其实是没有长度限制的

○ 所以元组只是建议你不要超出长度, 但是其实超出去也没事

● 所以超出限制长度的数据, 就不会有过多的限制了

○ 你所以写的数据类型都可以

● 主要不在初始化的时候, 给出越界数据, 后面可以向数组里面追加数据

● 而且追加出来的多余的数据, 可以是 number 类型, 也可以是 string 类型

● 并且也没有了顺序的限制

● 但是其他数据类型还是不行

Any 类型

● 有些时候, 我们对于某个数据, 没有办法确定是什么类型, 因为数据源可能是来自用户输入, 或者某些第三方库得来的, 所以我们没办法在一开始限制其数据类型

● 但是从 TS 的角度上来说, 每一个数据都要限制一次数据类型

● 所以, 给出了一个 Any(任意类型)

● foo 这个变量可以接受任何数据类型, 就相当于没有限制

● 但是对于一个严谨的程序员来说, 还是不建议经常性的使用 any, 因为这样的话 TS 的意义就不在了

空类型

void

● 是一个和 any 类型刚好完全相反的类型, 它表示什么都没有

● 我们可以给一个变量设置为 void 类型, 但是没有人会这么做, 因为没有任何意义

● 当你给 foo 设置为 void 类型以后, 这个变量就只能接受 undefined 和 null 类型数据了

● 其他的都不行

● void 还有一个地方就是用在 函数的返回值

○ 当这个函数没有返回值的时候, 你见到的类型限制就会是 void

● 当然, 我们也可以倒推这个结果

● 也就是说, 当你给一个函数的返回值设置为 void 以后

● 那么这个函数就不能写返回值了

Never

●  这个类型表示的是哪些永不存在的值的类型, 应用的地方相对比较少

● 一般如果用 Never 去描述一个函数的返回值, 那么这个函数就不能有任何返回出现, 也就是说这个函数必须不能正常结束, 所以我们就需要在该函数内让函数代码报错, 就是手动抛出异常, 或者让函数永不结束

Undefined 和 Null

● 他们两个和 void 很想, 本身在 TS 内用处不是很大

● 分别对应 undefined 和 null 两个数据, 一般用不到


● 但是 undefined 和 null 可以作为任何类型的子类型出现

● 也就是你设置其他类型, 也可以填写 undefined 或者 null

● 此时 n 被限制为 number 类型, 但是目前 n 的值是 undefined, 也没有问题

● 因为 undefined 可以是 number 的子类型

object 类型

● 这是一个特殊的类型限制, 不仅仅是代表 对象数据类型

● 表示的是 非基础数据类型 以外的所有类型

● 也就是除number,string,boolean,symbol,null 或 undefined 之外的类型


TypeScript 入门基础的评论 (共 条)

分享到微博请遵守国家法律