Typescript là gì? Ngôn ngữ kịch bản kế thừa từ Javascript

Bizfly Cloud

3565

05-06-2024

Typescript có lẽ vẫn còn là một khái niệm mới ít phổ biến ngay cả trong lĩnh vực công nghệ thông tin, nhất là với những ai không chuyên lập trình. Một ngôn ngữ kịch bản dựa trên JavaScript nhưng lại hỗ trợ tốt cho hướng đối tượng, được tạo ra bởi Microsoft nhưng lại cấp giấy phép nguồn mở,… Còn điều gì thú vị đằng sau ngôn ngữ này nữa? hãy cùng Bizfly Cloudđi tìm câu trả lời trong bài viết hôm nay.

TypeScript là gì?

Tên như ý nghĩa, TypeScript là một ngôn ngữ kịch bản (script) mã nguồn mở do Microsoft phát triển, kế thừa từ nền tảng của JavaScript và bổ sung khả năng làm việc với các kiểu dữ liệu tĩnh (static type).

TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở cả client-side (Angular2) và server-side (NodeJS). TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules. Trước khi TypeScript ra đời, cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google hỗ trợ những concept trên nhưng chúng lại sử dụng cú pháp mới hoàn toàn. Do đó, tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự phản hồi tích cực từ các lập trình viên.

Vì sao nên sử dụng TypeScript

Dễ phát triển dự án lớn

Trong một thời gian dài, các lập trình viên đã luôn gặp khó khăn khi muốn làm việc với hướng đối tượng hay thậm chí là khái niệm căn bản về kiểu dữ liệu trong JavaScript. Rất nhiều lỗi compile time không thể phát hiện tự động như gán dữ liệu sai kiểu hay việc tạo class khó khăn khiến lập trình viên không muốn sử dụng JavaScript quá nhiều.

TypeScirpt ra đời và khắc phục những nhược điểm trên bằng cách áp dụng các kỹ thuật mới nhất của ES6 cũng như khả năng làm việc với kiểu dữ liệu tĩnh. Giờ đây các biến được kiểm soát kiểu dữ liệu chặt chẽ, lỗi kiểu cũng có thể được code editor chỉ ra ngay trong quá trình viết mã giúp việc phát triển các dự án lớn dễ dàng hơn.

Nhiều lựa chọn Framework

Hiện nay các JavaScript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển vì những đặc tính ưu việt, ví dụ như AngularJS 2.0 và Ionic 2.0.

Mã nguồn mở

Ngay cả Microsoft từng tuyên bố "Linux là một căn bệnh ung thư" giờ đây cũng đã cởi mở hơn với mã nguồn mở, dẫn đến sự ra đời của TypeScript. Có thể thấy những lợi ích của nguồn mở là không cần bàn cãi: miễn phí, an toàn, linh hoạt và có cộng đồng hỗ trợ nhiệt tình.

Tương thích tốt với JavaScript

Bản chất của TypeScript là biên dịch tạo ra các đoạn mã JavaScript nhờ các trình biên dịch như Babel nên bạn có thể chạy bất kì ở đâu miễn là môi trường có hỗ trợ JavaScript. 

Trong quá trình biên dịch các khai báo kiểu được kiểm tra và nếu không phát hiện lỗi, chúng sẽ được loại bỏ để trở thành JavaScript quen thuộc. Điều này cũng có nghĩa là bạn có thể sử dụng trộn lẫn cú pháp của JavaScript vào bên trong TypeScript, giúp việc tiếp cận TypeScript dễ dàng hơn.

Chức năng của TypeScript

Static Typing

Một trong những tính năng đáng giá nhất của TypeScript là kiểu dữ liệu tĩnh - static type. Dĩ nhiên nếu đã quen với cú pháp JavaScript thông thường thì bạn có thể bỏ qua bước khai báo kiểu này và để compiler tự xác định, nhưng có thể chắc chắn rằng phần lớn lập trình viên đã mong chờ khả năng khai báo kiểu này khi làm việc lần đầu với JavaScript, nhất là khi đã từng sử dụng các ngôn ngữ lập trình như C/Java,… Khả năng khai báo kiểu giúp kiểm soát các biến tốt hơn và đồng thời phát hiện sớm, giảm thiểu lỗi trong quá trình biên dịch/runtime.

Ví dụ, với JavaScript trước đây ta có thể khai báo một biến và gán bất kỳ kiểu dữ liệu nào cho nó. Trong TypeScript, do đã định kiểu trước nên kiểu dữ liệu của giá trị gán vào cùng kiểu với biến, nếu gán sai sẽ có lỗi và không thể biên dịch:

