关于javascript:大前端进阶flow类型检查

类型概念

依据类型 平安 能够将编程语言的类型零碎分为强类型或者弱类型。
依据类型 查看 能够将编程语言的类型零碎分为动态类型和动静类型。

强类型 vs 弱类型

因为历史因素，强类型和弱类型并没有十分明确的定义。依据集体了解，能够用上面这句话辨别强弱类型。

次要用以形容编程语言对于混入不同数据类型的值进行运算时的解决形式。强类型的语言遇到函数引数类型和理论调用类型不匹配的状况常常会间接出错或者编译失败；而弱类型的语言经常会履行隐式转换，或者产生难以预料的后果。

在下例中，调用 printNumber 的时候传入数字或者字符串均可，是一种弱类型语言。

function printNumber(number){console.log(number)
}
printNumber(100) //ok
printNumber('100') //ok

在下例中，printNumber 明确要求传入 int 整型，如果调用时传入字符串就会在编译时出错，因而是强类型语言。

class Main{static void printNumber(int num) {System.out.printIn(num)
    }

    public static void main() {Main.printNumber(100) // ok

        Main.printNumber('100') // ok
    }
}

动态类型 vs 动静类型

动态类型指的是变量的类型在编译时总是已知的，也就是变量申明实现后，不能扭转其类型。

class Main{public static void main() {
        int number = 100

        number = 50 //ok

        number = '50' // error，尝试扭转类型
    }
}

动静类型指的是变量的类型直到运行时能力确定，也就是变量申明实现后，可随便更改其类型。

function main() {
    let num = 100

    num = 50 // ok
    num = '50' // ok
}

js 类型概述

家喻户晓，javascript 是弱类型语言，也是一种动静类型语言。这是由语言设计时的局限性决定的，过后，js 只是用来实现简略的性能，所以弱类型和动静类型能够更为不便。然而，当初 js 也能反对大型的利用开发，其类型的弊病就裸露进去。

setTimeout(() => {
    // 在这种状况下，开发和简略测试过程中不会发现问题，只有运行一段时间后才会爆出问题。console.log(a)
}, 3000000);

let obj = {
    // 如果想要更改此属性值，因为不晓得有多少代码中引入此属性，所以不敢轻易更改。name: 'zhangsan'
}
console.log(obj.name)

flow

flow 是一种 JavaScript 动态类型查看工具，通过类型注解的形式在我的项目编写过程中对类型加以限度，从而更早发现代码问题，有利于我的项目的开发和保护。

类型注解：通过: 的形式对变量的类型加以限度。

/**
 * @flow
 */
function sum(a: number, b: number) {return a + b}
sum(1, 2) // ok
sum('1', 2) //error
// 因为 sum 要求参数是数字，然而调用的时候传入了字符串，所以在查看的时候 flow 会报错。

类型推断：依据应用状况主动推断类型。

/**
 * @flow
 */
function square(a) {
    // 调用函数的时候传入字符串，所以函数会主动推断 a 参数为字符串，因为字符串不容许相乘，因而查看会报错。return a * a
}
square('a')

原始类型

原始类型对应 js 中的原始类型。

const a: string = 'foo'
const b: number = 1 // 也能够赋值 NaN（NaN 是一种非凡的数字类型）const c: boolean = true // false
const d: void = undefined
const e: null = null
const f: symbol = Symbol()

数组类型

// 应用范型定义数组
const a: Array<number> = [1, 2, 3]
const b: number[] = [1, 2, 3]
// 应用元组定义数组类型：定义数组个数及每项类型。const c: [string, number] = ['foo', 1]

对象类型

// 相似对象字面量的形式定义对象中每个属性的类型
const obj: {
    name: string,
    age: number,
    // 可选
    address?: string
} = {
    name: 'zhangsan',
    age: 18
}

函数类型

// 通过箭头函数的形式定义函数类型
function ajax(callback: (string, number) => void) {callback('zhangsan', 18)
}

非凡类型

字面量类型

// 指定一个字面量为一个参数的类型，通常字面量类型会和上面的联结类型应用
const foo: 'foo' = 'foo'

联结类型

// 指定类型为多个字面量类型中的一个
const type: 'warning' | 'success' | 'error' = 'error'
// 指定类型为数组，数组能够蕴含数字或者字符串
const arr: Array<number | string> = [1, '2']

type 关键字

// 通过 type 关键字定义一个类型，能够认为 resultType 是 'warning' | 'success' | 'error' 的别名
type resultType = 'warning' | 'success' | 'error'
// 应用时能够间接用 resultType 定义类型，不便复用
const type: resultType = 'error'

Maybe 可空类型

// 通过？定义可空类型，相当于 number | void
let a: ?number = 1 
a = undefined

mixed, any

// 通过 mixed 定义任意类型，能够是根底类型中的任意一个
let a: mixed = 1 
a = 'foo'
// any 也能够示意任意类型，体现上和 mixed 类似
let a: any = 1
a = 'foo'

mixed 和 any 尽管体现雷同，都代表任意类型，然而二者是不一样的，mixed 尽管示意任意类型，然而它还是强类型。

function anytest(s: any) {return s.substr(0, 1)
}
// 应用 any 时，能够传入任意类型的值，尽管数字可能不存在 substr 办法，然而查看时不会报错
anytest(1)

function mixedtest(s: mixed){
    // 应用 mixed 时，当这么间接调用 substr 就会报错，因为可能传入 number 类型。// return s.substr(0, 1)
    // 此时须要判断参数类型
    if(typeof s === 'string') {return s.substr(0, 1)
    }
}
mixedtest(1)

其余类型

下面介绍了 flow 中罕用的类型，其还蕴含一些不罕用的类型，遇到后再补充。