Mục lục nội dung
Chức năng của TypeScript là gì?Ưu điểm của Typescript là gì?Nhược điểm của Typescript là gì?Typescript là gì? Hôm nay chúng ta sẽ cùng nhau phân tích cặn kẽ điểm mạnh và điểm yếu của typescript để có thể quyết định xem nên sử dụng nó như thế nào cho hiệu quả nhé!
Định nghĩa Typescript là gì?
Khác với sự đơn giản của JavaScript, du TypeScript cũng đồng thời kế thừa nhiều định nghĩa, khái niệm của đa dạng các ngôn ngữ C#, Java,… nhưng TypeScript lại có yêu cầu cao về trật tự rõ ràng.
TypeScript được xem là một phiên bản nâng cao hơn của JavaScript vì nó được thiết kế thêm nhiều chức năng tiện lợi hơn, cải tiến hơn từ những điểm yếu của JavaScript như các lớp hướng đối tượng và Static Structural typing, bên cạnh đó TypeScript còn có thể hoạt động rộng rãi cho các ứng dụng của ngôn ngữ Angular2 và Nodejs.
Bạn đang xem: Typescript là gì
Tìm việc làm Typescript từ các công ty HOT mới nhất
Chức năng của TypeScript là gì?
Static Typing
Một trong những chức năng không thể lẫn vào đâu được của TypeScript đó là hỗ trợ ‘static typing’. Đồng nghĩa với việc bạn có thể khai báo kiểu cho biến, và trình biên dịch sẽ giảm được tỷ lệ gán sai kiểu của các giá trị. Nếu khai báo kiểu bị bỏ qua, chúng sẽ được tự động phát hiện từ code của bạn.
Ví dụ: Các biến, tham số của hàm hoặc giá trị trả lại có thể có các kiểu được định nghĩa khi khởi tạo:
var burger: string = "Spaghetti", // String calories: number = 400, // Numeric tasty: boolean = true; // Boolean// Alternatively, you can omit the type declaration:// var pasta = "Spaghetti";// The function expects a string and an integer.// It doesn"t return anything so the type of the function itself is void.function speak(food: string, energy: number): void { console.log("Our " + food + " has " + energy + " calories.");}speak(pasta, calories);Toàn bộ khai báo kiểu sẽ bị xóa trong trường hợp TypeScript biên dịch thành JavaScript thành công
// JavaScript code from the above TS example.var burger = "Spaghetti", calories = 400, tasty = true; function speak(food, energy) { console.log("Our " + food + " has " + energy + " calories.");}speak(Spaghetti, calories);Biên dịch tsc sẽ báo lỗi khi chúng ta thao tác không hợp lệ. Ví dụ:
// The given type is boolean, the provided value is a string.var tasty: boolean = "I haven"t tasted it yet";main.ts(1,5): error TS2322: Type "string" is not assignable to type "boolean".Hệ thống cũng sẽ báo lỗi nếu thao tác truyền sai tham số tới một hàm:
function speak(food: string, energy: number): void{ console.log("Our " + food + " has " + energy + " calories.");}// Arguments don"t match the function parameters.speak("Sea Food Spaghetti", "a ton of");main.ts(5,30): error TS2345: Argument of type "string" is not assignable to parameter of type "number".
Các kiểu dữ liệu được sử dụng phổ biến nhất:
Any – Một biến với kiểu này có thể có giá trị là một string, number hoặc bất kỳ kiểu nào.String – Giống chức năng của string trong JavaScript, có thể được bao quanh bởi ‘dấu nháy đơn’ hoặc “dấu nháy kép”.Number – Tất cả giá trị số trong hàm đều được biểu diễn bởi kiểu number, không có định nghĩa riêng cho số nguyên (interger), số thực (float) cũng như các kiểu khác.Boolean – true hoặc false, sử dụng 0 và 1 sẽ gây ra lỗi biên dịch.Arrays – Có 2 kiểu cú pháp: my_arr: number<>; hoặc my_arr: Array.Void – sử dụng khi hàm không trả lại bất kỳ giá trị nào.Để xem danh sách tất cả các kiểu biến, đọc tài liệu hướng dẫn của TypeScript tại đây.Interfaces
Chức năng chính của Interfaces là sử dụng để kiểm tra, xem một đối tượng có phù hợp với một cấu trúc nhất định hay không, trợ giúp trong giai đoạn giai đoạn phát triển.
Bằng cách định nghĩa một interface, ta có thể đặt tên trong trường hợp có sự kết hợp đặc biệt của các biến, đảm bảo rằng chúng luôn luôn đi cùng nhau.
Ví dụ:
// Here we define our Food interface, its properties, and their types.interface Food { name: string; calories: number;}// We tell our function to expect an object that fulfills the Food interface. // This way we know that the properties we need will always be available.function speak(food: Food): void{ console.log("Our " + food.name + " has " + food.calories + " calories.");}// We define an object that has all of the properties the Food interface expects.// Notice that types will be inferred automatically.var ice_cream = { name: "cookies", calories: 250}speak();Ngoài ra bạn nên biết rằng, thứ tự của các thuộc tính không quan trọng bằng việc chúng ta phải fill đủ số lượng các thuộc tính và đúng kiểu. Nếu một thuộc tính nào đó bị thiếu, hoặc sai kiểu, hoặc sai tên, trình biên dịch sẽ cảnh báo chúng ta.
interface Food { name: string; calories: number;}function speak(food: Food): void{ console.log("Our " + food.name + " has " + food.calories + " grams.");}// We"ve made a deliberate mistake and name is misspelled as nmae.var cookies = { nmae: "cookies", calories: 250}speak(cookies);main.ts(16,7): error TS2345: Argument of type "{ nmae: string; calories: number; } is not assignable to parameter of type "Food". Property "name" is missing in type "{ nmae: string; calories: number; }".
Classes
Trong các dự án, ứng dụng lớn, lập trình hướng đối tượng rất hay được các Dev sử dụng nhất là trong các ngôn ngữ như Java hoặc C#.TypeScript cung cấp hệ thống class khá tương đồng với các ngôn ngữ này ví dụ như chức năng kế thừa, abstract classes, interface implementations, setter/getters, …
Từ phiên bản ECMAScript 2015 trở đi, classes được xem là một tính năng có sẵn trong JS và có thể không cần sử dụng TypeScript. Mặc dù 2 phiên bản này có nhiều chức năng tương tự nhau, nhưng chúng vẫn có điểm khác biệt, đó là TypeScript nghiêm ngặt hơn.
Ví dụ:
class Menu { // Our properties: // By default they are public, but can also be private or protected. items: Array; // The items in the menu, an array of strings. pages: number; // How many pages will the menu be, a number. // A straightforward constructor. constructor(item_list: Array, total_pages: number) { // The this keyword is mandatory. this.items = item_list; this.pages = total_pages; } // Methods list(): void { console.log("Our special meal today is:"); for(var i=0; iCú pháp này khá quen thuộc cho dân Java hoặc C#. Tương tự cho kế thừa:
class HappyMeal extends Menu { // Properties are inherited // A new constructor has to be defined. constructor(item_list: Array, total_pages: number) { // In this case we want the exact same constructor as the parent class (Menu), // To automatically copy it we can call super() - a reference to the parent"s constructor. super(item_list, total_pages); } // Just like the properties, methods are inherited from the parent. // However, we want to override the list() function so we redefine it. list(): void{ console.log("Our special menu for children:"); for(var i=0; i
Modules
Tính module hóa rất quan trọng khi bạn đang thực hiện những dự án lớn. Nó phân chia code thành nhiều thành phần nhỏ và còn có khả năng tái sử dụng giúp dự án của bạn dễ tổ chức và dễ hiểu hơn so với file có hàng ngàn dòng code.TypeScript có chức năng exporting và importing các module, nhưng bản thân nó không thể xử lý thực sự việc liên kết giữa các file. Dùng require.js cho các ứng dụng client và CommonJS cho Node.js để cho phép modules TS dựa trên các thư viện của bên thứ ba.
Đặt trường hợp có 2 file: 1 file export một hàm, 1 file import, chúng ta sẽ gọi nó là:
exporter.ts
var sayHi = function(): void { console.log("Hello!");}export = sayHi;importer.ts
import sayHi = require("./exporter");sayHi();Để có thể hoàn thành thao tác, cần download require.js và thêm nó trong một thẻ script – xem hướng dẫn typescript là gì của requirejs.org. Sau đó biên dịch 2 file .ts. Mộ tham số mở rộng cần được thêm vào để nói với TypeScript chúng ta đang xây dựng các module cho require.js (còn được gọi là AMD):
tsc --module amd *.ts
Generics
Chức năng của Generics là cho phép cùng một hàm có thể chấp nhận các tham số với nhiều kiểu khác nhau. Việc tạo ra các thành phần có thể tái sử dụng với generics tốt hơn sử dụng kiểu any, vì generics bảo tồn kiểu của các biến vào và ra của chúng.Ví dụ: Generics trong ví dụ dưới đây đã nhận một tham số và trả lại một mảng chứa cùng tham số
// The after the function name symbolizes that it"s a generic function.// When we call the function, every instance of T will be replaced with the actual provided type.// Receives one argument of type T,// Returns an array of type T.function genericFunc(argument: T): T<> { var arrayOfT: T<> = <>; // Create empty array of type T. arrayOfT.push(argument); // Push, now arrayOfT =
Mặc dù không bắt buộc, luôn luôn cung cấp kiểu được coi là cần thiết vì trình biên dịch có thể đoán sai kiểu trong các kịch bản phức tạp.
Xem thêm: Hệ Phương Trình Có Nghiệm Duy Nhất Cực Hay, Hệ Phương Trình Bậc Nhất Hai Ẩn
Tài liệu hướng dẫn của TypeScript là gì gồm một vài ví dụ cao cấp bao gồm generics classes, kết hợp chúng với interfaces, …ở typescriptlang.org.