——点击上方蓝色字体,关注我哦~——

前言: 本文章为 TypeScript 系列文章. 

旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.

在官方 api 的基础上, 加上一些日常使用的感想. 

如果感兴趣的话~ 欢迎关注, 后续持续推出文章. 

作为一个使用 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种方式声明, 一种在元素类型后接上 [] ,如下: 

let arr1: number[] = [1,2,3]

一种使用数组泛型, Array<元素类型>.   如下: 

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 y:undefined = '1'; //报错

同理, undefined 和 null 也不能赋值给其他类型. 如下: 

//报错, 如果 strictNullChecks 为 true

let h: number = undefined;

但是在项目中, 有些值, 他既支持 number 类型, 又得支持 undefined. 比如接口未返回来时, 可能需要使用 undefined 作为默认值, 等接口回来后再赋值. 如何支持这张场景?

1. 在 tsconfig.json 中将 strictNullChecks 设置为 false 即可. [不推荐]

2. 使用联合类型  [推荐]

let num: number | undefined |  null = 111 //正常

let num: number | undefined |  null = undefined //正常

void

一个没有任何返回的函数, 就用 void 

function warnUser(): void {}

any 类型

刚接触 typescript 的时候, 很容易就满处 any 大法, 一写 any , 啥报错都没了.

但是如果都使用 any ,那就没必要使用 ts 了 ????. 

黄金法则: 能不写 any 的场景, 就别写 any 

never

一般很少使用, 场景: 函数抛出错误 或 死循环时使用 never 

function error(message): never {

   throw new Error(message);

}

function infiniteLoop(): never {

   while (true) {

   }

}

总结: 

我们可以使用 (变量/函数): type 格式来声明类型. 

欢迎关注, 后续持续推出系列文章. 

最后

最后

- 欢迎加我微信(A18814127),拉你进技术群，长期交流学习...

- 欢迎关注「前端加加」,认真学前端，做个有专业的技术人...

扫描二维码

关注前端加加

我在这里等你呦~

原创不易，如果觉得有点用，希望可以随手转发或者”在看“，拜谢各位老铁。

点击在看