Cơ bản về TypeScript

Cơ bản về TypeScript Giới thiệu về vai trò của TypeScript, cách cài đặt, sơ lược về cách viết mã, biên dịch và thực thi trong trang web.

Cơ bản về TypeScript

Giới thiệu về TypeScript

TypeScript là ngôn ngữ lập trình dùng để lập trình javascript. Code typescript sau khi viết xong sẽ biên dịch thành ngôn ngữ javascript để chạy trong trang web.

Typescript nhiều đặc điểm hay, nhiều kiểu dữ liệu nâng cao, hỗ trợ tốt gỡ lỗi…. Cho nên dùng typescript là cách rất tốt giúp các lập trình viên triển khai lập trình front end nhanh chóng hơn, nhất là trong những dự án lớn, phức tạp.

TypeScript là mã nguồn mở, được phát triển và hỗ trợ bởi Microsoft.

So sánh Typescript và Javascript

Javascript

  • Chỉ làm việc với kiểu động (dynamic type), nghĩa là javascript tự dò kiểu dữ liệu theo các giá trị bạn sử dụng. Ví dụ x=5 thì javascript biết kiểu số, lúc khác bạn gán x=”Hạnh Phúc” thì javascript tự biết kiểu chuỗi.
  • Được phát triển bởi Netscape năm 1995.
  • Tên mở rộng của file javascript là .js
  • Javascript chạy trong các trình duyệt.
  • Lỗi chỉ biết được lúc chạy trang web.
  • Javascript là ngôn ngữ kịch bản (scripting language),
  • Người lập trình không cần kinh nghiệm về ngôn ngữ script trước đó.
  • Không cần cài đặt gì cả để chạy javascript, vì nó đã được tích hợp vào trình duyệt.

Type script

  • Làm việc với kiểu tĩnh (static type) – nghĩa la kiểu được khai báo trước để dùng và cả kiểu động (dymanic type)
  • Được phát triển bởi Anders Hejlsberg -2012.
  • Tên mở rộng của file là  .ts
  • Không chạy trực tiếp trên trình duyệt mà cần được biên dịch sang javascript để chạy.
  • Lỗi được tìm thấy lúc biên dịch nhờ đó dễ sữa. sửa sớm, giảm thời gian thực hiện dự án.
  • Hỗ trợ tốt lập trình hướng đối tượng với các classe, interface, inheritance, generic, …..
  • Kiến thức về javascript là bắt buộc phải biết trước.
  • Phải cài đặt typescript , thông qua npm

Công cụ viết code Typescript

Có nhiều công cụ để viết code TypeScript như VS Code, Sublime Text, Atom, Eclipse, WebStorm…Bạn dùng công cụ nào cũng được. VS Code cũng được Microsoft phát triển cho nên nó hỗ trợ bạn rất tốt khi code TypeScript. Nếu máy của Bạn chưa có tool này (VS Code) thì hãy cài vào nhé.

Cài đặt Typescript

Để cài đặt Typescript vào máy, bạn cần cài NodeJS trước. Vào https://nodejs.org/en/download/,  để tải bản NodeJS mới nhất về rồi thực hiện cài (dễ ợt). Trong lúc cài NodeJS đã có luôn npm được cài theo. NPM là chương trình quản lý các gói thư viện nguồn mở chạy trên nền NodeJS.

Khi đã có NodeJS và NPM, thì việc cài đặt TypeScript là rất đơn giản. Thực hiện thông qua npm với lệnh như sau:

Kiểm tra version TypeScript

Muốn biết Typescript đang chạy trong máy của mình là version mấy thì chạy lệnh 

tsc --version

Tài liệu chính thức TypeScript

Để tham khảo tài liệu Typescript, bạn vào địa chỉ sau đây để tra cứu : https://www.typescriptlang.org/docs/ . Hoặc có thể học Typescript từ w3school ở địa chỉ này https://www.w3schools.com/typescript/ 

Biên dịch typescript code

Sau khi code typescript đã được viết xong. Bạn cần biên dịch nó sang mã javacript để chạy trong trang web. Dùng lệnh sau trong command line hoặc Terminal VS Code để biên dịch 

tsc filename.ts

Khi chạy lệnh xong, Bạn sẽ có 1 file filename.js , trong đó là mã lệnh Javascript đã được chuyển từ TypeScript sang. Bạn chèn file .js vào trang web để chạy thôi.

Biên dịch code typetcript dùng tsconfig.json

Trình biên dịch typescript có thể nhận chì thị từ file cấu hình có tên tsconfig.json. Trong project, bạn tạo file này và khai báo các chỉ thị trong đó. Khi biên dịch, tsc sẽ nhìn vào để thực hiện theo ý bạn muốn.

Tạo file tsconfig.json

Để tạo file tsconfig.json, bạn cứ tạo 1 file trống như bình thường rồi nhận nội dung vào. Ví dụ nhập như hình dưới để chỉ thị folder đích chứa file .js được biên dịch, dịch thành code javascript theo quy định của ECMAScript 2022, không đưa comment vào file .js.

Bạn cũng có thể tạo file tsconfig.json bằng lệnh sau: 

tsc --init

Khi chạy lệnh trên, file tsconfig.json được tạo ra với rất nhiều thông số (đang tạm comment)

Các thông số thường dùng trong file tsconfig.json

  • target : chi định version ECMAScript sử dụng trong quá trình build code typescript ra  javascript.
  • removeComments : nếu là true thì khi build sang js sẽ bỏ các comment trong file ts . False thì sẽ chép comment sang.
  • outDir : là folder chứa các file js khi build xong.
  • noEmit:false để đảm bảo file js được đưa vào outDir
  • exclude : loại bỏ không build các file ts nếu có trong các folder liệt kê ở đây

Khi muốn build tất cả code typescript sang javascript theo cấu hình trong tsconfig.json, bạn đơn giản là chạy lệnh sau: 

tsc

Khi đó tất cả các file code .ts sẽ được build thành các file .js trong folder khai báo trong outDir, ngoại trừ các file .ts trong trong các folder exclude. Tuyệt chưa nào. 🙂

Truy xuất tag html trong TypeScript

Tương tác với DOM để truy xuất vào element trong trang web là đơn giản, cũng như lúc bạn code Javascript thuần thôi. Nghĩa là trong Typescript có thể truy xuất các tag trong trang, rồi lấy ra hoặc gán vào innerHTML, innertext, value… và các thuộc tính khác của element. Về vụ này, có thể xem thêm tại đây https://www.typescriptlang.org/docs/handbook/dom-manipulation.html

Đến đây chúng ta đã biết cơ bản về TypeScript rồi, chưa có gì nhiều đâu. Nhưng cách cài đặt, sơ qua về cách viết mã lệnh, biên dịch, tương tác với các tag… vậy cũng được rồi. Bài tiếp theo chúng ta sẽ đề cập về các kiểu dữ liệu trong TypeScript

BÀI VIẾT LIÊN QUANXEM THÊM