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学习地图