Ts File Là Gì

Giới thiệu TypeScript - Chương trình đầu tiên

TypeScript là một ngôn từ xây dựng, tựa như như JavaScript nó triển khai trường đoản cú đặc tảnghệ thuật ngôn ngữ kịch bản ECMAScript. TypeScript được Microsoft cách tân và phát triển, nó kế thừaphần đông đông đảo gì bọn họ đã biết về JavaScript (biến chuyển, hằn, vòng lặp ...), tuy nhiên nó không ngừng mở rộng thêm một số tính năngnhư khái báo phát triển thành cùng với thứ hạng tài liệu rõ ràng, hình ảnh ... Mục đích để giảm tgọi lỗi ngay tự khi viết code vàtất cả một cấu trúc chặt chẽ văn minh để đáp ứng xuất sắc hơn cho các dự án công trình to (nhỏng Angular)

Phần này coi nlỗi đã biết về JavaScript cơ bạn dạng, nên có thể tìm hiểu phần nhiều đặc điểm khác biệtcủa TypeScript so với JavaScript, còn đầy đủ vấn đề không giống kỹ năng kế thừa trường đoản cú JS.

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


*

TypeScript được viết trong số file phần mở rộng đặt là .ts, code viết bởi TypeScript tiếp nối được biên dịch sang JavaScript thường thì nhằm chạy trên trình duyệt! Như vậy, ta sử dụng TypeScript nhằm viết JavaScript
Công cụ:

Công cụ để biên dịch code viết bởi TypeScript là typescript, là là một trong những gói của NodeJs,làm chủ bởi npm cần các bạn đề nghị thiết lập không thiếu những thành phần này

Để thiết lập TypeScript gõ lệnh tại terminate

# npm install -g typescriptSau Khi setup, thì sử dụng giải pháp này bởi gõ lệnh tsc với các tmê mẩn số khớp ứng. Ví dụ bao gồm filemain.ts mong biên dịch thành JavaScript main.js thì gõ:

# tsc main.ts#Biên dịch những file# tsc *.ts#Tự đụng dịch nếu ngôn từ tệp tin núm đổi# tsc main.ts --watchBên cạnh đó có thể sản xuất một file tsconfig.json để thông số kỹ thuật tsc cho từng thư mục dự án: tsconfig-json

IDE dùng để làm soạn thảo code TS chúng ta có thể sử dụng Visual Studio Code(miễn phí)

Tạo một dự án công trình thứ nhất với VS Code

Tạo một thư mục dự án công trình của khách hàng, sử dụng VS Code mlàm việc demo mục đó ra, chế tạo một file mã nguồn TS hello.ts cùng với nội dung:

var fullName: string; //Knhì báo đổi thay với TS cho phép hướng dẫn và chỉ định kiểu dáng cố gắng thểconsole.log("Xin kính chào, " + fullName);Tạo tệp tin thông số kỹ thuật mang đến TS trên VS Code có tên tsconfig.json cùng với nội dụng file nhỏng sau:

"compilerOptions": "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true, "target": "es5" ,

*
Lúc sẽ gồm file tsconfig.json thì cơ hội như thế nào hy vọng biên dịch TS thành JS chỉ vấn đề gõ CTRL+SHIFT+B, thực đơn đổ ra lựa chọn mục: tsc: build, nó đã dịch trường đoản cú TypeScript sang trọng JavaScript cho bạn.Nếu lựa chọn tsc: watch vẫn tự động dịch mỗi một khi tệp tin nguồn cập nhật.

Tại ví dụ bên trên, sau thời điểm biên dịch thì tự hello.ts đã có thêm file hello.js với nội dung

var fullName;console.log("Xin xin chào, " + fullName);Chạy test tệp tin js hoàn toàn có thể tích thích hợp vào trang HTML để kiểm soát, hoặc chạy với NodeJStừ loại lệnh terminate gõ (Không shop cùng với DOM HTML)

#node hello.jsSau phía trên tò mò một số điểm lưu ý của TypeScript

Knhì báo thay đổi với vẻ bên ngoài dữ liệu cố gắng thể

TypeScript được cho phép knhì báo trở thành bằng phương pháp chỉ ra rằng hình dáng tài liệu ví dụ của biến

