Lợi thế của việc sử dụng TypeScript
JavaScript đã đủ tốt và chúng ta mà thậm chí tự hỏi: Liệu tôi với thực sự cần học TypeScript? Về mặt kỹ thuật, chúng ta ko cần học TypeScript để trở thành một lập trình viên tốt, hầu hết mọi người đều ổn mà ko tồn tại nó. Tuy nhiên, thao tác với TypeScript với một trong những trong những 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 dễ dàng và đơn giản và giản dị tổ chức code cho những ứng dụng cực to và phức tạp nhờ modules, namespaces và hỗ trợ OOP mạnh mẽ và tự tin và uy lực.TypeScript với một bước biên dịch thành JavaScript, sẽ bắt toàn bộ những loại lỗi trước lúc 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 những lập trình viên sử dụng ngôn từ này trong số dự án công trình dự án công trình của họ.
Chúng ta đang xem: Typescript là gì
Tiện nghi ở đầu cuối, thực sự là lý do quan trọng nhất với nhiều người để tìm hiểu TypeScript. Angular 2 là một trong những framework khá hot ngay lúc này và tuy vậy những lập trình viên mà thậm chí sử dụng JavaScript, nhưng phần to những bài hướng dẫn và ví dụ được viết bằng TypeScript. Lúc xã hội của Angular 2 được mở thoáng rộng, tự nhiên sẽ ngày càng với nhiều người tiêu sử dụng TypeScipt.
Thiết đặt TypeScript
Cách dễ nhât để thiết lập TypeScript là trải qua npm. Sử dụng lệnh dưới trên phía trên mà thậm chí thiết lập TypeScript package toàn cục, giúp cho trình biên dịch TypeScript mà thậm chí sử dụng trong mọi dự án công trình dự án công trình của con người:
npm install -g typescriptjavascript:void(0)Thử mở một cửa sổ terminal ở ngẫu nhiên đâu và chạy lệnh tsc -v , nếu thiết lập thành công screen sẽ như vậy này:
tsc -vVersion 1.8.10
Những Text Editor hỗ trợ TypeScript
TypeScript là một dự án công trình dự án công trình mã nguồn mở nhưng được phát triển và duy trì bởi Microsoft và vì như thế như vậy vậy nó được hỗ trợ sẵn trong nền tảng Visual Studio của Microsoft.
Hiện nay, rất nhiều text editor và IDE hỗ trợ sẵn hoặc trải qua những 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.
Biên dịch sang trọng và quý phái JavaScript
TypeScript được viết trong số file .ts (hoặc .tsx cho JSX), nó ko thể sử dụng trực tiếp trong trình duyệt và cần biên dịch thành JavaScript. Điều này mà thậm chí tiến hành với một trong những trong những cách:
Trong terminal sử dụng lệnh tscTrực tiếp trong Visual Studio hoặc những IDE và trình soạn thảo khác
Cách trước tiên là đơn giản và giản dị nhất, cho những người mới chính thức, vì như thế như vậy thế chúng ta sẽ sử dụng nó trong nội dung nội dung bài viết này.
Câu lệnh sau sẽ nhận một file TypeScipt là main.ts và chuyển nó thành JavaScipt main.js. Nếu main.js đã tồn tại nó sẽ bị ghi đè:
tsc main.tsChúng ta mà thậm chí biên dịch nhiều file cùng lúc bằng phương pháp liệt kê chúng hoặc vận dụng những wildcard:
# Will result in separate .js files: main.js worker.js.tsc main.ts worker.ts # Compiles all .ts files in the current thư mục. Does NOT work recursively.tsc *.tsChúng ta cũng mà thậm chí sử dụng tùy sắm –watch để tự động biên dịch một file TypeScript lúc với thay đổi:
# Initializes a watcher process that will keep main.js up to date.tsc main.ts –watchNhiều lập trình viên TypeScript thời thượng cũng tạo ra một file tsconfig.json chứa nhiều thiết lập. Một file thông số kỹ thuật kỹ thuật như vậy rất tiện lợi lúc thao tác trên những dự án công trình dự án công trình to với nhiều file .ts vì như thế như vậy nó giúp tự động hóa một phần tiến trình. Chúng ta mà thậm chí đọc nhiều hơn nữa thế nữa về tsconfig.json trong tài liệu hướng dẫn của TypeScript ở trên phía trên.
Static Typing
Một tính năng rất quan trọng đặc trưng của TypeScript là hỗ trợ static typing. Điều này Tức là chúng ta mà thậm chí khai báo kiểu cho biến, và trình biên dịch sẽ đảm nói rằng chúng ko xẩy ra gán sai kiểu của những 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 doanh nghiệp.
Trên phía trên là một ví dụ. Mọi biến, tham số của hàm hoặc giá trị trả lại mà thậm chí với những kiểu được định nghĩa lúc khởi tạo:
var burger: string = “hamburger”, // String calories: number = 300, // Numeric tasty: boolean = true; // Boolean// Alternatively, you can omit the type declaration:// var burger = “hamburger”;// 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(burger, calories);Lúc TypeScript được biên dịch thành JavaScript, toàn bộ khai báo kiểu sẽ bị xóa:
// JavaScript code from the above TS example.var burger = “hamburger”, calories = 300, tasty = true; function speak(food, energy) { console.log(“Our ” + food + ” has ” + energy + ” calories.”);}speak(burger, calories);Nếu chúng ta thử làm một điều gì đó ko khớp lệ, lúc biên dịch tsc sẽ báo lỗi. Ví dụ:
// The given type is boolean, the provided value is a string.var tasty: boolean = “I haven”t tried it yet”;main.ts(1,5): error TS2322: Type “string” is not assignable to type “boolean”.Nó cũng Note lúc chúng ta 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(“tripple cheesburger”, “a ton of”);main.ts(5,30): error TS2345: Argument of type “string” is not assignable to parameter of type “number”.Trên phía trên là một vài kiểu dữ liệu được sử dụng thông dụng nhất:
Number – Toàn bộ giá trị số được biểu diễn bởi kiểu number, ko tồn tại định nghĩa riêng cho số nguyên (interger), số thực (float) hoặc những kiểu khác.String – Tương tự string của JavaScript mà thậm chí được xung quanh bởi ‘dấu nháy đơn’ hoặc “dấu nháy kép”.Boolean – true hoặc false, sử dụng 0 và 1 sẽ tạo thành lỗi biên dịch.Any – Một biến với kiểu này mà thậm chí với giá trị là một string, number hoặc ngẫu nhiên kiểu nào.Arrays – Sở hữu 2 kiểu cú pháp: my_arr: numbervàlt;>; hoặc my_arr: Array.Void – Được sử dụng lúc hàm ko trả lại ngẫu nhiên giá trị nào.
Để xem danh sách toàn bộ những kiểu biến, đọc tài liệu hướng dẫn của TypeScript tại trên phía trên.
Interfaces
Interfaces được sử dụng để kiểm tra, xem một đối tượng người tiêu dùng người tiêu dùng với thích ứng với một cấu trúc nhất định hay là ko. Bằng phương pháp định nghĩa một interface, chúng ta mà thậm chí đặt tên một sự phối phối hợp quan trọng đặc trưng của những biến, đảm nói rằng chúng luôn luôn luôn luôn luôn luôn luôn luôn đi cùng nhau.
Lúc chuyển thành JavaScript, interface biến mất – mục đích duy nhất của chúng là trợ giúp trong mức độ mức độ phát triển.
Trong ví dụ dưới trên phía trên chúng ta định nghĩa một interface giản dị và đơn giản và giản dị để kiểm tra kiểu những tham số của một hàm:
// 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: “ice cream”, calories: 200}speak(ice_cream);Thứ tự những thuộc tính ko quan trọng. Chúng ta chỉ việc đủ số lượng những thuộc tính và đúng kiểu. Nếu một thuộc tính nào khác bị thiếu, hoặc sai kiểu, hoặc sai tên, trình biên dịch sẽ Note 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 ice_cream = { nmae: “ice cream”, calories: 200}speak(ice_cream);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; }”.Hướng dẫn này chỉ là chính thức, chúng ta sẽ không hề đi vào rõ ràng. Tuy nhiên, còn nhiều thứ so với những gì mà Cửa Hàng công ty chúng tôi đã đề cập, vì như thế như vậy thế Cửa Hàng công ty chúng tôi khuyến khích đọc thêm tài liệu của TypeScript ở trên phía trên.
Classes
Lúc xây dựng những ứng dụng to, tư thế lập trình hướng đối tượng người tiêu dùng người tiêu dùng được ưa thích bởi rất nhiều lập trình viên, nhất là trong số ngôn từ như Java hoặc C#.
TypeScript cung một khối khối hệ thống class rất giống những ngôn từ này, bao hàm kế thừa, abstract classes, interface implementations, setter/getters, …
Cũng phải đề cập là từ phiên phiên bạn dạng ECMAScript 2015, classes là một tính năng với sẵn trong JS và mà thậm chí ko cần sử dụng TypeScript. Hai phiên phiên bạn dạng khá giống nhau, nhưng chúng vẫn với điểm khác lạ, này là TypeScript nghiêm ngặt hơn.
Trên phía trên là một ví dụ giản dị và đơn giản và giản dị về TypeScript:
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 menu for today:”); for(var i=0; iBất kỳ ai đó đã biết một chút về Java hoặc C# sẽ thấy cú pháp này khá quen thuộ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 lượt thích 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Để tìm hiểu sâu hơn về classes trong TS chúng ta mà thậm chí đọc ở trên phía trên.
Generics
Generics là những mẫu cho phép cùng một hàm mà thậm chí gật đầu những tham số với nhiều kiểu ko giống nhau. Việc tạo ra những thành phần mà thậm chí tái sử dụng với generics tốt hơn sử dụng kiểu any, vì như thế như vậy generics bảo tồn kiểu của những biến vào và ra của chúng.
Ví dụ dưới trên phía trên 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): Tvàlt;> { var arrayOfT: Tvàlt;> = <>; // Create empty array of type T. arrayOfT.push(argument); // Push, now arrayOfT =
Tuy nhiên ko cần, luôn luôn luôn luôn luôn luôn luôn luôn hỗ trợ kiểu sẽ là quan trọng vì như thế như vậy trình biên dịch mà thậm chí đoán sai kiểu trong số kịch phiên bạn dạng phức tạp.
Tài liệu hướng dẫn của TypeScript bao hàm một vài ví dụ thời thượng bao hàm generics classes, phối phối hợp chúng với interfaces, …Chúng ta mà thậm chí tìm thấy chúng ở trên phía trên.
Xem thêm: Routes Là Gì Trong Tiếng Anh? Route Nghĩa Là Gì Trong Tiếng Anh
Modules
Một vấn đề quan trọng, lúc thao tác trên một ứng dụng to là tính module hóa. Chia code thành nhiều thành phần nhỏ với thời hạn thao tác tái sử dụng giúp dự án công trình dự án công trình của doanh nghiệp dễ tổ chức và dễ hiểu, lúc so sánh với một file duy nhất với 10000 dòng code.
Thể loại: Tổng hợp
