File ts là gì

Giới thiệu

TypeScript là 1 trong superset của JavaScript, nhằm mục tiêu giúp cho JavaScript hoàn toàn có thể mở rộng và an toàn hơn.TypeScript là mã mối cung cấp mở và đã được Microsoft gia hạn kể từ lúc họ tạo thành nó vào năm 2012. Mặc dù nhiên, TypeScript đã bao gồm bước hốt nhiên phá ban đầu của nó như là ngôn ngữ lập trình mấu chốt trong Angular 2. Nó đang thường xuyên phát triển y hệt như React cùng Vue.

Bạn đang xem: File ts là gì

Trong bài viết này, mình sẽ cùng các bạn tìm hiểu những khái niệm cơ bản của TypeScript qua các ví dụ thực tế.

Cùng bắt đầu nào!

Cài để TypeScript

Trước khi bước đầu code, chúng ta cần phải thiết lập TypeScript:

npm install -g typescriptSau khi cài đặt đặt, bạn cũng có thể kiểm tra coi TypeScript đang được setup thành công hay chưa bằng cách chạy lệnh tsc -v, nó đang hiển thị phiên bạn dạng của TypeScript đã được cài đặt.

Code các dòng đầu tiên

Hãy tạo thành file TypeScript đầu tiên của công ty và ban đầu code.Đối với các file TypeScript, họ lưu đuôi .ts nhé.Tạo tệp tin hello.ts.Bây giờ, mình đang viết một vài loại JavaScript thuần cũ, vì tất cả code JavaScript cũng chính là code TypeScript phù hợp lệ:

let x = 1;let y = 2;let z = x + y;console.log(z);Bước tiếp sau là biên dịch TypeScript thành JavaScript thuần, vày trình duyệt đề xuất file .js để đọc.

Biên dịch TypeScript

Để biên dịch TypeScript sang Javascript, bọn họ sẽ chạy lệnh tsc hello.ts. Bản chất của nó là convert tệp tin ts sang file js thuần nhằm trình duyệt có thể đọc được.Vì vậy, mở terminal ở chỗ của tệp tin hello.ts và chạy lệnh sau:

Sau lúc chạy lệnh, họ sẽ thấy 1 file hello.js sinh ra như vậy này:

Kết quả khi chạy tệp tin hello.js tại đoạn code trên là: 3.

Mẹo: Nếu bạn muốn biên dịch tất cả các file TypeScript bên trong bất kỳ thư mục nào, hãy sử dụng lệnh: tsc * .ts.

Data types

TypeScript - y như tên điện thoại tư vấn của nó - là phiên bản kiểu dữ liệu (typed) của JavaScript. Điều này có nghĩa là bạn cũng có thể chỉ định kiểu cho các biến khác biệt tại thời điểm khai báo. Nó sẽ luôn giữ 1 kiểu dữ liệu trong phạm vi (scope) đó.

Kiểu dữ liệu là 1 tính năng rất có lợi để đảm bảo an toàn độ tin tưởng và năng lực mở rộng code sau này. Nó giúp bảo đảm an toàn code của bọn họ hoạt cồn như ý muốn đợi. Không tính ra, nó giúp tìm kiếm lỗi, và log lại lỗi.

Cú pháp để gán một kiểu đến biến bất kỳ là viết thương hiệu của biến tiếp nối là dấu :, tiếp đến là thương hiệu của kiểu, tiếp sau là dấu = và cực hiếm của biến.

Có bố kiểu không giống nhau trong TypeScript: kiểu ngẫu nhiên (any type), các kiểu dựng sẵn (Built-in types) và những kiểu do người tiêu dùng tự quan niệm (User-defined types). Hãy khám phá mỗi về từng kiểu tài liệu này.

any type

Kiểu dữ liệu any là phối kết hợp của toàn bộ các kiểu tài liệu trong TypeScript.

let myVariable: any = "Hello World"

Built-in types

Đây là phần lớn kiểu tài liệu được kiến tạo trong TypeScript, bao gồm: number, string, boolean, void, null với undefined.

let memberCount: number = 100;let memberName: string = "Tien Dat Duong";let isAdmin: boolean = true;

User-defined types

