文章内容输出来源:拉勾教育 大前端高薪训练营
前言
在【编程语言分类】中,我介绍到JavaScript是一种类型不安全语言,没有明确的数据类型声明,变量的类型可以随意的更改。为了解决这种问题,微软开发了一种开源、跨平台的编程语言TypeScript。它是JavaScript的超集,最终会被编译为JavaScript代码。在学习TypeScript之前,我们先来看一个JavaScript的类型检查器Flow。
Flow
Flow 是 Facebook 出品的一个用于 JavaScript 代码的静态类型检查工具。用于找出 JavaScript 代码中的类型错误。Flow 采用 OCaml 语言开发。
注意:
在使用 Flow 时,需关闭开发工具(如VScode)中关于JavaScript的语法检查。
一、Flow 的安装与使用
-
以下操作需在 cmd 命令行界面进行,并使用 yarn (或 npm/cnpm)执行安装运行命令。
1)初始化包管理文件 package.json
yarn init -y
2)安装 flow 检查依赖包
yarn add flow-bin --dev
3)初始化配置文件 .flowconfig
yarn flow init
4)类型注解: // @flow 或 / @flow /
// @flow function sum (a: number, b: number) { return a + b } sum(100, 100) // sum('100', 100)
5)启动 Flow检查服务
yarn flow
注意
安装目录中不要出现中文,否则会报出如下错误:
6)关闭 Flow检查服务yarn flow stop
二、编译:通过编译移除 [类型注解]
- 使用flow官方提供的 flow-remove-types
1)安装 flow-remove-types
2)运行编译命令yarn add flow-remove-types --dev
yarn flow-remove-types 源代码所在目录 -d 转换过后的输出目录
- 使用 Babel 转换器
1)安装 babel
2)在根目录中添加 babel 的配置文件 .babelrc,并使用 presets 字段设定转码规则/* @babel/core :Babel 的核心模块 @babel/cli:Babel的cli工具,可以使我们在命令行工具中直接使用Babel命令完成编译 @babel/preset-flow:包含了转换类型注解的插件 */ yarn add @babel/core @babel/cli @babel/preset-flow --dev
3)运行编译命令{ "presets": ["@babel/preset-flow"] }
yarn babel 源代码所在目录 -d 转换过后的输出目录
三、基本语法
- 类型推断 (Type Inference)
/** * @flow */ function square (n) { return n * n } square('100')
- 原始类型(Primitive Types)
// @flow const a: string = 'foobar' const b: number = Infinity // NaN // 100 const c: boolean = false // true const d: null = null // 值为 undefined 时,数据类型标记为 void const e: void = undefined const f: symbol = Symbol()
- 数组类型
// @flow const arr1: Array<number> = [1, 2, 3, 'foo'] // 泛型 const arr2: number[] = [1, 2, 3] // 元组:一个函数中返回多个返回值时,使用 const foo: [string, number] = ['foo', 100]
- 对象类型
// @flow const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 } const obj2: { foo?: string, bar: number } = { bar: 100 } // ? 表示 可选 const obj3: { [string]: string } = {} // 指定 键 和 值 的数据类型 obj3.key1 = 'value1' obj3.key2 = 'value2'
- 函数类型
// @flow function foo (callback: (string, number)): void { callback('string', 100) } foo(function (str, n) { // str => string // n => number })
- 特殊类型
// @flow const a: 'foo' = 'foo' // 字面量类型 const type: 'success' | 'warning' | 'danger' = 'success' // 联合类型:组合 const StringOfNumber = string | number // 自定义类型别名 const b: StringOfNumber = 'string' // 100 const gender: ?number = undefined // 相当于下面这种写法 const gender: number | null | undefined = undefined
- Mixed & Any(任意类型)
// @flow // string | number | boolean | ... // 所有类型的联合类型 // 强类型,类型安全的 function passMixed(value: mixed) { // 解决类型隐患 if (typeof value === 'string') { value.substr(1) } if (typeof value === 'number') { value * value } } passMixed('string') passMixed(100) // ********************************* // 弱类型 兼容以前版本的ECMAScript function passAny(value: any) { value.substr(1) // 语法上不会报错 value * value } passAny('string') passAny(100)
- 查询网址:
https://flow.org/en/docs/types 对所有类型的描述文档
https://www.saltycrane.com/cheat-sheets/flow-type/latest/ 文档查询