var username: string;//Hoặc khởi tạo nên luôn var username: string = "XTLAB";//Hoặc phong cách tài liệu ngẫu nhiên username: any;Có các hình trạng tài liệu nguyên thủy string, number, boolean cũng hoàn toàn có thể chỉ địnhđổi mới kia thừa nhận phong cách dữ liệu ngẫu nhiên cùng với any, việc cho knhị báo điều này góp vạc hiện nay lỗi ngay tự lúc code,ví dụ knhị báo trở nên là string lại gán số sẽ sở hữu được thông tin lỗi Khi dịch.

Knhì báo biến chuyển mảng với mẫu mã dữ liệu cố kỉnh thể

Sử dụng ký kết hiệu <> sau kiểu dáng dữ liệu

var learning: string<>;learning = <"JavaScript", "PHP", "CSS">;//Hoặc var learning: string<> = <"JavaScript", "PHP", "CSS">;var js : string = learning<0>;Cũng hoàn toàn có thể cần sử dụng cam kết hiệu để tạo mảng gồm chỉ số phức tạp (đối tượng người tiêu dùng cùng với trực thuộc tính) nhỏng JS

var learning = first: "HTML", second: "CSS";console.log(learning<"first">);console.log(learning.second);

Interface - Giao diện lập trình

TypeScript đến knhị báo cấu trúc của một một số loại tài liệu điện thoại tư vấn là hình ảnh interface, số đông đối tượng cónhững ở trong tính, dữ liệu tương tự cùng với giao diện thì hoàn toàn có thể thực hiện nó nlỗi bối cảnh sẽ biết.

Xem thêm: Nêu Khái Niệm Và Ví Dụ Về Phản Xạ Là Gì Cho Ví Dụ Về Phản Xạ

//Khai báo một giao diệninterface Product name: string, price: number//Hàm nhấn tsay đắm số gồm đồ họa Productfunction showProduct(product: Product) console.log(sản phẩm.name + ":" + product.price);//Tạo ba đối tượngvar p1 = name: "Iphone", price: 500, os: "IOS10";var p2 = name: "Iphone", price: "Không biết";var p3 = name: "Iphone", os: "IOS10";showProduct(p1); //Ok vày p1 có bối cảnh ProductshowProduct(p2); //Báo Lỗi do p2 có price vẻ bên ngoài string => khác giao diện ProductshowProduct(p3); //Báo Lỗi vày p3 không có trực thuộc tính price => khác giao diện Product

Class - Lớp với tính kế thừa lớp

