基础 #

//必须要到运行阶段才能发现问题，语法上不会报错
const obj = {}
obj.foo() // 不存在的方法


//=============================
// 类型不明确，函数的功能有可能发生改变
function sum(a, b){
    return a+b
}
console.log( sum(100, 100) ) // 200
console.log( sum(100, '100') ) // 100100


//=============================
// 对对象索引器错误的一种用法
const obj = {}
obj[true] = 100
console.log(obj['true'])

fucntion render(){
    element.className = 'container' // 有时编辑器没办法推断出该提示的类型
    element.innerHtml = 'hello world'// 也不能显示语法的错误
}


//===============================

const uitl = {
    // 假如重构时想要修改方法名，没办法在短时间内发现引用了该方法的地方
    aaa:() =>{
        console.log('util func')
    }
}

//===============================


function sum(a, b){
    // 假如我们能够约束传参的类型，就可以减少不必要的类型判断，只有弱类型语言需要这种判断
    if(typeof a !== 'number' || typeof b !==  'number'){
        throw new TypeError('arguments must be a number')
    }
    return a+b
}

// 通过添加类型注解，Flow根据类型注解来检查代码当中的类型异常，避免到运行阶段才发现错误
function sum(a:number, b:number){
    return a+b
}

yarn init --yes
yarn add Flow-bin --dev

// @flow
function sum(a: number, b: number){
    return a+b
}

sum(100,100)
sum('100',100)

yarn flow init
yarn flow

/**
 * 类型推断
 *
 * @flow
 * /
 * 
 function square(n){
    return n*n
 }
 square('100') // 字符串不能进行乘法运算

// 根据代码的使用情况去推断变量的类型就叫类型推断，不过建议还是加上注解，让代码更有可读性

/**
 * 类型注解
 *
 * @flow
 * /
 * 
 function square(n: number){ // 参数注解
    return n*n
 }
// 变量注解
let num: number = 100

// 返回值注解
function foo(): number{
    return 100
}
function foo(): void{
    // 没有返回值会默认返回 undefiend，所以如果没有返回值要设置类型为 void
}

/**
 * 原始类型
 *
 * @flow
 * /
 * 

const a: string = 'foobar'

const b: number = 100 // NaN Infinity（无穷大）

const c: boolean = false // true

const d: null = null

const e: void = undefined // 注意 undefined 是用 void

const f: symbol = Symbol()

/**
 * 数组类型
 *
 * @flow
 * /
 * 

const arr1: Array<number> = [1, 2, 3]

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(a: number,b: number)()： void{
    return a+b
}


// 函数作为回调函数时，设置回调函数的参数类型和返回值类型
function foo(callback: (string, number) => void){
    callback('string',100)
}

foo(function(str, n){
    // str => string
    // n => number
})

/**
 * 特殊类型
 *
 * @flow
 * /
 * 


// 联合类型
const b: string | number = 100

// 声明类型，这就可以重复使用了
type StringOrNumber = string | number


// 字面量类型
const a: 'foo' = 'foo'
// 字面量类型一般不单独使用，而是使用联合类型（或类型）
const type: 'success' | 'warring' | 'danger' = 'success'


// maybe(有可能的) 类型
const gender: ?number = null
// 等价于
const gender: number | null = null

/**
 * 任意类型
 *
 * @flow
 * /
 * 
 
 // mixed
 fucntion passMixed(value: mixed){
    // mixed 是强类型，需要作类型判断才不会语法报错
     if(type value === 'string'){
         value.substr(1)
     }
 }

passMixed('string')
passMixed(100)



//---------------------------------------
// any
 fucntion passAny(value: mixed){
     
 }

passMixed('string')
passMixed(100)



// any 是弱类型，mixed是强类型
// any 的存在只是为了兼容老代码，尽量不去用

// flow 类型还有很多，最主要的目的是为了以后 看第三方源码中使用的情况，我们要能看懂

/**
 * 运行环境 API
 *
 * @flow
 * /
 * 
 
const element: HTMLElement | null = document.getElementById('app')