乐趣区

关于javascript:TypeScript五-类型知识补充

jiezi

目录

  • 隐式类型推断

  • 类型断言

    • 办法一：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 学习地图

退出移动版