TypeScript hỗ trợ 7 kiểu dữ liệu cơ bản bao gồm: boolean, number, string, array, enum, any, void

Interfaces

Interface hay giao diện là một khái niệm quen thuộc trong hướng đối tượng, nó quy định cấu trúc bắt buộc (thuộc tính, phương thức, sự kiện) mà mọi thực thể (object) triển khai (implement) interface đó phải tuân thủ chặt chẽ. Interfaces trong TypeScript cũng dựa trên tinh thần đó, sử dụng static types để khai báo các thành phần và ràng buộc kiểu, nhưng chỉ dừng lại ở khai báo mà không implement.

Lấy ví dụ về Interface IPerson

Khi implement interface IPerson, object phải implement đầy đủ các thuộc tính (fullname, gender), phương thức (sayHi) và tuân thủ ràng buộc kiểu đã đặt ra. Object cũng có thể bổ sung tùy ý các thành phần riêng mà interface không quy định. Khai báo như sau là hợp lệ:

Classes

Classes cũng là khái niệm cốt lõi khác trong hướng đối tượng, sử dụng để quy định cấu trúc của một lớp các đối tượng. Classes trong TypeScript là tính năng có từ phiên bản ECMAScript 2015 (ES6), nó có tương đối đầy đủ các tính năng của classes trong các ngôn ngữ lập trình thuần hướng đối tượng như constructor, inheritance, abstract classes, interface implementations,…

Modules

Khả năng phân rã thành modules là rất quan trọng trong các dự án cần tái sử dụng mã nguồn và khả năng mở rộng về sau. Module hóa cũng giúp tổ chức mã nguồn khoa học hơn và dễ đọc, dễ bảo trì. TypeScript cho phép export các class, interfaces, functions,… thành một module để sử dụng ở nơi khác và import các module có sẵn để tận dụng code.

Có 2 kiểu module chính là Internal Module (sử dụng trong cùng file js) và External Module (sử dụng module từ nhiều file JS khác nhau). Do JS truyền thống quản lý file dựa trên cặp thẻ , trình duyệt nạp từng file (và các module trong đó) một cách tuyến tính, khiến không có cách nào chạy bất đồng bộ các module này.

TypeScript xử lý vấn đề bằng cách sử dụng các thư viện RequireJS cho client side và Nodejs cho server side để liên kết các file JS và sử dụng bất đồng bộ các module.

Generics

Generics là một kỹ thuật lập trình tiên tiến, khi người ta tách kiểu dữ liệu ra khỏi logic xử lý và cấu trúc dữ liệu. Với Generics code chỉ cần viết một lần và kiểu dữ liệu có thể được quy định ở compile time, giúp nâng cao khả năng tái sử dụng. Generics trong TypeScript gần tương tự C#, không chỉ dùng cho hàm mà còn cả Classes và Interfaces.

Những kiểu dữ liệu phổ biến trong TypeScript

Một số kiểu dữ liệu trong TypeScript đó là:

Kiểu dữ liệu cơ bản gồm:

• Number: Số, có thể là số thực hoặc số nguyên. Ví dụ number = 321;
• Boolean: Đại diện cho giá trị logic, có thể là true hoặc false. Ví dụ boolean = false.
• String: Đại diện chuỗi ký tự. Ví dụ string = ‘200Lab’;
• Void: Đại diện những hàm không trả về giá trị. Ví dụ function logMessage(message: string): void { console.log(message); }
• Null: Đối tượng không có bất kỳ giá trị nào. Ví dụ null = null;
• Undefined: Đại diện cho giá trị chưa được khởi tạo. Ví dụ undefined = undefined;
• Any: Đại diện cho kiểu dữ liệu bất kỳ. Ví dụ any = "hello"; value = 10; value = true;

Kiểu dữ liệu đối tượng gồm:

• {key: type}: Đối tượng có thuộc tính key mang kiểu dữ liệu type
• Object: Đối tượng không được xác định cụ thể

Kiểu dữ liệu mảng gồm:

• Array: Mảng chứa những phần tử có cùng kiểu dữ liệu
• T[]: Mảng chứa những phần tử có kiểu dữ liệu T

Kiểu dữ liệu tuple gồm

Mảng với số lượng phần tử cố định và kiểu dữ liệu cụ thể cho mỗi phần tử.

Kiểu dữ liệu hợp nhất hay Union types gồm:

