Chào mấy anh em nhé, năm hết tết đến ai cũng bận rộn việc này việc kia, mình cũng không ngoại lệ , ngồi nhìn qua nhìn lại anh em ai cũng sử dụng cú pháp javascript thông thường hay flow mà quên mất hot trend đang là typescript. Nhân đây mình cũng xin mạo muội chia sẽ cách đơn giản nhất để tạo 1 project với React và TypeScript sử dụng cả Webpack và Babel nữa nhé .

1. Chuẩn bị

Kiến thức cần có:

• Đã có kiến thức cơ bản về reactjs.
• Đã có kiến thức cơ bản về webpack, babel.
• Đã có kiến thức cơ bản về typescript (Nếu chưa thì qua bài này rồi anh em chiến vẫn vô tư nhé =))).

Môi trường:

• window 10
• node v12.14.0
• yarn v1.7.0
• visual studio code 1.41.1

Bỏ qua:

• Không giải thích những thuật ngữ và các lệnh cơ bản.
• Những phần cấu hình không quan trọng, các bạn có thể xem thêm thông qua repo.

2. Tiến hành

TypeScript là cái gì ?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Hiểu nôm na thì nó là 1 dạng syntax nâng cao của JavaScript và khi biên dịch thì nó trở thành JavaScript. Một số ưu điểm mình thấy hay:

1. Hướng đối tượng mạnh mẽ (class, abstract, interface, .etc)
2. Tốc độ type-checking siêu nhanh
3. Generics
4. Hỗ trợ các tính năng mới nhất của JavaScript
5. Có thể biên dịch trực tiếp sang ES5 thông qua CLI syntax của chính nó
6. Cách tổ chức source code rõ ràng, chặt chẽ
7. Hầu hết các trình soạn thảo hiện nay đều hỗ trợ
8. Cộng đồng mạnh mẽ

Ngoài ưu thì sẽ có nhược, phần này sau khi làm một thời gian thì các bạn tự đúc kết ra nhé =))

Trang chủ

Các bước

Không luyên thuyên nữa. bây giờ chúng ta bắt đầu nhé.

1. Tạo project

yarn init -y

2. Cài đặt 1 số thư viện cần thiết

Mình sẽ sử dụng babel để biên dịch cú pháp TypeScript thay vì cách thông thường của nó, đơn giản vì babel có nhiều preset, plugin và config tiện lợi hơn.

devDependencies

yarn typescript --dev
yarn add @babel/preset-typescript --dev
yarn add @types/react @types/react-dom --dev

Cài đặt thư viện typescript để sử dụng CLI init file cấu hình của nó nhé, ngoài còn nhiều còn nhiều lệnh khác các bạn có thể tham khảo trên trang chủ.

dependencies

yarn add react react-dom

File package.json hoàn chỉnh

3. Tạo file config

.babelrc

webpack.config.js

File quan trọng nhất khi làm việc với TypeScript là tsconfig.json

yarn tsc --init

Các option các bạn có thể tham khảo tại đây
Nó sẽ ra hàng loạt các cấu hình sau khi init, chúng ta sẽ lượt bớt những thằng không cần thiết.

tsconfig.json

4. File ví dụ

Có thể sử dụng nhiều file có ext như tsx, ts, js, jsx , tùy vào cấu hình của anh em nhé.

Tạo file component Hello.tsx

Props sẽ mô tả các props mà component này sẽ nhận, có rất nhiều type React.FC đây là type của thằng React mô tả cho FunctionComponent

Tạo file root component (cũng là entrypoint được ta cấu hình trong file webpack.config) App.tsx

5. Chạy

yarn start

Ngon lành cành đào

Mọi thứ đều rất đơn giản phải không ?

3. Kết luận

Đây là cách đơn giản mà mình sử dụng để tạo 1 project React, Vue bất kì kết hợp với TypeScript.
Ngoài ra còn rất nhiều thứ thú vị khác, cùng nhau tìm tòi và học hỏi không ngừng khi có thể nhé .
Cảm ơn anh em đã đọc bài viết này. Chúc anh em năm mới nhiều thành công nhé .

Repo tại đây