Typescript và những vùng đất mới

Thế là đã hết tuần đầu tiên của 2017, mọi người đã học được gì mới chưa? Giờ rãnh rỗi mới dành chút thời gian viết về Typescript, một thứ “ngôn ngữ” mới đã tranh thủ học được trong mấy ngày qua và chia sẻ một số góc nhìn cá nhân về Typescript. Đây cũng là bài khai trương năm 2017, hy vọng cả năm thăng hoa với nghiệp code và tổ nghiệp phù hộ làm ăn phát đạt.

Typescript là gì

Typescript là một ngôn ngữ lập trình “mới”, giúp tạo ra code Javascript nhưng viết bằng một loại Javascript “cao cấp” hơn. Typescript được phát hành bởi Microsoft, tạo ra bởi kiến trúc sư trưởng của C#, cha đẻ của Pascal và Delphi, do đó, hơi hướng phong cách của nó được coi là khá giống C# (cái này là nghe nói, vì không có code C# mấy chục năm từ thời sinh viên rồi).

Tại sao lại là Typescript?

Số là cuối năm vừa rồi, có code thử với React Native, nhưng sao thấy nó gò bó, hạn chế và không tự nhiên, nên quyết định tìm một bến đỗ mới cho hybrid app, thế là tìm đến với Ionic. Theo như review cũng như trải nghiệm app component của Ionic trên Android cùi thì thấy trải nghiệm khá mượt, đáng để tâm, thế là dấn thân vào Ionic.

Tuy nhiên, khi vừa bước vào cửa Ionic framework thì đập ngay vào mặt là AngularJs 2. Nghe nói đến Angular là sợ xanh mặt, vì có ảm ảnh với AngularJs 1 (bị ám thị bởi cộng đồng dev, chứ chưa thực sự làm project nào với Angular 1). Tuy nhiên, cũng nghe nói Angular 2 đã khác, lợi hại hơn xưa nên quyết tâm dấn thân, vì hiện tại stack đã có ReactJs, giờ thêm AngularJs nữa chắc thêm đồ chơi.

Vừa gõ cửa Angular 2 thì hỡi ơi, lại thấy hắn được viết bằng Typescript (cái đang đề cập trong bài này) và khuyến khích bà con làm Javascript sử dụng Typescript. Thế là từ Ionic, đành phải học Typescript trước, rồi leo thang sang Angular 2, rồi may ra mới có vé làm Ionic một cách bài bản.

Đó là con đường dẫn tôi đến với Typescript.

Typescript và ES6

Có lẽ không giống nhiều Js dev, mình không tiếp xúc với ES6 trước vì thấy cú pháp nó thật là “chán”, “lạ” và vả lại, hiện tại stack của mình đang ngon, tội tình gì học thêm cái mới, thêm quy trình chuyển đổi code. Bởi vì đến với Typescript là thiên duyên tiền định nên đi sâu vào nó, và phát hiện là Typescript là một ngôn ngữ có thể gọi là đã bao trùm lên cả ES6, tức là cung cấp các tính năng mà ES6 cung cấp. Thế là vô tình cũng được tìm hiểu ES6.

Typescript có gì hay?

Sau khi đọc hàng chục bài viết về Typescript, học hết course của Lynda về Typescript (https://www.lynda.com/Typescript-tutorials/TypeScript-Essential-Training/421807-2.html) thì thấy Typescript cũng có cái hay thiệt và có thể áp dụng khá nhiều kỹ thuật vào cách code javascript kiểu mới. Dưới đây mình chia sẻ 1 số tính năng mà mình thấy có thể sẽ sử dụng nhiều trong tương lai và cũng là một số lợi thế của việc dùng Typescript.

1. Môi trường Strongly Type

Như các bạn biết là Javascript không quy định chặt chẽ về kiểu dữ liệu, một biến có thể thay đổi sang các kiểu dữ liệu khác nhau, khiến cho phát sinh nhiều lỗi logic rất khó phát hiện hoặc các lỗi truy cập thuộc tính undefined object. Với môi trường strongly type của Typescript, sẽ giúp phát hiện các lỗi liên quan đến kiểu dữ liệu và đảm bảo dữ liệu đối tượng luôn được truy xuất đúng thuộc tính.

2. Lập trình hướng đối tượng (OOP)

Một trong những đặc điểm thú vị của Typescript là hỗ trợ cú pháp lập trình hướng đối tượng. Hầu hết các kỹ thuật lập trình hướng đối tượng đều có thể triển khai như kế thừa, constructor, thuộc tính, access modifier (public, protected, private), abstract, interface, implement, override…Rất tốt cho những ai quen thiết kế ứng dụng theo mô hình lập trình hướng đối tượng.

3. Fat Arrow

Thay đổi cách khai báo các closure ngắn gọn hơn và dễ dàng truy xuất biến this ngay trong khi xử lý closure mà không phải dùng cách workaround vẫn hay dùng như là cách gán this vào 1 biến bên ngoài (ví dụ self ) rồi trong closure block code thì sử dụng biến self để truy xuất.

4. Template string

Giúp nhanh chóng tạo multiline text và nhúng biến ngay trong nội dung chuỗi.

5. External Module

Cơ chế giúp kiến trúc hệ thống code theo hướng module, giúp xây dựng các dự án lớn và nhiều dev có thể làm việc chung với nhau, như cách include mà chúng ta vẫn hay dùng ở server side để sử dụng các thư viện.

6. Parameter Default Value

Giờ đây, khi khai báo hàm có thể khai báo giá trị mặc định cho một số tham số đầu vào.
—

Ở trên chỉ là một trong những đặc tính hữu ích mà Typescript mang lại. Có thể tham khảo đầy đủ tại https://www.typescriptlang.org/docs/tutorial.html

Quy trình làm việc với Typescript

Cũng như Javascript, bạn có thể viết code Typescript bằng Text Editor nào cũng được, mình thấy Visual Studio Code (của Microsoft) đã tích hợp sẵn trình phân tích cú pháp nên có thể phát hiện lỗi ngay trong khi code.

Hiện tại, để trình duyệt chạy được code từ Typescript thì phải dịch sang code Javascript tương thích. Để làm việc với Typescript thì mình sử dụng bộ compile download từ Microsoft hoặc npm tên là tsc, sẽ giúp chuyển từ code Typescript sang code Javascript để chạy trên trình duyệt hoặc trên môi trường Javascript khác, với điều kiện là mình cấu hình để compiler này sẽ compile source sang chuẩn nào (es5, es6…)

—-
Như vậy, việc tiếp cận với Typescript đã giúp mở mang thêm được một ngôn ngữ mới cũng như hiểu được các đặc điểm mới của ES6, giúp cung cấp thêm đồ chơi cho kho vũ khí lập trình của mình. Mặc dù mới chỉ ra được 2 năm, nhưng Typescript hiện được cộng đồng chú ý và sử dụng khá nhiều, các bạn cũng nên nghiên cứu và trang bị kiến thức là vừa, kẻo lạc hậu thì sau này khó mà nghiên cứu các open source, framework viết bằng Javascript.

Hy vọng tuần tiếp theo sẽ có thể tự tin hơn trong việc nghiên cứu AngularJs 2 để hoàn thành sứ mệnh là sử dụng được Ionic framework.

Techtalk via bloghoctap