• Number | string: Kiểu dữ liệu có thể là số hay chuỗi.
• Type1 | type2 | type3: Kiểu dữ liệu có thể là một trong những kiểu được liệt kê.

Kiểu dữ liệu liên kết hay Intersection types gồm:

• Type1 & type2: Kiểu dữ liệu gồm kết hợp của type1 và type2.

Kiểu dữ liệu hàm gồm:

• (param1: type1, param2: type2) => returnType: Kiểu dữ liệu của một hàm mang các tham số và giá trị trả về được xác định.

Kiểu dữ liệu enum gồm:

Liệt kê những giá trị có thể có của một kiểu dữ liệu.

Ngoài những kiểu dữ liệu trên, TypeScript còn có những kiểu dữ liệu nullable, kiểu dữ liệu tùy chỉnh và kiểu dữ liệu đa hình.

 Ứng dụng của ngôn ngữ Typescript

Sử dụng ngôn ngữ TypeScript trong lập trình mang đến nhiều mang lại rất nhiều lợi ích, đó là:

• Mã nguồn dễ đọc, dễ bảo trì: Với kiểu dữ liệu rõ ràng, mã nguồn trong TypeScript dễ hiểu hơn, tạo điều kiện thuận lợi cho việc bảo trì, cũng như mở rộng sau này.
• Phát triển an toàn hơn: TypeScript sử dụng kiểu dữ liệu tĩnh, giúp phát hiện lỗi liên quan đến cú pháp và kiểu dữ liệu trong giai đoạn phân tích mã nguồn, tăng cường tính ổn định và an toàn cho ứng dụng.
• Tích hợp tốt với JavaScript: TypeScript là một siêu tập lệnh của JavaScript, cho phép sử dụng mã nguồn JavaScript hiện tại mà không cần phải chuyển đổi hoàn toàn, tối ưu hóa sự kết hợp giữa hai ngôn ngữ.
• Tăng hiệu suất phát triển: Các tính năng kiểm tra lỗi khi nhập liệu, IntelliSense trong TypeScript giúp lập trình viên có thể phát triển ứng dụng nhanh hơn và chính xác hơn.
• Hỗ trợ cộng đồng lớn: TypeScript có một cộng đồng người dùng rất lớn và luôn hoạt động tích cực. Được đầu tư bởi Microsoft và những công ty công nghệ lớn khác, TypeScript đảm bảo sự phát triển lâu dài và bền vững.

Ưu, nhược điểm khi dùng TypeScript

Để có thể hiểu hơn về TypeScript, bạn đọc có thể tham khảo những ưu điểm và nhược điểm dưới đây:

Ưu điểm

Thuận tiện và hoàn toàn miễn phí

Đối với ngôn ngữ lập trình tĩnh như TypeScript, ta có thể lấy tất cả số liệu và thông số của người dùng dễ dàng hơn nhờ có IDE và trình biên dịch. TypeScript có khả năng hỗ trợ tìm kiếm, giúp rút ngắn thời gian kiểm tra lại code, không cần thông qua người dùng khác để tìm thông tin dữ liệu. Đồng thời giảm thiểu phần trăm va chạm lỗi trong quá trình vận hành. Đây là một trong những phần mềm nổi trội được Microsoft hỗ trợ hoàn toàn miễn phí.

Thao tác nhanh chóng, đơn giản

Khi sử dụng ngôn ngữ thông thường, người dùng sẽ phải khởi động lại hàm, tạo đối số và hoàn thành đoạn mã. Sau khi áp dụng các đoạn mã và công cụ cần thiết, thì bắt đầu vận hành. Trong quá trình vận hành, nếu phát hiện có lỗi thì tiến hành sửa chữa lại. Trong khi đó TypeScript có thao tác khá đơn giản, dễ đọc, giúp tiết kiệm thời gian, khắc phục tình trạng gặp lỗi.

Tái cấu trúc

Trong quá trình viết code, lập trình viên sẽ thường xuyên mắc phải các lỗi nhỏ và cần chỉnh sửa. Việc sử dụng TypeScript sẽ giúp cho thao tác chỉnh sửa code trở nên dễ dàng hơn, nhờ có lệnh Rename Symbol/Find All Occurrences. Ngược lại đối với các ngôn ngữ khác, khi cần sửa đoạn code nào đó thì sẽ phải thay đổi cả những tập tin liên quan khác hoặc sử dụng RegEx.

