TypeScript(五) —— 类型知识补充

目录

• 隐式类型推断

• 类型断言

  • 方法一：as 关键词
  • 方法二：尖括号断言

• 类型声明(declare)

  • 声明步骤
  • 使用第三方库lodash
  • 使用第三方库query-string
• TypeScript学习地图

之前讲语法，觉得这些既属于语法，但是不是特殊的类型，一时间不知道怎么分类，所以就做为类型补充知识。

隐式类型推断

隐式类型推断 ： 如果我们没有明确通过类型注解去标注这个变量的类型，那么TypeScript根据一些可以推断出这个类型。

下面这个例子：

如果我们没有设定类型，赋值了一个数字，那么会推断这个为number类型，之后再赋值为字符串，就会报类型错误。

如果TypeScript无法推断这个变量的类型，就会定为any，后面赋值什么类型都可以。

开发的时候还是建议大家为每个变量添加明确的类型，为了后期更直观的理解代码。

类型断言

TypeScript有时无法推断出来一些变量的类型，但是我们可以明确知道，所以有些时候它给了我们一些不确定选项的时候我们可以断言成确定的类型。使用类型断言就可以辅助ts更加明确每个变量的类型。

TypeScript类型断言不是类型转换，类型转换是在运行阶段，断言是在编译阶段，编译过后断言就不存在了。

举个例子：

const nums = [110, 120, 119, 112]
// 下面返回的 res ，ts认为可能是number，也可能是undefined
const res = nums.find(i => i > 0)

// 如果下面要对res进行运算，res直接运算就会报错
const square = res * res // 报错，就要断言它为number类型才行

方法一：as 关键词

使用as就可以明确num1是一个数字，下面就可以使用数字运算

const num1 = res as number

方法二：尖括号断言

这个尖括号和jsx的标签产生冲突，那种情况不推荐使用

const num2 = <number>res

类型声明(declare)

开发过程中我们会用到第三方模块，这些模块并不都是用typeScript编写的，所以它的成员可能就没有强类型体验。

声明步骤

1. 如果有typescript匹配的类型声明，可以直接使用
2. 如果没有就只能手动进行类型声明（declare）
3. 可以在社区中有可以直接npm下载对的类型声明模块，安装使用

存在的原因是为了兼容普通的js模块.

使用第三方库lodash

使用lodash举例子，lodash本身没有集成类型声明，所以使用的时候会报错。我们可以自己手动进行类型声明

下面的函数，直接调用camelCase没有类型提示，所以在前面添加declare对函数camelCase进行参数和返回值的限制，这样可以看到这个函数有了类型的提示

那上面的lodash还是报错，那么我们看可能需要下一些东西进行兼容，因为TS社区比较强大，大部分的第三方模块都有对应的类型声明，直接安装其对应的类型声明模块(一般是@types/模块名)即可.

类型声明是开发依赖，里面不会提供任何的代码，只是对模块做对应的类型声明

安装

# yarn
yarn add @types/lodash --dev
# npm
npm i @types/lodash 

安装之后lodash可看到里面有很多.d.ts的类型声明文件，对应的代码中就有对应的类型声明提示了

使用第三方库query-string

query-string —— 解析query中的url字符串

本身包里面集成了类型声明文件，不需要额外再安装。

# yarn
yarn add query-string
# npm
npm i query-string

使用的时候看到有类型声明的介绍

TypeScript学习地图