Xây dựng ứng dụng bằng React sử dụng Typescript

Trong bài viết này tôi sẽ hướng dẫn xây dựng một ứng dụng React một cách nhanh chóng, sử dụng Typescript thay vì Javascript.

Chúng ta sẽ sử dụng công cụ create-react-app(CRA) để tạo ra một bộ khung các cấu hình cơ bản cho việc phát triển ứng dụng React với Typescript.

Tôi mặc định rằng Node và NPM đã được cài đặt trên máy tính của các bạn.

Tất nhiên, các bạn có thể cấu hình dự án React của mình mà không cần tới CRA. Bài viết này có nội dung hướng dẫn các bạn khi mới làm quen với React, xây dựng các components, quản lý props và state, chỉ khác ngôn ngữ chúng ta sẽ sử dụng là Typescript.

Cài đặt create-react-app

create-react-app là một công cụ cho phép các lập trình viên có thể tạo mới một ứng dụng React với các giá trị mặc định mà không cần quan tâm tới việc cấu hình như thế nào.

npm install -g create-react-app

Chú ý: Các bạn có thể bỏ qua bước này, creat-react-app có thể được sử dụng thông qua npx , sẽ được trình bày ở phần dưới đây.

Khởi tạo ứng dụng React với Typescript

Sử dụng công cụ create-react-app với tùy chọn --typescript để tạo ra một ứng dụng React sử dụng Typescript làm cú pháp mặc định.

npx là công cụ được phát hành cùng với npm v2.5, công cụ này cho phép bạn thực thi những câu lệnh của các gói được chia sẻ bởi npm regestry. Điều này có nghĩa là những gói cài đặt global sẽ là không cần thiết nữa.

Nếu các bạn đã từng sử dụng create-react-app trước đây, các bạn sẽ cảm thấy quen thuộc với cú pháp trên, ở đây chỉ là thêm tùy chọn --typescript. Tùy chọn này sẽ quy định CRA sử dụng Typescript làm cú pháp mặc định và các cấu hình phù hợp để ứng dụng có thể được build và chạy.

Sau khi thực hiện câu lệnh trên, chúng ta sẽ có các file và cấu trúc thư mục như sau:

Một số file, thư mục mà chúng ta quan tâm:

• tsconfig.json khai báo các tùy chọn cho việc biên dịch Typescript sang Javascript.
• tslint.json khai báo các cài đặt được sử dụng bởi TSLint (Một công cụ kiểm tra code Typescript)
• public thư mục chứa những tài nguyên tĩnh như file index.html
• src thư mục chứa code giao diện, logic của ứng dụng. Nó bao gồm các components viết bằng Typescript và CSS file. Trong thư mục này file index.js sẽ được thay thế bằng index.tsx.

Những thay đổi khi dùng Typescrip

Để xây dựng React với Typescript, chúng ta sẽ phải thực hiện một số thay đổi so với cách truyền thống.

.tsx thay vì .jsx

Typescript có đuôi mở rộng cho file là .ts, có thể vì lý do này mà những file trong dự án React sẽ có đuôi mở rộng là .tsx. Trong những file này, chúng ta sẽ sử dụng những cú pháp của Typescript và JSX. Bạn luôn phải khai báo giá trị "jsx": "preserve" trong file tsconfig.json, việc này được được đặt làm mặc định. Bạn có thể tìm hiểu thêm tại đây.

Xây dựng các component

Một trong những điểm lợi thế lớn nhất của việc sử dụng Typescript có thể việc không phải sử dụng gói prop-types. Chúng ta sẽ sử dụng các đặc điểm của Typescript để xây dựng và quản lý props và state, nếu bạn làm chủ được vấn đề này, bạn sẽ thấy nó mạnh hơn các phương pháp mặc định của React.

Chúng ta sẽ định nghĩa một props interface (phương thức của Typescript) cho từng component, nơi mà bạn sẽ truyền các giá trị props khi khởi tạo. Việc này định nghĩa cấu trúc của đối tượng sẽ được truyền vào, bao gồm cả kiểu dữ liệu và các key.

Ngoài ra chúng ta có thể khai báo một interface cho state của components.

Function component

Để lấy ví dụ cho function component với props, chúng ta sẽ thay thế thẻ <header> của React trong file App.tsx bằng thẻ <Header/> .

Bắt đầu bằng việc tạo file ./src/Header.tsx. function components này sẽ nhận vào một prop với key là name

Chúng ta bắt đầu bằng việc import React, sau đó định nghĩa một interface với tên là IProps , interface này mô tả một trường giá trị có tên là name , kiểu là string. Chúng ta để trường name là một giá trị tùy chọn (?). Việc định nghĩa một trường là tùy chọn với cú pháp ?, có nghĩa trường đó có thể có giá trị là type | undefined (trong trường hợp của chúng ta là string | undefined).

Khi chúng ta tạo ra Header component ở đoạn code trên có kiểu React.FC<IProps> (“FC” – React.FunctionComponent interface). Với việc định nghĩa như vậy, nó cho phép chúng ta sử dụng defaultProps và children. props của Header sẽ có kiểu IProps (interface mà chúng ta định nghĩa ở trên).

Class component

Để mô tả những nguyên tắc cơ bản của một class component, chúng ta sẽ thêm một thành phần vào nội dung của file App.tsx với việc xử lý một sự kiện đơn giản.

Một trong những điểm khác nhau giữa function component và class component là với class component chúng ta có thể quản lý, bảo toàn trạng thái của nó (state). Có một vài điểm khác nữa như là khả năng truy cập hay vòng đời component, nhưng nó không nằm trong phạm vi bài viết này.

Tạo ra file ./src/CatDescription.tsx với nội dung:

Chúng ta tạo ra 2 interface là IProps và IState, ở đây chúng ta có giá trị likeBy quyết định giá trị giá trị số like sẽ tăng. Component tự lưu trữ, quản lý và sử dụng state của chính nó (count – số lượng like).

CatDescription component được định nghĩa với kiểu props là IProps, state là IState. Kiểu khai báo là class CatDescription extends React.Component<IProps, IState> { (React type mô tả interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }). Trong component chúng ta có một biến static defaultProps – khởi tạo các giá trị mặc định cho props, tạo giá trị cho state với like = 0.

Hàm increase được dùng để tăng số lượng state.like. Trong hàm, hằng biến likeBy được khai báo với cú pháp const countBy: number = this.props.countBy!;, sử dụng ký tự ! để thông báo cho Typescript biết rằng giá trị this.props.countBy sẽ tồn tại (nếu không trình biên dịch sẽ báo lỗi: Kiểu number | undefined không thể gán cho kiểu number).

Trong hàm render sẽ trả lại nội dụng HTML của component.

Sử dụng Typescript componet cho React app

Bên trong file App.tsx, chúng ta sẽ import những component vừa mới tạo ở trên, sửa lại nội dung mặc định của file.

Các giá trị prop name (của Header) và likeBy (của CatDescription) nên được gán giá trị có cũng kiểu đã định nghĩa trong component, các giá trị này đều là tùy chọn, chúng ta có thể không cần gán giá trị cho chúng, khi đó defaultProps sẽ được sử dụng.

Đó là tất cả những gì cần để bắt đầu viết một ứng dụng React bằng Typescript.

Để xem ứng dụng chúng ta hoạt động như thế nào, sử dụng lệnh:

npm start
hoặc
yarn start