Ts File Là Gì

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

Lợi thay của Việc thực hiện TypeScript

JavaScript đã đủ giỏi cùng bạn cũng có thể trường đoản cú hỏi: Liệu tôi gồm thực sự cần học TypeScript? Về khía cạnh kỹ thuật, chúng ta ko phải học TypeScript để biến hóa một lập trình viên xuất sắc, đa số đều fan phần đa ổn cơ mà không tồn tại nó. Tuy nhiên, làm việc cùng với TypeScript tất cả một vài điểm mạnh sau:

Với static typing, code viết bằng TypeScript dễ dự đân oán hơn, và dễ debug rộng.Dễ dàng tổ chức code cho những ứng dụng cực to cùng phức tạp nhờ modules, namespaces và hỗ trợ OOP trẻ trung và tràn đầy năng lượng.TypeScript tất cả một bước biên dịch thành JavaScript, sẽ bắt tất cả các loại lỗi trước lúc chúng chạy với làm hỏng một vài vật dụng.Framework Angular 2 viết với TypeScript cùng nó cũng khuyến nghị các lập trình sẵn viên sử dụng ngữ điệu này trong các dự án công trình của họ.

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

Lợi ích cuối cùng, thực thụ là nguyên nhân quan trọng đặc biệt độc nhất vô nhị với khá nhiều tín đồ để mày mò TypeScript. Angular 2 là 1 trong những trong những framework khá hot tức thì từ bây giờ và tuy vậy các xây dựng viên rất có thể thực hiện JavaScript, nhưng lại nhiều phần những bài bác trả lời cùng ví dụ được viết bằng TypeScript. khi xã hội của Angular 2 được mở rộng, thoải mái và tự nhiên đã ngày dần có không ít người tiêu dùng TypeScipt.

*

Cài đặt TypeScript

Cách dễ dàng nhât nhằm tùy chỉnh thiết lập TypeScript là thông qua npm. Sử dụng lệnh 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ể áp dụng trong đầy đủ dự án công trình của chúng ta:

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

tsc -vVersion 1.8.10

Các Text Editor hỗ trợ TypeScript

TypeScript là 1 trong những dự án công trình mã nguồn mlàm việc tuy thế được cải tiến và phát triển cùng duy trì bởi Microsoft cùng vì vậy nó được cung ứng sẵn vào nền tảng gốc rễ Visual Studio của Microsoft.

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

Biên dịch lịch sự JavaScript

TypeScript được viết trong những file .ts (hoặc .tsx mang lại JSX), nó cấp thiết sử dụng trực tiếp vào trình phê chuẩn và đề xuất biên dịch thành JavaScript. Vấn đề này có thể tiến hành cùng với một vài cách:

Trong terminal thực hiện lệnh tscTrực tiếp trong Visual Studio hoặc những IDE và trình biên soạn thảo khác

Cách trước tiên là thuận lợi tốt nhất, cho những người bắt đầu bắt đầu, vì vậy họ sẽ áp dụng nó vào bài viết này.

Câu lệnh sau đang dấn một tệp tin TypeScipt là main.ts cùng đưa nó thành JavaScipt main.js. Nếu main.js vẫn trường thọ nó sẽ ảnh hưởng ghi đè:

tsc main.tsChúng ta rất có thể 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 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 folder. Does NOT work recursively.tsc *.tsChúng ta cũng rất có thể áp dụng tùy chọn –watch để tự động hóa biên dịch một tệp tin TypeScript Khi tất cả vậy đổi:

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

Static Typing

Một thiên tài khôn cùng quan trọng đặc biệt của TypeScript là cung ứng static typing. Điều này có nghĩa là bạn cũng có thể knhị báo kiểu đến đổi mới, với trình biên dịch sẽ bảo đảm an toàn rằng bọn chúng không xẩy ra gán sai kiểu của những cực hiếm. Nếu knhì báo vẻ bên ngoài bị làm lơ, chúng sẽ tiến hành tự động vạc hiện nay từ code của khách hàng.

Đây là một ví dụ. Mọi biến hóa, tmê mẩn số của hàm hoặc giá trị trả lại hoàn toàn có thể bao gồm những phong cách được quan niệm 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);khi TypeScript được biên dịch thành JavaScript, cục bộ knhị báo vẻ bên ngoài 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ọ thử có tác dụng một điều nào đấy chưa phù hợp lệ, Lúc biên dịch tsc đang 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 khổng lồ type "boolean".Nó cũng cảnh báo khi chúng ta truyền không nên tđê mê 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 lớn parameter of type "number".Đây là một trong những vài ba vẻ bên ngoài dữ liệu được sử dụng phổ biến nhất:

Number – Tất cả giá trị số được màn biểu diễn vì loại number, không tồn tại quan niệm riêng mang đến số nguyên ổn (interger), số thực (float) hoặc những phong cách khác.String – Giống nlỗi string của JavaScript hoàn toàn có thể được bao 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ới 1 vẫn tạo ra lỗi biên dịch.Any – Một biến cùng với phong cách này có thể có giá trị là một trong string, number hoặc bất kỳ dạng hình làm sao.Arrays – Có 2 đẳng cấp cú pháp: my_arr: number<>; hoặc my_arr: Array.Void – Được áp dụng lúc hàm không trả lại ngẫu nhiên giá trị nào.

