Hôm ni, họ sẽ học tập TypeScript (Đọc thêm TypeScript là gì?), một ngôn ngữ được biên dịch thành JavaScript, được thiết kế nhằm chế tạo các ứng dụng bự và phức tạp. Nó kế thừa các khái niệm tự những ngữ điệu như C# với Java, số đông ngữ điệu ngặt nghèo với gồm chơ vơ từ bỏ trái ngược với sự dễ chịu với free-typed của JavaScriptt.Bài viết này, đào bới những người dân đã khá thuần thục JavaScript tuy thế vẫn tồn tại là beginner khi tới cùng với TypeScript. Chúng tôi vẫn nói hầu hết những công dụng thiết yếu và cơ bạn dạng bao gồm các ví dụ với chú giải để giúp đỡ bạn thấy biện pháp ngôn từ này hoạt động. Hãy bắt đầu!

Lợi nuốm của vấn đề sử dụng TypeScript

JavaScript sẽ đủ xuất sắc và bạn cũng có thể từ bỏ hỏi: Liệu tôi có thực sự đề xuất học tập TypeScript? Về phương diện chuyên môn, bạn không yêu cầu học tập TypeScript nhằm phát triển thành một xây dựng viên giỏi, phần lớn những fan đa số ổn mà không có nó. Tuy nhiên, thao tác với TypeScript tất cả một số lợi thế sau:

Với static typing, code viết bởi TypeScript dễ dự đân oán hơn, và dễ dàng debug hơn.Dễ dàng tổ chức triển khai code cho những áp dụng cực đại và phức hợp nhờ vào modules, namespaces cùng cung cấp OOP trẻ trung và tràn trề sức khỏe.TypeScript bao gồm một bước biên dịch thành JavaScript, sẽ bắt tất cả những nhiều loại lỗi trước khi bọn chúng chạy với có tác dụng hư một vài ba sản phẩm công nghệ.Framework Angular 2 viết với TypeScript cùng nó cũng khuyến nghị các xây dựng viên áp dụng ngôn từ này trong các dự án của họ.

Bạn đang xem: Ts file là gì

Lợi ích sau cuối, đích thực là lý do đặc biệt nhất với nhiều tín đồ nhằm khám phá TypeScript. Angular 2 là một trong giữa những framework khá hot tức thì từ bây giờ cùng tuy vậy những xây dựng viên hoàn toàn có thể áp dụng JavaScript, mà lại nhiều phần các bài lý giải với ví dụ được viết bằng TypeScript. Lúc cộng đồng của Angular 2 được không ngừng mở rộng, tự nhiên đang càng ngày có khá nhiều người tiêu dùng TypeScipt.

*

Cài đặt TypeScript

Cách dễ dàng nhât để cấu hình thiết lập TypeScript là thông qua npm. Sử dụng lệnh tiếp sau đây hoàn toàn có thể thiết đặt TypeScript package toàn thể, giúp cho trình biên dịch TypeScript hoàn toàn có thể thực hiện vào phần nhiều dự án công trình của bọn chúng ta:

npm install -g typescriptjavascript:void(0)Thử mở 1 hành lang cửa số terminal ngơi nghỉ ngẫu nhiên đâu với chạy lệnh tsc -v nếu như thiết đặt thành công màn hình hiển thị đang như vậy này:

tsc -vVersion 1.8.10

Các Text Editor cung ứng TypeScript

TypeScript là 1 trong những dự án công trình mã mối cung cấp mnghỉ ngơi nhưng được cách tân và phát triển và gia hạn do Microsoft cùng do vậy nó được cung ứng sẵn trong gốc rễ Visual Studio của Microsoft.

Lúc bấy giờ, không ít text editor cùng IDE hỗ trợ sẵn hoặc thông qua những plugin nhằm cung ứng cú pháp của TypeScript, auto-complete suggestions, bắt lỗi với thậm chí là tích thích hợp sẵn trình biên dịch.

Biên dịch thanh lịch JavaScript

TypeScript được viết trong các file .ts (hoặc .tsx mang đến JSX), nó chẳng thể sử dụng trực tiếp vào trình chăm chú và cần biên dịch thành JavaScript. Vấn đề này có thể triển khai cùng với một vài cách:

Trong terminal sử dụng lệnh tscTrực tiếp vào Visual Studio hoặc các IDE với trình biên soạn thảo khác

Cách đầu tiên là dễ ợt độc nhất vô nhị, cho người mới bước đầu, chính vì như thế họ vẫn sử dụng nó trong bài viết này.