Trong trường hợp người dùng TypeScript muốn nâng cấp hệ thống (thêm/xóa thuộc tính, đổi tên,…), TypeScript giúp thiết lập lại cấu trúc sao cho phù hợp với nhu cầu tìm kiếm, mà không làm xáo trộn hệ thống. Trong trường hợp code của người dùng không tương thích với bất cứ dữ liệu nào thì sẽ hệ thống sẽ thông báo lại ngay.

Giảm thiểu tỷ lệ mắc lỗi trong hệ thống

Với tính năng cảnh báo lỗi trong quá trình viết code, tỷ lệ mắc lỗi khi sử dụng TypeScript khá thấp. Đồng thời, TypeScript sẽ trả lại giá trị null hoặc gợi ý chỉnh sửa phù hợp. Từ đó giúp người dùng tiết kiệm được không ít thời gian sửa lỗi.

Giảm thiểu các bước thử nghiệm

Với quy trình kiểm tra và báo lỗi tự động, khi các biến dữ liệu đã nằm đúng chỗ, người dùng sẽ không cần phải kiểm tra lại mà vẫn đảm bảo hệ thống vận hành trơn tru, hiệu quả. Nhờ đó mà người dùng sẽ có nhiều thời gian hơn cho việc kiểm tra chất lượng logic của hệ thống, tối ưu hiệu quả công việc.

Hợp nhất mã đơn giản

Có thể sau khi hoàn thiện một đoạn code và cho chạy thử nghiệm, mọi thứ đều hoạt động tốt trong môi trường đó. Tuy nhiên, bạn có chắc chắn rằng đoạn code đó cũng sẽ hoạt động trơn tru trong môi trường khác? Với TypeScript, người dùng có thể dễ dàng hợp nhất mã để kiểm tra đánh giá đoạn mã vừa được tạo trước đó bằng Typedef (kiểm tra biên dịch).

Nhược điểm

Cần trình biên dịch riêng

Để vận hành tệp TypeScript với đuôi .js trên nền tảng Node.js, người dùng bắt buộc phải sử dụng trình biên dịch.

Thiết lập khó khăn

Trước khi sử dụng TypeScript, cần đảm bảo rằng máy chủ Node.js, trình thử nghiệm cũng như webpack có thể hoạt động được với TypeScript để có thể vận hành. Ngoài ra, mỗi khi người dùng áp dụng thêm library như Redux, React hay Styled-Component thì sẽ phải bổ sung cả Typedef.

Vẫn là phiên bản mở rộng của JavaScript

Nhìn chung, chức năng chính của TypeScript là để biên dịch về JavaScript. Nó không phải là ngôn ngữ có khả năng vận hành độc lập và thay thế cho JavaScript. Chức năng của TypeScript bị giới hạn bởi chức năng của JavaScript, được nâng cấp lên từ các điểm yếu của JavaScript.

Nếu chỉ sử dụng mỗi TypeScript, người dùng sẽ không thể hoàn thiện được tất cả các công đoạn của dự án. TypeScript chỉ thực sự hữu ích khi được kết hợp và tối ưu cùng với các nền tảng, ngôn ngữ và công cụ khác.

Hướng dẫn cài đặt TypeScript

Nếu bạn đã có cái nhìn tổng quan về TypeScript và muốn bắt đầu ngay, sau đây là hướng dẫn cài đặt TypeScript. Nhìn chung nếu đã làm việc với node package manager và các framework JS thì mọi thứ khá đơn giản.

Bước đầu tiên bạn cần cài đặt Node.js và một dependency manager như npm. Trong npm bạn gõ lệnh sau

npm install -g typescript

Sau đó để kiểm tra cài đặt thành công, mở cửa sổ Terminal và nhập lệnh

tsc –version

Nếu cài đặt thành công, bạn sẽ nhìn thấy dòng thông tin về phiên bản của TypeScript.

Typescript khác gì JavaScript

TypeScript và JavaScript có mối quan hệ mật thiết với nhau. Cả 2 mã nguồn đều sở hữu mục đích giống nhau, cú pháp, câu lệnh cũng không có sự khác biệt. Tuy nhiên, TypeScript chính là bản nâng cấp của JavaScript và cũng có điểm riêng biệt. Những điểm khác nhau đó là:

Kiểu dữ liệu

• JavaScript: Là ngôn ngữ lập trình không kiểu tĩnh, cho phép biến và giá trị thay đổi kiểu dữ liệu trong quá trình thực thi.
• TypeScript: Là ngôn ngữ lập trình kiểu tĩnh, yêu cầu xác định và sử dụng kiểu dữ liệu tường minh cho biến, tham số và giá trị trả về.

