facebook

FlowType là gì

Nguyễn Nhân

Nguyễn Nhân

— 4 min read
FlowType là gì

FlowType là bộ kiểm tra kiểu dữ  liệu định tĩnh cho Javascript, giúp lập trình viên phát hiện lỗi (có thể xảy ra) trong ứng dụng Javascript một cách nhanh chóng. Được Faceook giới thiệu từ năm 2014, nhằm giúp các lập trình viên có thể có được những lợi ích mà không hề đánh mất ‘cảm giác’ code bằng JavaScript.

Thật sự mà nói thì FlowType ra đời cách đây 2 năm thì cũng đã cũ, tuy nhiên dạo một vòng quanh các blog mình chưa tìm thấy bài nào giới thiệu, đây có lẽ là một thiếu sót của giới lập trình nước ta rồi.

Nội dung chính

Tại sao gọi là định tĩnh/kiểu tĩnh

Tĩnh ở đây nên được hiểu ở hai khái niệm:

  • Kiểu dữ liệu (string, number, object, …) được khai báo sẵn cho biến. Bởi vì Javascript là ngôn ngữ động nên nó không yêu cầu khai báo kiểu dữ liệu trước, và kiểu dữ liệu có thể thay đổi trong lúc thực thi chương trình, xem ví dụ ở đoạn mã sau:
var foo = 42;    // foo được xác định kiểu là Number
foo = "bar"; // foo bây giờ được xác định kiểu là String
foo = true;  // foo lại thay đổi và có kiểu Boolean
  • Kiểm tra trước khi chương trình thực thi. Đối với các ngôn ngữ như C, C#, Java thì phải khai báo kiểu dữ liệu trước, và việc thay đổi kiểu dữ liệu của biến là không được phép, vấn đề nằm ở chỗ là lỗi có thể xảy ra khi chương trình được thực thi, nên cái tĩnh mà FlowType mang lại là có thể phát hiện lỗi Datatype mismatch ngay trong lúc lập trình.

Tất nhiên, bạn hoàn toàn có thể không quan tâm đến việc Datatype mismatch nếu bạn Try…Catch tốt, hoặc ép kiểu chẳng hạn. Nhưng bản chất 2 cách này không sinh ra để giúp bạn hạn chế lỗi, như Try…Catch là cách để kiểm soát các lỗi “ngoại lệ”, không phải là lỗi “phổ biến”.

FlowType là như thế nào?

Trang chủ: https://flowtype.org/

Kiểm tra tham số

// @flow
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

Hàm trên mong muốn tham số là một kiểu số và trả về cũng là kiểu số, nhưng chúng ta truyền vào một chuỗi, như vậy kết quả trả về của chương trình là NaN, như vậy chương trình đã chạy sai, và trong hàng trăm dòng mã, bạn thật sự khó kiểm soát ở dòng mã nào truyền vào cái chuỗi oái ăm kia? Đó là mục đích FlowType ra đời, nó giúp kiểm soát lỗi theo từng tập tin, đưa ra các lỗi một cách chi tiết:

$> flow
  3:   return x * 10;
              ^ string. This type is incompatible with
  3:   return x * 10;
              ^^^^^^ number

Kiểm tra kiểu trả về

Ví dụ:

// @flow
function bar(x: string, y: number): string {
  return x.length * y;
}
bar('Hello', 42);

Nếu ta dùng flow để chạy, ta sẽ biết được lỗi

$> flow
  3:   return x.length * y;
              ^^^^^^^^^^^^ number. This type is incompatible with
  2: function bar(x: string, y: number): string {
                                         ^^^^^^ string

Tức là hàm ta khai báo mong muốn trả về là kiểu chuỗi, nhưng sau khi thực thi hàm, kiểu trả về là kiểu số, FlowType sẽ kiểm tra và cho biết lỗi ở đâu.

Kiểm tra trong thân hàm

Tất nhiên rồi, ngoài việc áp dụng Flow cho đầu vào và đầu ra, thì Flow cũng sẽ kiểm tra các kiểu dữ liệu của biến có trong thân hàm nữa, điều này giúp cho chương trình phát hiện nhanh chóng các lỗi.

FlowType sử dụng ra sao

Cách sử dụng khá là đơn giản, bước đầu tiên, bạn chỉ cần tạo dòng sau trên đầu mỗi tập tin muốn kiểm tra:

// @flow
// hoặc
/* @flow */

Từ giờ trở đi, bạn có 2 cách để kiểm tra:

Sử dụng dòng lệnh

Bạn cài đặt Flow vào máy tính, ở cửa sổ dòng lệnh (Command line), ngay tại thư mục gốc của dự án, chạy lệnh “flow” giống mấy ví dụ trên, sẽ cho ra kết quả.

Sử dụng chương trình Soạn thảo mã

Mình thường sử dụng các loại Atom, SublimeText, và VSCode để kiểm tra lỗi bằng ESLint, hiện tại ESLint cũng có plugin cho FlowType, nên việc tích hợp FlowType là khá dễ dàng.

Khi nào nên sử dụng FlowType

Tuỳ thuộc vào bạn theo trường phái nào: AngularJS hay ReactJS, rõ ràng đây là 2 Javascript framework nền tảng định hình cho các hướng đi khác nhau cho những ai theo Facebook hay Google. Với AngularJS 2 đã sử dụng TypeScript (do Microsoft tạo ra), thì rõ ràng việc sử dụng FlowType là vô nghĩa, vì bản thân TypeScript cũng có những ưu điểm tương tự (cách viết tương ứng ES6). Còn ReactJS lại thuần Javascript nên buộc phải cần có thêm FlowType để hỗ trợ.

Phải nói là khi mới biết TypeScript do nghiên cứu Angular 2, mình thật sự rất thích TypeScript, sử dụng TypeScript giúp cho mã gọn gàng rõ ràng dễ hiểu và dễ phát hiện lỗi. Tuy nhiên, do thiên về ReactJs/React Native nên mình không sử dụng TypeScript, mà tập trung cho ES6/ES2015 và FlowType.

Read more