Câu lệnh sau đã thừa nhận một file TypeScipt là main.ts và chuyển nó thành JavaScipt main.js. Nếu main.js đang trường tồn nó có khả năng sẽ bị ghi đè:

tsc main.tsChúng ta rất có thể biên dịch các file đồng thời bằng phương pháp liệt kê chúng hoặc áp dụng các 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 có thể thực hiện tùy lựa chọn –watch nhằm auto biên dịch một tệp tin TypeScript khi gồm nỗ lực đổi:

# Initializes a watcher process that will keep main.js up lớn date.tsc main.ts --watchNhiều thiết kế viên TypeScript thời thượng cũng tạo nên một tệp tin tsconfig.json chứa đựng nhiều cấu hình thiết lập. Một tệp tin thông số kỹ thuật những điều đó cực kỳ thuận tiện khi làm việc bên trên các dự án công trình béo có các file .ts vày nó góp tự động hóa một phần quy trình. Quý khách hàng có thể hiểu nhiều hơn nữa về tsconfig.json vào tư liệu hướng dẫn của TypeScript tại chỗ này.

Static Typing

Một tác dụng khôn xiết đặc trưng của TypeScript là cung ứng static typing. Như vậy có nghĩa là bạn cũng có thể knhị báo đẳng cấp cho biến, với trình biên dịch sẽ đảm bảo rằng bọn chúng không bị gán không nên hình dạng của những giá trị. Nếu knhì báo kiểu bị làm lơ, chúng sẽ tiến hành tự động phân phát hiện nay từ bỏ code của bạn.

Đây là 1 ví dụ. Mọi trở nên, tđắm say số của hàm hoặc giá trị trả lại hoàn toàn có thể gồm các hình trạng được định nghĩa Khi 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 & 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, tổng thể 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 bọn họ test có tác dụng một điều nào đó không hợp lệ, khi biên dịch tsc vẫn 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 chú ý lúc họ truyền sai tđắm đuối số cho 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 khổng lồ parameter of type "number".Đây là 1 vài loại dữ liệu được sử dụng phổ cập nhất:

Number – Tất cả quý hiếm số được biểu diễn do giao diện number, không có định nghĩa riêng rẽ cho số nguyên ổn (interger), số thực (float) hoặc những phong cách không giống.String – Giống nlỗi string của JavaScript có thể được phủ quanh vày ‘vết nháy đơn’ hoặc “vệt nháy kép”.Boolean – true hoặc false, áp dụng 0 và 1 vẫn gây ra lỗi biên dịch.Any – Một biến hóa với dạng hình này có thể có mức giá trị là một trong string, number hoặc bất kỳ hình dáng làm sao.Arrays – Có 2 hình trạng cú pháp: my_arr: number<>; hoặc my_arr: Array.Void – Được sử dụng Khi hàm không trả lại ngẫu nhiên cực hiếm như thế nào.

Xem thêm: Tra Từ Cư Xá Tiếng Anh Là Gì ? Cư Xá Tiếng Anh Là Gì

Để coi list tất cả các mẫu mã trở nên, gọi tài liệu lí giải của TypeScript trên đây.


Interfaces

Interfaces được thực hiện để khám nghiệm, coi một đối tượng có cân xứng với cùng 1 cấu tạo nhất thiết hay là không. Bằng giải pháp định nghĩa một interface, bạn cũng có thể đặt tên một sự kết hợp đặc trưng của các biến đổi, đảm bảo an toàn rằng bọn chúng luôn luôn luôn luôn đi bên nhau.

Lúc chuyển thành JavaScript, interface bặt tăm – mục đích độc nhất của chúng là giúp đỡ vào giai đoạn tiến trình trở nên tân tiến.

Trong ví dụ dưới đây chúng ta quan niệm một interface đơn giản dễ dàng nhằm kiểm tra kiểu những tham mê số của một hàm:

// Here we define our Food interface, its properties, và their types.interface Food name: string; calories: number;// We tell our function lớn 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: 200speak(ice_cream);Thứ tự các thuộc tính ko đặc biệt quan trọng. Chúng ta chỉ cần đầy đủ số lượng các trực thuộc tính với đúng giao diện. Nếu một ở trong tính làm sao kia bị thiếu thốn, hoặc không nên đẳng cấp, hoặc sai tên, trình biên dịch sẽ chú ý họ.