Các kiểu dữ liệu do người tiêu dùng định nghĩa gồm những: enum, class, interface, array và tuple.

Xem thêm: Tiêu Chuẩn Tiếng Anh Là Gì ? Theo Tiêu Chuẩn Của Trong Tiếng Anh Là Gì

Chúng ta sẽ tò mò một số type trong các này sau nhé. Hôm nay mình chỉ ra mắt với chúng ta 2 type chúng ta hay sử dụng: class cùng interface.

Lập trình hướng đối tượng

TypeScript cung ứng tất cả các tính năng của lập trình hướng đối tượng, chẳng hạn như class và interface.

Chức năng này là 1 trong những sự cách tân và phát triển rất lớn so với JavaScript. Chính vì trước đây nó luôn gặp khó khăn cùng với OOP, nhất là khi các nhà phân phát triển bước đầu sử dụng nó cho những dự án đồ sộ lớn.

Class

Trong lập trình hướng đối tượng, một tấm là khuôn mẫu của các đối tượng. Một lớp sẽ xác định đối tượng người sử dụng sẽ bao gồm thuộc tính và công dụng gì. Một tấm cũng đóng gói dữ liệu cho đối tượng.

Trong ES5 và những phiên phiên bản trước đó, TypeScript ko tích phù hợp class. Nhưng mà ở những phiên phiên bản sau này thì đã gồm rồi.

class member // fields id: Number; name: String; isAdmin: Boolean; constructor(id: Number, name: String, isAdmin: Boolean) this.id = id; this.name = name; this.isAdmin = isAdmin; show(): void console.log(`Day la thanh vien $this.name`); Trong ví dụ như trên, bọn họ đã khai báo một tấm Member, cùng với một trong những thuộc tính của chính nó được khởi tạo do function constructor và function show nhằm hiển thị thương hiệu của member.

Chúng ta hoàn toàn có thể tạo 1 object new của class này như sau:

const newMember = new Member(1, "Dat", true);newMember.show(); // Day la thanh vien DatSau khi sinh sản object newMember, nó cũng trở nên có không thiếu thốn các thuộc tính như id, name, isAdmin và bao gồm method show() gồm quyền truy cập vào những thuộc tính của newMember.

Kết quả bản thân chạy file hello.js sẽ được coi là dòng chữ:Day la thanh vien Dat

Interface

Interface là 1 trong tính năng mạnh bạo khác của TypeScript, được cho phép bạn xác định kết cấu của những biến. Một interface chứa các phương thức nhưng mà một đối tượng bắt cần tuân thủ.

interface House address: String, acreage: Number, show: () => voidconst MyHouse: House = address: "Hanoi", acreage: 50, show: (): void => console.log(`Tim hieu ve TypeScript tai Framgia`); console.log(MyHouse.address, MyHouse.acreage, MyHouse.show());Ở đây, bọn họ đã khai báo một interface được House và chế tạo ra một object MyHouse. MyHouse bây chừ ràng buộc với interface House (giống implement), bảo vệ rằng object MyHouse đều phải sở hữu tất cả những thuộc tính của interface.

Kết quả bản thân chạy tệp tin hello.js:

Kết luận

Qua bài viết này, mình hy vọng có thể giúp cho bạn có một chiếc nhìn cơ phiên bản nhất về TypeScript và bí quyết nó hoàn toàn có thể làm cho JavaScript của người tiêu dùng chạy ổn định hơn và ít bị lỗi, cùng với 1 cấu trúc chặt chẽ, cụ thể hơn.

TypeScript đang trên đà trở nên tân tiến nhanh trong quả đât phát triển web. Cũng có một số lượng lớn các dev React đang vận dụng nó.

Xem thêm: Trộm Vía Là Gì ? Từ Đâu Mà Có Trộm Vía? Trộm Vía Là Gì

TypeScript chắc chắn rằng là một ngữ điệu đáng để học cho những dev front-end trong thời điểm 2018.

Tham khảo

https://medium.freecodecamp.org/learn-typescript-in-5-minutes-13eda868daebhttps://medium.freecodecamp.org/want-to-learn-typescript-heres-our-free-22-part-course-21cd9bbb5ef5https://www.tutorialspoint.com/typescript/typescript_interfaces.htm