请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:201| 主题:284276
收藏本版
互联网、科技极客的综合动态。

[其他] Go With the Flow – A Static Type Checking Tool for JavaScript

[复制链接]
怪我长得丑 发表于 2016-12-1 03:34:55
195 7

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-1-网络科技-challenge,features,complex,members,change


  Static Type Checking is Life, Static Type Checking is Love

  Javascript has been a hot topic for web developers for some time now.
  It’s fast, runs everywhere and offers many wonderful frameworks such as Angular and React.
  However, its lack of static typing can be a real pain for developers, bugs only appear at runtime, are hard to find and code refactoring is a real challenge.
  This is where static type checkers such as TypeScript and Flow come into play with their main features being:
  
       
  • Helping to catch errors early, close to the root cause and at buildtime   
  • Improving code readability and maintainability  
  When Should You Use a Type Checker?

  
       
  • For long and complex projects   
  • If there is a chance you will have to refactor it at some point   
  • If team members change regularly  
  If you are sick and tired of random errors induced by typing errors, you should definitely join the static type checking club!
  What Does Flow Bring to the Game?

  What Flow Is

  Flow is a JavaScript static type checker. The open source project has 9,000+ stars on GitHub at the time this article is being written.
  The project is active – more than 30 commits are merged in average every week with bug fixing and new features.
   

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-2-网络科技-challenge,features,complex,members,change

  It was introduced by Facebook in 2014 with two main features:
  
       
  • Finding type errors in your code   
  • Offering a static typing syntax  
  How does it work?

  Flow is a checker while TypeScript is a compiler.
  Flow works in two different ways:
  
       
  • You specify to the tool the types you expect, and it checks your code based on this as shown below  
   

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-3-网络科技-challenge,features,complex,members,change

  
       
  • The tool can deduce expected types by itself and check the code with those assumptions  
  The second point, called type inference, is one of the main features of Flow. It makes it possible for Flow to check your code even if you don’t adapt it, you can see an example in the code below.
   

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-4-网络科技-challenge,features,complex,members,change

   

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-5-网络科技-challenge,features,complex,members,change

   To run Flow code Facebook recommends to use Babel to strip static types before serving the client, you can find more information about this here
  React actually already uses Babel so using Flow with this framework does not require anything more.
  Why Should You Use Flow?

  
       
  • It works well with JSX syntax and React   
  • Refactoring so easy (it can match module and function names between files and pops up an error if you missed an old occurrence)   
  • It’s opt-in so you can check your code incrementally   
  • It implements weak checking for legacy code   
  • It allows you to use “maybe types” (undefined, null, and mixed) so that you are free to keep some stuff dynamic  
  Getting Started with Flow

  How Can you Start Using it?

  To get started with Flow on an existing project you’ll need to go through some basic steps:
  In your project’s directory
  
       
  • Create a Flow config file touch .flowconfig   
  • Install the Flow module npm install --save-dev flow-bin   
  • Add this line in the package.json:  
  1. "scripts: {
  2.    "flow": "node node_modules/.bin/flow"
  3. }
复制代码

       
  • Now use npm run flow at the root of your project  
  It’s that easy!
  And now you can start implementing it in your code by adding an annotation at the top of the files you want to check:
  1. // @flow

  2.     var str = 'hello world!';
  3.     console.log(str);
复制代码
If you get npm error info after the command it’s the way npm reacts to Flow exiting with errors, that won’t affect Flow’s accuracy.
  If you Use it, Use it Right!

  There are two ways to use Flow, the right way and the wrong way.
  You can always use it with no further installs by running
   npm run flow in your CLI which will show you all the typing errors it can find.
  But the most efficient and fastest way of using it is through an IDE plugin of which here are some examples:
  
       
  • Flow for Atom   
  • Flow for VSCode   
  • Flow for Vim  
  These plugins usually start the flow server and allow you to see errors as you write your code, much like a linter would.
   

Go With the Flow – A Static Type Checking Tool for JavaScript

Go With the Flow – A Static Type Checking Tool for JavaScript-6-网络科技-challenge,features,complex,members,change

  It saves you the pain of writing then checking so that you can write “flowless” code right from the start ;).
  Conclusion

  Make Your Code Safer and More Reliable

  Flow will increase the safety and maintainability of your app.
  It can prevent a lot of type induced regressions on your projects and make bugs easier to find as they appear at buildtime or even as you write thanks to Flow IDE linters.
  It will make your code more understandable and safer to refactor.
  Spare Yourself Type Checking Tests

  You will never have to write tests like this ever again!
  1. it 'should create a favorites array in local storage', ->
  2.     $localStorage.favorites.should.be.an.array
  3.     $localStorage.favorites.should.be.empty
复制代码
Why Flow Instead of TypeScript ?

  Flow is growing really fast with a lot of support and most of all, it works really great with Facebook’s React framework which makes it even more exciting.
  Flow handles non-nullable types as default while TypeScript does not and Flow is generally more expressive. That means that Flow will catch more errors related to variables ending up null.
  Finally, Flow requires a smaller effort to be implemented on existing projects as you can start checking your files gradually.
  You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.
     Join Us
goimt 发表于 2016-12-1 05:09:12
感觉不错!
回复 支持 反对

使用道具 举报

竣风荣 发表于 2016-12-1 05:19:52
失而复得的东西。永远都是二手货。
回复 支持 反对

使用道具 举报

微信 发表于 2016-12-1 09:57:59
明明白白我的心,楼主赏我个沙发!
回复 支持 反对

使用道具 举报

告别薇安 发表于 2016-12-1 10:06:21
顶一下,收藏了!
回复 支持 反对

使用道具 举报

sichoucw792 发表于 2016-12-1 10:08:31
永远有多远?你小子就给我滚多远。
回复 支持 反对

使用道具 举报

国色天香p 发表于 2016-12-3 06:21:43
待我长发及腰,少年娶我可好?
回复 支持 反对

使用道具 举报

烽火英雄 发表于 2016-12-5 03:53:38
楼下是射手
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表