Flow-03-类型

1.支持类型推断

image.png

2.支持函数返回类型限定

function foo():number {
    return 100
}
function foo1():void {
}

3. 六种原始类型

const a: string = 'string'

// Infinity无穷大
const b: number = Infinity //NaN //123

const c: boolean = true

const d: null = null

const e: void = undefined

const f: symbol = Symbol()

4. 数组类型

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

const b: number[] = [1,2,3]

const c: [string, number] = ['string', 19]

5.对象类型

const obj: {foo: string, value: number} = {foo: 'foo', value: 100}

// ? 代表可以可选
const obj1: {foo?: string, value: number} = {value: 100}

// 键值对
const obj2: {[string]: number} = {}
obj2.key1 = 123
obj2.key2 = 345

6.函数类型

unction fn(callback: (string, number) => void) {
    callback('100', 100)
}

// 可以不返还参数，或者只使用一个参数
fn(function (str, value) {
    // str => String
    // value => number
    console.log(str)
})

7. 字面量、可选、可为空类型

// 字面量类型
// a只能是abc
import { type } from "os";

const a: 'abc' = 'abc'

// 只能选择下面3个中一个
const res: 'idle' | 'success' | 'fail' = 'fail'

// 可以是数字和字符串
const b: number | string = 123
type StringOrNumber = number | string
const c: StringOrNumber = 123

// 可为空类型:null、undefine
const e: ?number = null
const f: number | void | null = undefined

8. 全类型mixed & any

// mixed 和 any 都可以代表各种类型
// mixed是强类型, any是弱类型
// 尽量使用mixed

function ccMixed(value: mixed) {
    // value.substr(1)
    // value * value
    if (typeof value === 'string'){
        value.substr(1)
    }

    if (typeof value === 'number'){
        value * value
    }
}
ccMixed(1)
ccMixed('')

function ccAny(value: any) {
    value.substr(1)
    value * value
}
ccAny(1)
ccAny('')


// 字面量类型
// a只能是abc
import { type } from "os";

const a: 'abc' = 'abc'

// 只能选择下面3个中一个
const res: 'idle' | 'success' | 'fail' = 'fail'

// 可以是数字和字符串
const b: number | string = 123
type StringOrNumber = number | string
const c: StringOrNumber = 123

// 可为空类型:null、undefine
const e: ?number = null
const f: number | void | null = undefined

9.运行环境的内置类型

// getElementById可能为空
const element: HTMLElement | null = document.getElementById('sdf')