认识flow到入门

认识Flow，Flow是一个类型检查器，加入类型注释的，即叫做覆盖类型

why Flow

javascript是一个弱类型语言，变量类型不需要声明，运算过程中会根据需要自动转换类型，这个是js的优点，够灵活，编码简单，但是同时也是软肋。有时候，有些类型转换的bug无从查起，特别是在复杂的应用中。

Flow为Javascript添加了静态类型检查，以提高开发效率和代码质量。更明确的说，静态类型检查提供的好处像早期错误检查，帮助你发现一些只有在运行时才能发现的错误。
flow官网：https://flow.org/

Flow和TypeScript的区别：https://robin-front.github.io/2017/06/14/compare-with-Flow-and-TypeScript.html

途中安装了yarn，yarn官网：https://yarn.bootcss.com/下载
或者：https://blog.csdn.net/yw00yw/article/details/81354533 npm install
途中遇到yarn init

image.png

这个时候只需要用cmd打开该项目目录，进行yarn init即可

在vue项目中运用flow：https://www.jianshu.com/p/81b51c653301

全部配置完成：简单测试代码

 /* @flow
 <style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>
*/


//<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
    this.foo('dddd')
  },
  methods: {
   
    foo(x: string){  //如果写:number:如下图
      return x.split('')
    }  
  }
}
//</script>

Cannot call x.split because property split is missing in Number [1]..
（无法调用“x.split”，因为“Number”[1]中缺少“split”属性。）

image.png

• 上图是加了Flow静态类型检测

• 下图是没有技术Flow静态类型检测

image.png