美文网首页
TypeScript之前-Flow

TypeScript之前-Flow

作者: 老黑来袭 | 来源:发表于2022-09-06 00:47 被阅读0次

    FLow 可以帮我们找到代码上的一些使用上的问题(类型检查,类似于Swift的申明方式 指定数据的类型)
    如何使用:

    1、在项目当中安装一个Flow工具,

    命令行输入:yarn add flow-bin --dev
    

    2、在需要Flow类型检查的文件当中添加一个:

    //@FLow
    

    的注释

    3、在代码当中对成员添加类型注释

    添加前:

    function sum(a, b){
    return a + b
    }
    

    添加后

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

    如何使用:
    在命令行终端中输入:

    yarn flow
    

    如果第一次执行输入需要
    yarn flow init
    yarn flow stop
    如何关闭javaScript的类型检查:
    cmd + ,
    搜索jscascript validate

    导致的问题:
    添加类型注解之后会造成代码没有办法去运行的,所以需要借助工具在编码之后移除类型注解

    yarn flow-remove-types <目录>   -d <输出到哪个目录>
    yarn flow-remove-types .   -d  dist // 输出当前目录移除注解到dist 文件夹
    
    ###另一种移除类型注解的方式,借助 @bable 插件
    安装bable
    

    yarn add @bable/core @bable/cli @bable/preset-flow --dev

    更好的看:
    vscode 插件 Flow Language Support

    类型举例:

    string
    let a: String = 'str'
    
    number
    let num: number = 10
    let num: number = NaN /// 也属于 表述非数据 也是number类型
    let num: number = infinity /// 无穷大
    
    bollean
    const a: boolean = false true
    
    null
    const n: null = null /// 只能是null
    
    undefined 注意
    const n: void = undefined
    
    symbol
    const s: symbol = symbol()
    
    数组:和Swift 一样泛型
    const a: Array<number>
    另一种表述方式
    const a: number[]
    元组概念和Swift相同只不过用[]表述
    const a:[string, number]
    
    对象  
    const obj: {}
    也可以写上必须存在的属性
    const obj: {foo: string, bar: number }表示实例此对象时必须要给予这两个属性
    const obj: {foo: string, bar: number } = {foo: 'foo', bar: 100 }
    可选属性和Swift相同'?'
    const obj: {foo?: string, bar: number }
    指定键值对类型:
    const obj:{[string], string} 表示这个对象所有的键值都必须string类型
    
    函数类型注解
    对函数的参数和返回值进行 :类型
    
    函数作为参数限制函数的参数
    func aaa(callBack(string, number) => void) {
    限制 callBack 函数的参数
    }
    
    字面量类型
    const a: 'foo' = 'foo'
    代表a只能被赋值为 foo
    a = 'foo'
    联合体使用字面量类型
    const a : 'succeed' | 'warning' | 'danger' = 'succeed'
    代表 a 只可以被赋值 'succeed' | 'warning' | 'danger' 其中的一个值
    
    
    也可以:
    const a: string | number = ''
    代表a 可以是 string 、number 类型
    
    
    mixed 类型
    function passMixed(a: mixed) {
      /// 强类型 使用时需要判断实际类型使用
    if (a typeof string) {
    
    }
    }
    passMixed('string')
    passMixed(100)
    mixed相当于所有类型的联合类型
    
    any 类型 用法同mixed
    不同的是any是弱类型,mixed是强类型
    any则不用判断,直到运行时
    

    相关文章

      网友评论

          本文标题:TypeScript之前-Flow

          本文链接:https://www.haomeiwen.com/subject/outinrtx.html