Xem thêm: Cân Chỉnh Thước Lái Là Gì - Thước Lái Ô Tô Có Tác Dụng Gì

Để xem list toàn bộ các hình dáng trở thành, phát âm tư liệu gợi ý của TypeScript tại phía trên.


Interfaces

Interfaces được sử dụng để khám nghiệm, xem một đối tượng bao gồm cân xứng với cùng một cấu trúc cố định hay là không. Bằng giải pháp quan niệm một interface, chúng ta có thể đặt tên một sự kết hợp quan trọng của các biến chuyển, bảo đảm an toàn rằng chúng luôn luôn luôn đi với mọi người trong nhà.

Khi đưa thành JavaScript, interface bặt tăm – mục đích nhất của chúng là giúp đỡ trong quy trình tiến độ quy trình tiến độ trở nên tân tiến.

Trong ví dụ dưới đây bọn họ quan niệm một interface đơn giản nhằm kiểm soát hình dạng các tmê mẩn 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 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đọng từ các nằm trong tính không đặc biệt quan trọng. Chúng ta chỉ cần đầy đủ con số những nằm trong tính và đúng vẻ bên ngoài. Nếu một ở trong tính nào kia bị thiếu, hoặc không nên thứ hạng, hoặc không nên tên, trình biên dịch vẫn 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 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 to parameter of type "Food". Property "name" is missing in type " nmae: string; calories: number; ".Hướng dẫn này chỉ nên bước đầu, họ sẽ không còn bước vào cụ thể. Tuy nhiên, còn những thứ so với mọi gì nhưng Shop chúng tôi đang đề cập, chính vì thế Cửa Hàng chúng tôi khuyến nghị tham khảo thêm tài liệu của TypeScript ở chỗ này.

Classes

khi xây đắp các áp dụng Khủng, phong cách lập trình sẵn phía đối tượng được yêu thích do rất nhiều lập trình sẵn viên, đặc biệt là trong những ngôn ngữ nlỗi Java hoặc C#.

TypeScript cung một hệ thống class khôn xiết như là những ngữ điệu này, bao hàm thừa kế, abstract classes, interface implementations, setter/getters, …

Cũng cần nói là trường đoản cú phiên phiên bản ECMAScript 2015, classes là một trong tuấn kiệt tất cả sẵn trong JS với có thể không đề xuất sử dụng TypeScript. Hai phiên phiên bản khá giống như nhau, dẫu vậy bọn chúng vẫn đang còn điểm khác biệt, sẽ là TypeScript nghiêm ngặt rộng.

Đây là một ví dụ đơn giản về TypeScript:

class Menu { // Our properties: // By mặc định they are public, but can also be private or protected. items: Array; // The items in the thực đơn, 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 keywords 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 ít về Java hoặc C# sẽ thấy cú pháp này khá quen thuộc. Tương trường đoản cú 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_danh sách, total_pages); // Just like 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Để mày mò sâu rộng về classes vào TS chúng ta có thể hiểu ở chỗ này.

Generics

Generics là các chủng loại chất nhận được cùng một hàm có thể đồng ý các tmê man số với nhiều giao diện khác biệt. Việc tạo nên những nhân tố rất có thể tái thực hiện cùng với generics giỏi hơn thực hiện vẻ bên ngoài any, vì generics bảo đảm loại của các trở nên vào và ra của bọn chúng.

Ví dụ sau đây dìm một tsi số và trả lại một mảng cất thuộc tham 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 đầu tiên gọi hàm chúng ta tùy chỉnh thiết lập kiểu dáng thành string. Điều này không buộc phải vị trình biên dịch có thể coi tyêu thích số được truyền với tự động hóa đưa ra quyết định giao diện làm sao phù hợp duy nhất, y hệt như lần điện thoại tư vấn hàm thứ hai.

Mặc cho dù không nên, luôn luôn luôn cung ứng vẻ bên ngoài được xem như là đề nghị thiết bởi vì trình biên dịch hoàn toàn có thể đoán không nên giao diện trong các kịch phiên bản phức hợp.

Tài liệu chỉ dẫn của TypeScript bao gồm 1 vài ví dụ cao cấp bao gồm generics classes, kết hợp bọn chúng với interfaces, …quý khách hàng có thể kiếm tìm thấy bọn chúng tại đây.

Modules

Một tư tưởng đặc biệt quan trọng, khi thao tác làm việc bên trên một vận dụng Khủng là tính module hóa. Chia code thành những nguyên tố nhỏ tuổi có chức năng tái áp dụng giúp dự án của bạn dễ dàng tổ chức và dễ dàng nắm bắt, khi đối chiếu với cùng một tệp tin duy nhất tất cả 10000 dòng code.