Hôm nay, con người sẽ học ngôn ngữ lập trình TypeScript, một ngôn ngữ được biên dịch thành JavaScript, được thiết kế để tạo ra các ứng dụng lớn và phức tạp. Nó kế thừa nhiều định nghĩa từ các ngôn ngữ như C# và Java, những ngôn ngữ nghiêm ngặt và có trật tự trái ngược với sự dễ chịu và free-typed của JavaScriptt.
Ngôn ngữ lập trình Typescript là gì?
Typescript là một dự án mã nguồn mở được Microsoft tăng trưởng, được coi như một phiên bản nâng cao của Javascript.
TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.
Tại sao lại được xem là phiên bản nâng cao của Javascript? Vì nó được cung cấp những tùy chọn kiểu tĩnh và các lớp hướng đối tượng, nó bao hàm luôn ES6(ECMAScript 6 2015) – phiên bản mới nhất của Javascript.
TypeScript thêm các namespace, class và module tùy chọn vào JavaScript. TypeScript hỗ trợ các công cụ cho các ứng dụng JavaScript quy mô lớn cho bất kỳ trình duyệt nào, cho bất kỳ máy chủ nào, trên bất kỳ hệ điều hành nào.
>>>Xem thêm: Top những ngôn ngữ lập trình web phổ biến nhất hiện nay
Lợi thế của việc sử dụng TypeScript
JavaScript đã đủ tốt và bạn có khả năng tự hỏi: Liệu tôi có thực sự cần học TypeScript? Về mặt kỹ thuật, bạn không cần học TypeScript để trở nên một lập trình viên giỏi, hầu như mọi người đều ổn mà không có nó. Tuy vậy, thực hiện công việc với TypeScript có một số lợi thế sau:
- Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn.
- Đơn giản tổ chức code cho các ứng dụng cực lớn và phức tạp nhờ modules, namespaces và giúp đỡ OOP mạnh mẽ.
- TypeScript có một bước biên dịch thành JavaScript, sẽ bắt toàn bộ các loại lỗi trước khi chúng chạy và làm hỏng một vài thứ.
- Framework Angular 2 viết với TypeScript và nó cũng khuyến khích các lập trình viên dùng ngôn ngữ này trong các dự án của họ.
Các Text Editor giúp đỡ ngôn ngữ lập trình TypeScript
TypeScript là một dự án mã nguồn mở nhưng được phát triển và kéo dài bởi Microsoft và vì thế nó được hỗ trợ sẵn trong nền tảng Visual Studio của Microsoft.
Ngày nay, rất nhiều text editor và IDE giúp đỡ sẵn hoặc thông qua các plugin để hỗ trợ cú pháp của TypeScript, auto-complete suggestions, bắt lỗi và thậm chí tích hợp sẵn trình biên dịch.
- Visual Studio Code – Một trình soạn thảo mã nguồn mở của Microsoft. Hỗ trợ sẵn TypeScipt.
- Plugin cho Sublime Text
- Phiên bản mới nhất của WebStorm cũng giúp đỡ TypeScipt
- Và nhiều trình soạn thảo khác như Vim, Atom, Emacs …
Biên dịch sang JavaScript
TypeScript được viết trong các file .ts (hoặc .tsx cho JSX), nó chẳng thể sử dụng trực tiếp trong trình duyệt và cần biên dịch thành JavaScript. FFiều này có khả năng hành động với một vài cách:
- Trong terminal dùng lệnh tsc
- Trực tiếp trong Visual Studio hoặc các IDE và trình biên soạn khác
- Dùng các task runner như Gulp
Bí quyết trước tiên là đơn giản nhất, cho những người mới tiếp tục, vì thế chúng ta sẽ sử dụng nó trong bài đăng này.
Sau đây tìm hiểu một số đặc điểm của TypeScript
Khai báo biến với kiểu dữ liệu chi tiết
TypeScript cho phép khai báo biến bằng việc chỉ ra kiểu dữ liệu chi tiết của biến
var username: string;//Hoặc hình thành luôn var username: string = "XTLAB";//Hoặc kiểu dữ liệu bất kỳ username: any;
Có các loại dữ liệu nguyên thủy string, number, boolean cũng có khả năng chỉ định biến đó nhận kiểu dữ liệu bất kỳ với any, việc cho khai báo như vậy giúp phát hiện lỗi ngay từ khi code, chẳng hạn như khai báo biến là string lại gán số sẽ có thông báo lỗi khi dịch.
Khai báo biến mảng với kiểu dữ liệu cụ thể
Dùng ký hiệu [] sau kiểu dữ liệu
var learning: string[];learning =["JavaScript","PHP","CSS"];//Hoặc var learning: string[] = ["JavaScript", "PHP", "CSS"];var js : string = learning[0];
Cũng có thể dùng ký hiệu {} để tạo mảng có thông số khó khăn (đối tượng với thuộc tính) như JS
var learning =first:'HTML', second:'CSS';console.log(learning['first']);console.log(learning.second);
Interface – bố cục và giao diện lập trình
TypeScript cho khai báo cấu trúc của một loại dữ liệu gọi là bố cụ và giao diện interface, những đối tượng có các thuộc tính, dữ liệu đồng nghĩa với giao diện thì có khả năng dùng nó như giao diện đã biết.
//Khai báo một giao diệninterfaceProductname: string,price: number//Hàm nhận tham số có bố cụ và giao diện Productfunction showProduct(product:Product)console.log(product.name +':'+ product.price);//Tạo ba đối tượngvar p1 =name:'Iphone', price:500, os:'IOS10';var p2 =name:'Iphone', price:'Không biết';var p3 =name:'Iphone', os:'IOS10';showProduct(p1);//Ok vì p1 có giao diện ProductshowProduct(p2);//Báo Lỗi vì p2 có price kiểu string => khác giao diện ProductshowProduct(p3);//Báo Lỗi vì p3 không có tính chất price => khác bố cục và giao diện Product
Class – Lớp và tính kế thừa lớp
Tạo ra và sử dụng lớp trong TypeScript thì giống như trong JavaScript (xem Lớp trong JavaScript trước, chỉ có điều các thuộc tính, tham số phương thức phải khai báo với kiểu dữ liệu cụ thể). Bên cạnh đó với TypeScipt các phương thức, thuộc tính là chung, riêng, bảo vệ (giống C#) được khái báo với keyword public (mặc định), private (không truy xuất được ngoài lớp), protected (giống private, nhưng lớp kế thừa truy xuất được).
>>>Xem thêm: Thuật toán sắp xếp nào là nhanh nhất?
Các file khai báo của bên thứ 3
Khi sử dụng một thư viện được thiết kế cho JavaScript, con người cần ứng dụng một file khai báo để làm cho thư viện đó tương thích với TypeScript. Một tệp khai báo có phần mở rộng là .d.ts và chứa nhiều thông tin về thư viện và API của nó.
Các tệp khai báo của TypeScript hay được viết bằng tay, nhưng nhiều khả năng thư viện bạn cần đã có sẵn một tệp .d.ts do một ai đấy tạo ra. Definitely Typed là repo (kho) khổng lồ nhất, chứa các file khai báo cho hàng nghìn thư viện. Cũng có một module Node.js được sử dụng phổ biến để quản lý các file khai báo TypeScript là Typings.
Bài viết trên, mình đã chia sẻ tổng hợp các kiến thưc về ngôn ngữ lập trình TypeScript. Cảm ơn các bạn đã theo dõi bài viết nhé!
>>Xem thêm: Mã UTM code là gì? Cách đo lường hiệu quả chiến dịch quảng cáo
Mỹ Phượng-Tổng hợp
Tham khảo: (xuanthulab, viblo,…)