interface Food name: string; calories: number;function speak(food: Food): void console.log("Our " + food.name + " has " + food.calories + " grams.");// We"ve sầu made a deliberate mistake và name is misspelled as nmae.var ice_cream = nmae: "ice cream", calories: 200speak(ice_cream);main.ts(16,7): error TS2345: Argument of type " nmae: string; calories: number; is not assignable khổng lồ parameter of type "Food". Property "name" is missing in type " nmae: string; calories: number; ".Hướng dẫn này chỉ cần ban đầu, họ sẽ không còn đi vào chi tiết. Tuy nhiên, còn các sản phẩm so với phần nhiều gì nhưng Shop chúng tôi đã đề cập, vì vậy chúng tôi khuyến nghị tìm hiểu thêm tư liệu của TypeScript ở chỗ này.

Classes

Khi thiết kế những vận dụng lớn, phong thái lập trình sẵn phía đối tượng người dùng được ái mộ vị tương đối nhiều xây dựng viên, đặc biệt là trong các ngôn ngữ như Java hoặc C#.

TypeScript cung một khối hệ thống class cực kỳ như thể những ngôn ngữ này, bao gồm kế thừa, abstract classes, interface implementations, setter/getters, …

Cũng bắt buộc kể là từ bỏ phiên phiên bản ECMAScript 2015, classes là một tài năng gồm sẵn trong JS và hoàn toàn có thể không phải áp dụng TypeScript. Hai phiên bạn dạng hơi tương đương nhau, nhưng chúng vẫn có điểm khác biệt, đó là TypeScript nghiêm ngặt rộng.

Đây là 1 trong những ví dụ đơn giản 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 thực đơn be, a number. // A straightforward constructor. constructor(item_list: Array, total_pages: number) // The this từ khóa is mandatory. this.items = item_list; this.pages = total_pages; // Methods list(): void { console.log("Our thực đơn for today:"); for(var i=0; iBất kỳ ai đã biết một chút về Java hoặc C# vẫn thấy cú pháp này tương đối không còn xa lạ. Tương từ bỏ mang lại 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 gọi super() - a reference to lớn the parent"s constructor. super(item_các mục, total_pages); // Just lượt thích the properties, methods are inherited from the parent. // However, we want lớn override the list() function so we redefine it. list(): void{ console.log("Our special thực đơn for children:"); for(var i=0; iĐể tìm hiểu sâu hơn về classes trong TS bạn cũng có thể phát âm tại đây.

Generics

Generics là những mẫu mã có thể chấp nhận được cùng một hàm hoàn toàn có thể đồng ý những ttê mê số với khá nhiều dạng hình khác nhau. Việc tạo thành các thành phần hoàn toàn có thể tái áp dụng cùng với generics xuất sắc hơn thực hiện mẫu mã any, vì chưng generics bảo tồn dạng hình của các thay đổi vào và ra của chúng.

ví dụ như sau đây dấn một tmê man số và trả lại một mảng đựng cùng tsay đắm số

// The after the function name symbolizes that it"s a generic function.// When we Điện thoại tư vấn 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 = . return arrayOfT;var arrayFromString = genericFunc("beep");console.log(arrayFromString<0>); // "beep"console.log(typeof arrayFromString<0>) // Stringvar arrayFromNumber = genericFunc(42);console.log(arrayFromNumber<0>); // 42console.log(typeof arrayFromNumber<0>) // numberLần thứ nhất Gọi hàm chúng ta thiết lập cấu hình giao diện thành string. Điều này không phải vị trình biên dịch rất có thể xem tsi mê số được truyền cùng tự động hóa ra quyết định dạng hình nào tương xứng độc nhất vô nhị, y hệt như lần call hàm thứ hai.

Mặc cho dù ko phải, luôn luôn luôn luôn hỗ trợ phong cách được xem là nên thiết vì trình biên dịch rất có thể đoán thù không đúng hình dạng trong những kịch phiên bản phức hợp.

Tài liệu khuyên bảo của TypeScript gồm một vài ví dụ cao cấp bao gồm generics classes, phối hợp bọn chúng cùng với interfaces, …quý khách hàng có thể tra cứu thấy chúng tại chỗ này.

Modules

Một định nghĩa đặc trưng, khi làm việc bên trên một áp dụng béo là tính module hóa. Chia code thành các yếu tố bé dại có khả năng tái sử dụng giúp dự án công trình của khách hàng dễ dàng tổ chức triển khai và dễ nắm bắt, khi đối chiếu với cùng một tệp tin nhất tất cả 10000 loại code.