《一》大话 Typescript 基本类型

本文章为 Typescript 系列文章. 旨在利用碎片时间浅显易懂的快速入门 Typescript. 或重新温故 Typescript 查漏补缺

作为一个使用 Typescript 很久很久很久的人来说, 真真切切感受到了 Typescript 的魔法, 大大提高了代码的可维护性. 方便代码重构(一个月重构一次, 半年重构6次,不是在重构的路上就是在重构……)

文章列表:

• [一] Typescript 基本类型
• [二] Typescript 枚举
• [三] Typescript 接口
• ……

基本类型

1. javascript 类型 :

Boolean Number String Array Funciton Object Symbol undefined null

2. 补充类型

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 作为默认值, 等接口回来后再赋值. 如何支持这张场景?

1. 在 tsconfig.json 中将 strictNullChecks 设置为 false 即可. 不推荐此方法

   

2. 使用联合类型 推荐

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),拉你进技术群，长期交流学习...
• 欢迎关注「前端加加」,认真学前端，做个有专业的技术人...