Typescript Là Gì

  -  

Giới thiệu TypeScript - công tác đầu tiên

TypeScript là một ngôn ngữ lập trình, tương tự như JavaScript nó tiến hành từ sệt tảkỹ thuật ngữ điệu kịch phiên bản ECMAScript. TypeScript được Microsoft phát triển, nó kế thừahầu hết hầu như gì chúng ta đã biết về JavaScript (biến, hằn, vòng lặp ...), tuy nhiên nó không ngừng mở rộng thêm một trong những tính năngnhư khái báo vươn lên là với kiểu tài liệu cụ thể, đồ họa ... Mục đích để sút thiểu lỗi ngay lập tức từ khi viết code vàcó một kết cấu chặt chẽ văn minh để thỏa mãn nhu cầu tốt hơn cho các dự án khủng (như Angular)

Phần này coi như đang biết về JavaScript cơ bản, phải chỉ mày mò những đặc điểm khác biệtcủa TypeScript đối với JavaScript, còn những vụ việc khác kiến thức kế vượt từ JS.

Bạn đang xem: Typescript là gì


*

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

Công cố kỉnh để biên dịch code viết bởi TypeScript là typescript, là là một trong gói của NodeJs,quản lý bởi npm nên bạn phải cài đặt đầy đủ những thành phần này

Để cài đặt TypeScript gõ lệnh trên terminate

# npm install -g typescriptSau khi sở hữu đặt, thì áp dụng công cụ này bởi gõ lệnh tsc với các tham số tương ứng. Ví dụ có filemain.ts hy vọng biên dịch thành JavaScript main.js thì gõ:

# tsc main.ts#Biên dịch những file# tsc *.ts#Tự rượu cồn dịch nếu văn bản file cầm cố đổi# tsc main.ts --watchNgoài ra có thể tạo một file tsconfig.json để thông số kỹ thuật tsc mang đến từng thư mục dự án: tsconfig-json

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

Tạo một dự án trước tiên với VS Code

Tạo một thư mục dự án của bạn, cần sử dụng VS Code mở thử mục kia ra, sinh sản một file mã mối cung cấp TS hello.ts với nội dung:

var fullName: string; //Khai báo biến hóa với TS chất nhận được chỉ định kiểu cầm cố thểconsole.log("Xin chào, " + fullName);Tạo file thông số kỹ thuật cho TS trên VS Code có tên tsconfig.json với nội dụng tệp tin như sau:

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

*
Khi đã có file tsconfig.json thì lúc nào hy vọng biên dịch TS thành JS chỉ bài toán gõ CTRL+SHIFT+B, menu đổ ra chọn mục: tsc: build, nó vẫn dịch từ TypeScript lịch sự JavaScript mang đến bạn.Nếu lựa chọn tsc: watch sẽ tự động hóa dịch mỗi khi file nguồn cập nhật.

Ở lấy ví dụ trên, sau thời điểm biên dịch thì tự hello.ts đã gồm thêm file hello.js với nội dung

var fullName;console.log("Xin chào, " + fullName);Chạy thử file js hoàn toàn có thể tích hợp vào trang HTML để kiểm tra, hoặc chạy cùng với NodeJStừ mẫu lệnh terminate gõ (Không xúc tiến với DOM HTML)

#node hello.jsSau đây mày mò một số đặc điểm của TypeScript

Khai báo biến chuyển với kiểu dữ liệu cụ thể

TypeScript được cho phép khai báo biến bằng cách chỉ ra kiểu dáng dữ liệu cụ thể của biến

var username: string;//Hoặc khởi tạo luôn var username: string = "XTLAB";//Hoặc phong cách dữ liệu ngẫu nhiên username: any;Có những kiểu dữ liệu nguyên thủy string, number, boolean cũng rất có thể chỉ địnhbiến đó nhấn kiểu dữ liệu bất kỳ với any, câu hỏi cho khai báo vậy nên giúp phát hiện tại lỗi ngay lập tức từ khi code,ví dụ khai báo trở nên là string lại gán số sẽ có thông báo lỗi khi dịch.

Khai báo thay đổi mảng với kiểu tài liệu cụ thể

Sử dụng ký kết hiệu <> sau thứ hạ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 rất có thể dùng cam kết hiệu để tạo ra mảng có chỉ số phức hợp (đối tượng với ở trong tính) như JS

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

Interface - bối cảnh lập trình

TypeScript mang đến khai báo cấu tạo của một loại dữ liệu gọi là hình ảnh interface, những đối tượng người tiêu dùng cócác ở trong tính, dữ liệu giống với bối cảnh thì hoàn toàn có thể sử dụng nó như hình ảnh đã biết.

Xem thêm: Thuật Ngữ Tiếng Anh Về Bảo Hiểm Xã Hội Tiếng Anh Là Gì, Bảo Hiểm Xã Hội Tiếng Anh Là Gì

