Tại sao nên sử dụng Typescript khi code React?

Điều mang tính cách mạng của React là nó cho phép bạn mô tả ứng dụng của mình như một cây components.

Component có thể đại diện cho một DOM element, như một button hoặc một input. Nó cũng có thể là một nhóm các components đại diện cho một form. Hoặc nó có thể là một trang hoàn chỉnh bao gồm nhiều components đơn giản hơn.

Các components có thể truyền thông tin xuống cây components, từ parent sang children. Bạn cũng có thể truyền các functions dưới dạng callback. Vì vậy, nếu có điều gì đó xảy ra trong component con, nó có thể thông báo cho cha của nó bằng cách gọi các hàm callback đã truyền trước đó.

Đây là lúc TypeScript trở nên rất tiện dụng. Bạn có thể sử dụng nó để xác định các interface cho components, nhằm chắc chắn rằng component của bạn chỉ nhận được các thông tin đầu vào chính xác.

Nếu bạn đã làm việc với React trước đó, có thể bạn đã biết rằng bạn có thể chỉ định các interface của component bằng cách sử dụng prop-types.

import PropTypes from 'prop-types'

const Greeting = ({name}) => {
  return (
    <h1>Hello, {name}</h1>
  )
}

Greeting.propTypes = {
  name: PropTypes.string
}

Nếu đã có prop-types, tại sao lại cần dùng Typescript?

Có một vài lý do sau:

• Bạn không cần phải chạy ứng dụng của mình để biết liệu bạn có mắc lỗi input hay không. TypeScript có thể được chạy bởi các code IDE của bạn để bạn có thể thấy lỗi ngay khi bạn mắc phải.
• Bạn chỉ có thể sử dụng prop-types cho các components. Trong ứng dụng của bạn có thể sẽ có các function và class không sử dụng React. Điều quan trọng là có thể cung cấp đúng kiểu dữ liệu cho chúng.
• TypeScript rất mạnh mẽ. Nó cung cấp cho bạn nhiều tùy chọn hơn để xác định các kiểu dữ liệu và sau đó nó cho phép bạn sử dụng các thông tin về kiểu dữ liệu này theo nhiều cách khác nhau. Mình sẽ nói nhiều hơn về điều này trong các bài viết tiếp theo.

Cảnh báo

Ví dụ chúng ta có một hàm như sau:

function messUpTheArray(arr: Array<string | number>): void {
  arr.push(3)
}

const strings: Array<string> = ['foo', 'bar']
messUpTheArray(strings)

const s: string = strings[2]

console.log(s) 
//Mặc dù chúng ta đã chỉ định kiểu dữ liệu của biến này là string, 
//nhưng kết quả trả về lại là một number có giá trị bằng 3. 

console.log(s.toLowerCase()) 
//Uncaught TypeError: s.toLowerCase is not a function

Hàm messUpTheArray của chúng ta chỉ nhận một mảng có chứa các phần tử kiểu string hoặc number. Sau đó, chúng ta gọi hàm messUpTheArray và truyền cho nó một biến được định nghĩa là một mảng các string. TypeScript cho phép điều này vì nó nhận thấy các kiểu Array<string | number> và Array<string> khớp nhau.

Trong trường hợp của chúng ta, có vẻ như có một lỗi làm vượt qua quá trình kiểm tra kiểu dữ liệu.

Thực ra, Typecript không bắt lỗi kiểu dữ liệu trong lúc chạy run-time. Điều đó có nghĩa là bạn có thể viết code không mắc lỗi kiểu dữ liệu, nhưng bạn có thể sẽ gặp lỗi lúc thực thi.

Bạn phải hết sức cẩn thận với dữ liệu bên ngoài thu được thông qua các ajax request, hay từ các hệ thống files, storage (localStorage, sessionStorage...).

Ở các bài tiếp theo, mình sẽ trình bày các kỹ thuật giúp giảm thiểu rủi ro cho các trường hợp tương tự như vậy.

Hẹn gặp lại các bạn trong bài viết tiếp theo.