เริ่มต้นใช้งาน Flow (A STATIC TYPE CHECKER FOR JAVASCRIPT) เบื้องต้น

บทความนี้เป็นการแนะนำการใช้งาน flow เบื้องต้น เนื่องจากได้มีโอกาสลองเล่นเห็นว่ามันเจ๋งดีและมีประโยชน์มากในการพัฒนาโปรแกรม

Flow คืออะไร Flow เป็น Type Checker library ตัวหนึ่งจากทาง Facebook นั่นเอง ช่วยให้เราเขียน code ได้อย่างมีประสิทธิภาพมากขึ้น โอกาสผิดพลาดและเกิด bugs น้อยลง เพื่อให้บทความไม่ยาวเกินไปเรามาดูการใช้งาน flow กันดีกว่าครับ

เริ่มจากการสร้างโฟลเดอร์และ init project ของเราก่อนเลยครับ

$ mkdir get_started
$ cd get_started
$ npm init -y

จากนั้นก็สร้างไฟล์ index.js และ install flow-bin package ไว้ที่ global เพื่อ run คำสั่ง flow init ได้

$ touch index.js
$ npm install -g flow-bin
$ flow init

จากนั้นก็เปิด editor ที่ชอบเลยครับ ไม่ว่าจะเป็น atom, sublime ในที่นี้ผมเลือกใช้ VS Code

เรามาเริ่มเขียน code ที่ไฟล์ index.js กันดีกว่าครับ

// @flow
var str = 'hello world!';
console.log(str);

จะเห็นว่ามี //@flow อยุ่บนสุดของไฟล์ เพื่อให้ Flow รู้ว่าเราต้องการ check ที่ไฟล์นี้ ถ้าเราไม่เพิ่มเข้าไป Flow จะไม่ check ไฟล์นี้ของเรา

จากนั้นเราจะทำการ check file นี้โดยการ run คำสั่ง flow

$ flow
No errors!

เราจะไม่พบ Error ดังนั้นเราจะลองมาปรับ code สักหน่อยว่า flow สามารถจับ type error ได้จริงหรือไม่
เปลี่ยน line 3 เป็น

var str: number = 'hello world!';

พอจะเข้าใจการทำงานเบื้องต้นของ Flow แล้วใช่ไหมครับ เราลองเปลี่ยนเป็น
var str: string = ‘hello world!’;
แล้ว run คำสั่ง flow อีกครั้ง

$ flow
No errors!

แสดงว่าการกำหนด type ตัวแปรของเราถูกต้องแล้วครับ
แต่ก็มีคำถามว่าแบบนี้มันไม่ผิด ​syntax หรอครับ เราเพราะ javascript ไม่มีการประการใช้ type แบบนี้
เรามาลอง ​run ด้วยคำสั่ง node เพื่อเช็คกันเลยดีกว่า

$ node index.js

จะเห็นว่าได้ error ครับ แสดงว่าใช้ไม่ได้
คำตอบครับ เราต้องใช้ babel ในการช่วยแปลง ​code นี้กลับให้เป็น standard ของ javascript นั่นเอง ตรงนี้ผมขอรวบสรุปคำสั่งของ babel ดังนี้

$ npm install -g babel-cli
$ npm install — save-dev babel-plugin-transform-flow-strip-types
$ echo ‘{“plugins”: [“transform-flow-strip-types”]}’ > .babelrc
$ babel-node index.js
hello world!

หาต้องการศึกษาเพิ่มเติมสามารถเข้าไปที่เว็บไซต์ https://flowtype.org ได้เลยครับ เนื่องจากเนื้อหาของ Flow มีค่อนข้างเยอะ ถ้ามีโอกาสผมจะนำมาเขียนเพิ่มเติมให้ อย่าลืมกด follow ติดตามกันนะครับ