Xây dựng và thực hiện phần bên trong TypeScript thì tương tự như trong JavaScript (xem Lớp trong JavaScript trước, chỉ có điềucác nằm trong tính, tmê mẩn số phương thức bắt buộc knhì báo cùng với hình dáng dữ liệu nuốm thể). Trong khi với TypeScipt các phương thức,nằm trong tính là bình thường, riêng rẽ, bảo vệ (tương đương C#) được khái báo với từ bỏ khóa public (khoác định),private (không truy cập được không tính lớp), protected (như là private, mà lại lớp thừa kế truycập được).

lấy một ví dụ sau convert mã JavaScript knhì báo 1 phần bên trong ví dụ ở Lớp trong JavaScript, thành cân xứng cùng với TypeScript,hãy để ý khác hoàn toàn tđê mê số những cách làm và thuộc tính của lớp ở giữa 2 phiên bản

//Knhị báo một tờ mang tên Productclass Product name: string; price: number; infomation: string; //Hàm khởi tạo thành constructor(name: string, price: number) this.name = name; this.price = price; this.infomation = `$name - $price`; //Khai báo một cách tiến hành checkStore(storeid:number) console.log(this.name + " in store " + storeid); //Hàm getter get info() return this.infomation; //Hàm setter phối info(i) this.infomation = i; //Pmùi hương thức tĩnh static convertMoney(m:number) console.log(m); return m + " đồng"; //SỬ DỤNG LỚP//Tạo một đối tượng trường đoản cú lớp bởi newlet sanpđắm đuối = new Product("Iphone", 1000);//truy vấn thuộc tính đối tượng người dùng sanpđam mê.nameconsole.log(sanpsi mê.name);//hotline một cách làm của đối tượngsanpmê mệt.checkStore(100);//call settersanpđê mê.info = "Thông tin thành phầm ...";//Điện thoại tư vấn getterconsole.log(sanpsi.info);//Call một hàm tĩnhProduct.convertMoney(100000);Sự thừa kế cũng tương tự

class Computer extends Product store: number; constructor(name: string, price: number, store: number) super(name, price); this.store = store; mix info(i: string) //super.info(i) - nếu còn muốn thực hiện cách thức của lớp thân phụ this.infomation = name + ":"+i; totalInStore() console.log("totalInStore"); //Sử dụnglet sanpham2 = new Computer("Dell", 2000, 1);console.log(sanpham2.name);sanphamét vuông.checkStore(200);sanpham2.info = "tin tức thành phầm ...";console.log(sanphamét vuông.info);sanpham2.totalInStore();

Generic - vào TypeScript

Kỹ thuật thực hiện Generic là giải pháp sản xuất những hàm, interface, lớp ... bên trên một giao diện dữ liệu chungphổ biến từ bỏ ký hiệu nhỏng kiểu dáng T, vẻ bên ngoài K ..., tiếp nối Khi thực hiện hàm, lớp ... thì mới có thể chỉrõ dạng hình T là gì (number, string ...), mẫu mã K ví dụ là gì. Generic thông dụng trong nhiềungữ điệu xây dựng như C#, Java, Generic vào Dart ...

//Knhì báo một hàm Generic, hình trạng dữ liệu đại diện thay mặt T nào đó//Hàm tạo nên mảng phong cách Tfunction getArray(tác phẩm : T ) : T<> var ar = new Array(); ar.push(item); return ar;//Tạo ra mảng kiểu dáng Stringvar arString = getArray("Phần tử 1");arString.push("Phần tử 2");arString.push(1); //Lỗi vì cnhát vào mảng thành phần số//Tạo ra mảng hình dạng numbervar arNumber = getArray(22);Cách thức làm tựa như với Interface và Class

interface KeyPair key: T; value: U;let kv1: KeyPair = key:1, value:"Steve" ;let kv2: KeyPair = key:1, value:12345 ;class KeyValuePair private key: T; private value: U; setKeyValue(key: T, val: U): void this.key = key; this.val = val;

Module với Namespace - vào TypeScript

Module hóa là giải pháp tổ chức triển khai code thành các nguyên tố (chia thành các tệp tin .ts), những yếu tố kia bao giờ đề nghị sử dụngthì nạp vào.

Module hóa không phải của riêng biệt TypeScript nhưng mà nó là chuẩn của ECMAScript, vào một tệp tin .tsnhư thế nào mong muốn những yếu tố của nó có thể thực hiện lại ở tệp tin .ts không giống thì cần sử dụng tới từ khóa exportcho những yếu tắc kia (những nguyên tố hoàn toàn có thể là biến đổi, hằng, lớp, đối tượng người tiêu dùng ...)

export name1, name2, …, nameN ;Khi làm sao cần cần sử dụng mang lại các nhân tố export thì hấp thụ vào bằng tự khóa import

import name1, name2, …, nameN from "./namemodule";//namemodule đường truyền tới file .tslấy ví dụ như ở file module1.ts khai báo

var var1:string = "A";function fun1() console.log("f1");class classExample property1: stringexport var1, fun1, classExample;Như vậy xuất module có 3 nhân tố, hôm nay nghỉ ngơi file khác, nếu như muốn thực hiện 3 thành phần này thì knhị báocùng với import

//Nạp 1 thành phầnimport classExample from "./module1";//Nạp nhiều yếu tắc thì liệt kê raimport classExample, var1 from "./module1";Bạn hoàn toàn có thể nạp toàn bộ những thành phần

import * as M from "./module1";//Truy cập bởi M.var1, M.classExample ...Namespace hệt như C#, PHPhường ... nhằm rời xung bất chợt về tên. Quý khách hàng rất có thể gộp những lớp, hàm ... vào một Namespace docác bạn đặt ví dụ:

namespace Utility export function log(msg: string) console.log(msg); export function error(msg: string) console.error(msg); export class ClassExam name: string; // sử dụng: truy vấn cho tới hàm, lớp nên chỉ ra rằng namespace nắm thểUtility.log("Hotline me");Utility.error("maybe!");var cls : Utility.ClassExam = new Utility.ClassExam();//Export Namespaceexport UtilityLúc thực hiện lại code, hoàn toàn có thể import theo Namespace