Công cụ phát triển

• JavaScript: Sở hữu những công cụ phát triển mạnh mẽ bao gồm trình duyệt web và những trình biên dịch JavaScript chẳng hạn như Babel.
• TypeScript: Có thêm các công cụ phát triển như trình biên dịch TypeScript và những trình soạn thảo mã ví dụ Visual Studio Code, mang đến những tính năng hỗ trợ kiểm tra kiểu thông minh, gợi ý mã, và gỡ lỗi.

Tính mở rộng

Cả JavaScript và TypeScript đều có thể chạy ở trên các nền tảng như máy chủ, trình duyệt web, di động. Tuy nhiên, Mã TypeScript có thể được biên dịch thành JavaScript để chạy được trong môi trường JavaScript.

Quản lý mã lớn

• JavaScript: Không có những cơ chế chính thức để quản lý và tái sử dụng mã lớn.
• TypeScript: Có những tính năng modules, generics, interfaces, classes dùng để tổ chức và tái sử dụng mã hiệu quả trong các dự án lớn.

Ngoài ra, so với JavaScript thì TypeScript cần dùng nhiều CPU và thời gian lớn hơn. Những TypeScript lại cung cấp nhiều tính năng nổi bật hơn so với JavaScript.

Biên dịch ts (TypeScript) sang js (JavaScript)

Dùng tsc (TypeScript Compiler) để biên dịch các tệp mã nguồn TypeScript (ts) sang mã nguồn JavaScript (js). Bạn có thể tiến hành biên dịch theo những bước dưới đây:

Cài đặt TypeScript (ts)

Nếu chưa có TypeScript thì bạn cần cài đặt trước khi thực hiện biên dịch. Cài đặt ts thông qua Node Package Manager (npm) chạy lệnh: npm install -g typescript trong Terminal hoặc Command Prompt.

Tạo một tệp mã TypeScript

Bạn cần tạo tệp mới có đuôi mở rộng là .ts, sau đó viết mã typeScript trong tệp mới tạo này.

Biên dịch mã ts

Mở Terminal hoặc Command Prompt, dùng lệnh tsc filename.ts để biên dịch tệp có mã nguồn ts thành tệp mã nguồn js. Trong đó: filename.ts là tên của mã nguồn ts cần biên dịch. Khi lệnh được thực hiện thì tsc tạo ra một tệp js tương ứng tên là filename.js.

Trường hợp biên dịch toàn bộ tệp ts trong cùng thư mục sang js thì bạn chạy lệnh: tsc. Lệnh này sẽ bên dịch toàn bộ tệp mã nguồn ts có đuôi mở rộng .ts trong thư mục hiện tại thành các tệp js có phần mở rộng .js tương ứng.

Chạy mã JavaScript

Sau khi thao tác những bước trên, các tệp có mã nguồn TypeScript được biên dịch thành mã nguồn JavaScript và chạy được trên máy chủ, trình duyệt của bạn.

Bên cạnh việc dùng TypeScript Compiler để biên dịch ts sang js, bạn cũng có thể biên dịch bằng Webpack và biên dịch bằng Gulp.

Các file khai báo bên thứ 3 trong ngôn ngữ TypeScript

Những file khai báo bên thứ 3 trong TypeScript sử dụng đuôi mở rộng .d.ts. Các file này cung cấp thông tin về kiểu dữ liệu cho những thư viện JavaScript hiện có mà bản thân chúng không có thông tin kiểu được tích hợp.

Trường hợp muốn dùng thư viện JavaScript không có tích hợp kiểu dữ liệu TypeScript thì bạn cần tạo hoặc tìm một file khai báo có đuôi mở rộng là .d.ts. 

Mục đích của file này là cung cấp thông tin về kiểu dữ liệu cho thư viện JavaScript đó. Đồng thời, giúp TypeScript hiểu được tính chất, cấu trúc của những hàm, đối tượng ở trong thư viện JavaScript mà không phải thực hiện thay đổi mã nguồn JavaScript gốc.

Hi vọng bài viết này của chúng tôi đã giúp các bạn có thêm kiến thức về TypeScript – một ngôn ngữ kịch bản hỗ trợ rất tốt cho lập trình hướng đối tượng. Chúc các bạn khởi đầu thuận lợi với ngôn ngữ mới này và hãy luôn theo dõi Bizfly Cloud để cập nhật những công nghệ mới nhất cùng chúng tôi.