认识flow到入门

2020-01-17  本文已影响0人  拾钱运

认识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 image.png
上一篇下一篇

猜你喜欢

热点阅读