//Khai báo một giao diệninterface hàng hóa name: string, price: number//Hàm dìm tham số tất cả giao diện Productfunction showProduct(product: Product) console.log(product.name + ":" + product.price);//Tạo bố đố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ó giao diện ProductshowProduct(p2); //Báo Lỗi do p2 có price hình dáng string => khác hình ảnh ProductshowProduct(p3); //Báo Lỗi vày p3 không có thuộc tính price => khác bối cảnh Product

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

Xây dựng cùng sử dụng lớp bên trong TypeScript thì giống như như trong JavaScript (xem lớp bên trong JavaScript trước, chỉ tất cả điềucác trực thuộc tính, tham số phương thức phải khai báo với kiểu dữ liệu cụ thể). Trong khi với TypeScipt những phương thức,thuộc tính là chung, riêng, bảo đảm an toàn (giống C#) được khái báo với từ bỏ khóa public (mặc định),private (không truy cập được không tính lớp), protected (giống private, tuy vậy lớp thừa kế truycập được).

Ví dụ sau convert mã JavaScript khai báo 1 phần bên trong ví dụ ở phần trong JavaScript, thành cân xứng với TypeScript,hãy để ý biệt lập tham số các phương thức với thuộc tính của phần ở giữa 2 phiên bản

//Khai báo một lớp có 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 làm 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; //Phươ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 người tiêu dùng từ lớp bởi newlet sanpham = new Product("Iphone", 1000);//truy cập thuộc tính đối tượng người tiêu dùng sanpham.nameconsole.log(sanpham.name);//gọi một cách làm của đối tượngsanpham.checkStore(100);//Gọi settersanpham.info = "Thông tin sản phẩm ...";//Gọi getterconsole.log(sanpham.info);//Gọi một hàm tĩnhProduct.convertMoney(100000);Sự kế thừa cũng tương tự

class Computer extends sản phẩm store: number; constructor(name: string, price: number, store: number) super(name, price); this.store = store; mix info(i: string) //super.info(i) - nếu muốn thi hành cách tiến hành của lớp phụ thân this.infomation = name + ":"+i; totalInStore() console.log("totalInStore"); //Sử dụnglet sanpham2 = new Computer("Dell", 2000, 1);console.log(sanpham2.name);sanpham2.checkStore(200);sanpham2.info = "Thông tin thành phầm ...";console.log(sanpham2.info);sanpham2.totalInStore();

Generic - vào TypeScript

Kỹ thuật áp dụng Generic là cách xây dựng những hàm, interface, lớp ... Bên trên một kiểu tài liệu chungchung tự ký hiệu như hình dáng T, hình trạng K ..., kế tiếp 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 ...), loại K ví dụ là gì. Generic thông dụng trong nhiềungôn ngữ xây dựng như C#, Java, Generic trong Dart ...

Xem thêm: 49 Mẫu Hình Xăm Và Ý Nghĩa Hình Xăm Cô Gái Nhật Bản Geisha Đẹp 2020

//Khai 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 hình dáng Tfunction getArray(item : T ) : T<> var ar = new Array(); ar.push(item); return ar;//Tạo ra mảng kiểu Stringvar arString = getArray("Phần tử 1");arString.push("Phần tử 2");arString.push(1); //Lỗi vì chưng chèn vào mảng thành phần số//Tạo ra mảng đẳng cấp numbervar arNumber = getArray(22);Cách làm tương tự với Interface cùng 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 cùng Namespace - vào TypeScript

Module hóa là cách tổ chức triển khai code thành những thành phần (chia thành các file .ts), các thành phần đó bao giờ cần sử dụngthì hấp thụ vào.

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

export name1, name2, …, nameN ;Khi nào đề nghị dùng đến những thành phần export thì hấp thụ vào bởi từ khóa import

import name1, name2, …, nameN from "./namemodule";//namemodule băng thông tới tệp tin .tsVí dụ ở 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 tất cả 3 thành phần, bây giờ ở file khác, nếu muốn sử dụng 3 nhân tố này thì khai báovới import

//Nạp 1 thành phầnimport classExample from "./module1";//Nạp nhiều thành phần thì liệt kê raimport classExample, var1 from "./module1";Bạn hoàn toàn có thể nạp tất cả các thành phần

import * as M from "./module1";//Truy cập bằng M.var1, M.classExample ...Namespace y như C#, PHP ... Nhằm tránh xung thốt nhiên về tên. Bạn có thể gộp các lớp, hàm ... Vào trong 1 Namespace dobạ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 tới hàm, lớp phải chỉ ra namespace gắng thểUtility.log("Call me");Utility.error("maybe!");var cls : Utility.ClassExam = new Utility.ClassExam();//Export Namespaceexport UtilityKhi thực hiện lại code, hoàn toàn có thể import theo Namespace