ReactJS with Typescript [Series]. Phần 1 Basic Typescript

Chào các bạn cộng đồng lập trình f8 mình cũng là một thành viên.Hôm nay mình muốn viết một series về ReactJS kết hợp với typescript . Mình mong mọi người sẽ đón nhận và trao đổi kiến thức với nhau.Bài viết này sẽ viết về những điều tuyệt vời và hay ho khi làm việc với typescript nhé.

I. Giới thiệu về Typescript và cách cài đặt

1. Typescript là gì? Điểm mạnh và tại sao nên sử dụng.

• TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript. TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS).
• Như hình ở trên các bạn có thể thấy Typescript bao trọn Javascript và ES6 ngoài ra còn có Interfaces,Strongly Typed và Generics nữa cấu tạo thành Typescript.Qua đó chúng ta thấy Typescript sử dụng tất các các tính năng của ES6(ECMAScript 2015) như là class, module, destructuring...ngoài ra còn sử dụng các Interfaces, Generics ngoài ra còn có một số tính năng khác mình sẽ nói rõ ở phần dưới.Nhưng bản chất Typescript cũng sẽ compiles ra Javascript cũng có thể nói là Typescript là Javascript và browser thì không thể đọc được Typescript nên mới cần biên dịch ra Javascript để thực thi các lệnh và đó là đôi giới thiệu qua về Typescript.

2. Vậy tại sao nên dùng Typescript.

• Dễ học và dễ code : Vì được kế thừa cũng như dựa trên các cú pháp từ javascript và code theo kiểu hướng đối tượng như class,interface,generics... nên sẽ dễ tiếp cận.
• Dễ scale dự án : Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng.Việc code dự án javascript với dự án càng lớn thì sẽ có rất nhiều kiểu dữ liệu đầu vào và đầu ra khác nhau và việc chúng ta phải nhớ hoặc phải mò lại code rất khổ sở cũng như không rõ sẽ làm cho việc code trở nên khó khăn nhưng đối với Typescript thì chúng ta sẽ biết rõ dữ liệu đầu vào (input) cũng như dữ liệu đầu ra (output) một cách rõ ràng giúp chúng ta thuận tiện khi code.Ngoài ra nó còn được phát triển bởi microsoft nên khi sử dụng cùng với VScode sẽ có rất nhiều các extendsions giúp hỗ trợ nhắc lệnh hoặc báo lỗi rất tốt.
• Được nhiều người sử dụng cũng như các Framework sự dụng : Typescript được mọi người sử dụng Javascript rất yêu thích và chuyển qua sử dụng ngoài ra còn có các Framework khuyên khích sử dụng như ReactJS,AngularJS nên sẽ có cộng đồng phát triển rất mạnh hỗ trợ việc chúng ta học và làm viêc.

II. Cách cài đặt

1. Cài đặt Typescript Global

• Chạy lệnh : npm install -g typescript ở terminal. Các bạn lưu ý là trong máy đã cài Nodejs để có thể install. sau khi install thành công thì các bạn sự dụng lệnh tsc -v để kiểm tra
• Cách để chạy thử file typescript : Đầu tiên mình tạo ra một file blog.ts là một file Typescript với nội dung như hình.Để compile ra file Javascript mình sử dụng lệnh tsc blog.ts để tạo ra file blog.js để thực thi các lệnh.Và cuối cùng để thực thi file blog.js thì ta dùng lệnh node blog.js và đây là kết quả. Và chúng ta đã thực thi thành công.

2. Tạo dự án ReactJS + Typescript.

• Sử dụng create-react-app : Nếu các bạn chưa biết về create-react-app thì đầy là một công cụ giúp chúng ta có thể triển khai một dự án ReactJS nhanh chóng và hiệu quả. Vậy làm sao để có thể sử dụng create-react-app để tạo dự án kết hợp ReactJS + Typescript ? Thật may là rất dễ dàng để làm điều đó với một dòng lệnh. Đói với npm npx create-react-app my-app --template typescript Hoặc với yarn yarn create react-app my-app --template typescript. Sau khi tạo dự án thành công thì dự án sẽ có các thư mục như một dự án bình thường ngoài ra còn có thêm file tsconfig.json để chúng ta config cho typescript.Các bạn có thể cd vào dự án và chạy lênh npm start or yarn start để chạy dự án thử.
• Add Typescript với dự án React có sẳn : Chúng ta sẽ add typescript các type cho node, react-dom, react với câu lệnh npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add typescript @types/node @types/react @types/react-dom @types/jest. Sau đó chúng ta sẽ sửa các file .js sang .ts và sửa các file bị lỗi nếu có vì có chưa có các type quá trình này sửa khác là mệt đây là một cách add Ts vào dự án các bạn có thể tham khảo.

Đây là blog đầu tiên mình viết mong các bạn có thể đóng góp, góp ý cho mình cảm ơn mọi người.