本文章为 Typescript 系列文章. 旨在利用碎片时间浅显易懂的快速入门 Typescript. 或重新温故 Typescript 查漏补缺
作为一个使用 Typescript 很久很久很久的人来说, 真真切切感受到了 Typescript 的魔法, 大大提高了代码的可维护性. 方便代码重构(一个月重构一次, 半年重构6次,不是在重构的路上就是在重构……)
文章列表:
- [一] Typescript 基本类型
- [二] Typescript 枚举
- [三] Typescript 接口
- ……
基本类型
- javascript 类型 :
Boolean Number String Array Funciton Object Symbol undefined null
- 补充类型
void any never 元祖 枚举 高级类型
基本语法
(变量/函数): type [type 为上面的数据类型 ]
最简单声明的几种类型如下:
let bool: boolean = true
let num: number = 111
let str: string = 'aaa'
let s1: stmbol = Symbol()
复制代码
数组类型
有2种方式声明, 一种在元素类型后接上 [] , 一种使用数组泛型, Array<元素类型>.
let arr1: number[] = [1,2,3]
let arr2: Array<number>= [1,2,3]
复制代码
如果我们希望数组里既有 number , 又有 string , 只需要在泛型中加上 <number | string> 如下:
let arr2: Array<number | string> = [1,2,3,'4']
复制代码
或者使用元祖的方式
元祖
作用: 限定了数组的类型和个数. 比如下面的, 第一个必须为 number ,第二个必须为 string , 只能有2个值, 不能超过2个
let tuple: [number , string] = [1 , '2'] // 可以给该元祖添加新元素, 但不能 “越界” 访问
复制代码
不能越界访问, 直接看例子
let tuple: [number , string] = [1 , '2']
tuple.push('3'); //正常push
tuple[2] //报错, 因为越界访问了
复制代码
undefined null
如果一个值声明了 undefined , 则不能赋值给其他类型的值. 看例子
let x:undefined = undefined; //正常
let x:undefined = ‘1’; //报错
复制代码
同理, undefined 和 null 也不能赋值给其他类型. 如下:
let h: number = undefined; //报错, 如果 strictNullChecks 为 true
复制代码
但是在项目中, 偶尔需要使用到 undefined 和 指定类型的场景. 比如接口未我回来时, 可能需要使用 undefined 作为默认值, 等接口回来后再赋值. 如何支持这张场景?
- 在 tsconfig.json 中将 strictNullChecks 设置为 false 即可. 不推荐此方法
- 使用联合类型 推荐
let num: number | undefined | null = 111
复制代码
void
一个没有任何返回的函数, 就用 void , 没啥好说的...
function warnUser(): void {
}
复制代码
any 类型
刚接触typescript的时候, 很容易就满处 any 大法, 一写 any , 啥报错都没了. 但是如果都使用 any ,那就没必要使用 ts 了 😄
never 类型
一般很少使用, 函数抛出错误 或 死循环
function error(message): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {
}
}
复制代码
本系列文章以简短为主, 在官方api的基础上, 加上一些日常使用的感想. 可以快速浏览, 利用碎片化巩固知识. 如果感兴趣的话~ 欢迎关注, 后续持续推出文章.
最后
- 欢迎加我微信(A18814127),拉你进技术群,长期交流学习...
- 欢迎关注「前端加加」,认真学前端,做个有专业的技术人...