Ngôn ngữ TypeScript
Bài đăng này đã không được cập nhật trong 8 năm
Cách đây vài tháng mình có bắt đầu làm quen với ngôn ngữ TypeScript để phục vụ dự án. Mình thấy nó rất hay nên muốn chia sẻ cùng các bạn. Chúng ta cùng nhau tìm hiểu ngôn ngữ này nhé. Trước tiên cần phải biết nó là ngôn ngữ như thế nào đã.
Giới thiệu về TypeScript
TypeScript là một ngôn ngữ mã nguồn mở miễn phí hiện đang được phát triển và bảo trì bởi Microsoft. Nó là tập cha của JavaScript, với các bổ sung các tuỳ chọn kiểu tĩnh và lớp trên cơ sở lập trình hướng đối tượng cho ngôn ngữ này. Anders Hejlsberg, kiến trúc sư ngôn ngữ C# và là người tạo ra ngôn ngữ Delphi và Turbo Pascal đã tham gia phát triển TypeScript. TypeScript có thể sử dụng để phát triển ứng dụng chạy phía client, hay phía server (Node.js)
TypeScript được thiết kế để phát triển ứng dụng lớn và được biến đổi - biên dịch sang JavaScript. Vì TypeScript là tập cha của JavaScript nên bất kì chương trình JavaScript nào đã có cũng đều là chương trình TypeScript hợp lệ.
TypeScript hỗ trợ định nghĩa các file chứa thông tin kiểu của các thư viện JavaScript, giống như các file header của C/C++ mô tả cấu trúc của các file object. Điều này cho phép các chương trình khác sử dụng các giá trị được định nghĩa trong các file giống như các thực thể TypeScript được định kiểu tĩnh. Đó là các file header hãng thứ ba (third-party) cho các thư viện thông dụng như jQuery, MongoDB, D3.js. Các file header cho các module cơ bản cho Node.js cũng có sẵn cho phép phát triển chương trình Node.js bằng TypeScript.
Bản thân trình biên dịch TypeScript cũng được viết bằng TypeScript, biến đổi – biên dịch sang JavaScript và được cấp phép theo Giấy phép Apache 2.
TypeScript lần đầu được gắn sẵn như một ngôn ngữ lập trình trong Microsoft Visual Studio 2003 Update 2 và các phiên bản sau đó, cùng C# và các ngôn ngữ khác của Microsoft. Một thành phần mở rộng chính thức cũng cho phép Visual Studio 2012 hỗ trợ tốt cho TypeScript.
Cài đặt TypeScript
Có 2 cách để cài đặt TypeScript:
- Sử dụng npm:
npm install -g typescript - Sử dụng plugin của Visual Studio.
Với Visual Studio 2015 và Visual Studio 2013 Update 2 đã được cài TypeScript mặc định. Ngoài ra bạn có thể tải plugin cho Visual Studio tại đây: http://www.typescriptlang.org/#download-links
Xây dựng ứng dụng đầu tiên với TypeScript
Các bạn có thể sử dụng các trình soạn thảo để code TypeScript như: Visual Studio(chỉ sử dụng trên windows), Visual Studio Code, Sublime Text, Vim, Eclipse, ... Còn mình thì sử dụng Atom để code món này.
Các bạn tạo 1 file hello.ts với nội dung sau:
function hello(name) {
return "Hello, " + name;
}
let user = "Phuc";
document.body.innerHTML = hello(user);
Giờ thì các bạn sử dụng lệnh tsc hello.ts để biên dịch từ file .ts ra file .js
Và đây là nội dung của file hello.js sau khi được biên dịch:
function hello(name) {
return "Hello, " + name;
}
var user = "Phuc";
document.body.innerHTML = hello(user);
Cũng chưa thấy gì đặc biệt đúng không nào các bạn. Chúng ta thử dùng chút gì đó đặc trưng của TypeScript hơn nhé.
Các bạn sửa lại nội dung của file hello.ts như sau:
interface Person {
firstName: string;
lastName: string;
}
function hello(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Phuc", lastName: "Le Cong" };
document.body.innerHTML = hello(user);
Lại một lần nữa chúng ta sử dụng tsc hello.ts để biên dịch lại ra file .js. Và nội dung của file hello.js sau khi biên dịch lại:
function hello(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Phuc", lastName: "Le Cong" };
document.body.innerHTML = hello(user);
Giờ chúng ta đã thấy sự khác biệt giữa 2 file .ts và .js rồi đúng không ạ. Nếu chúng ta viết theo hướng đối tượng thì TypeScript thú vị đấy chứ. Nhưng TypeScript có vẻ dài ngoằng hơn là viết JavaScript thông thường??? Đừng vội kết luận nhé, mình sẽ trả lời câu hỏi đó ở những bài tiếp theo.
Việc còn lại là chúng ta gọi file hello.js trên file html để sử dụng thôi. Mình có 1 file hello.html như sau:
<!DOCTYPE html>
<html>
<head><title>TypeScript</title></head>
<body>
<script src="hello.js"></script>
</body>
</html>
Chạy thử thôi, như vậy bạn đã xây dựng xong 1 ứng dụng web đơn giản với TypeScript.
Hẹn gặp lại các bạn ở loạt bài tiếp theo về TypeScript. Mong nhận được thật nhiều góp ý của các bạn.
Tham khảo
All rights reserved
