Từ dành riêng “type” trong typescript là gì, Ưu Điểm của typescript so vớijavascript

      60

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

TypeScript là một trong những ngôn từ xây dựng, giống như như JavaScript nó xúc tiến trường đoản cú quánh tảnghệ thuật ngôn từ kịch bản ECMAScript. TypeScript được Microsoft cách tân và phát triển, nó kế thừahầu hết phần nhiều gì bọn họ vẫn biết về JavaScript (biến chuyển, hằn, vòng lặp ...), cơ mà nó không ngừng mở rộng thêm một trong những tính năngnhỏng khái báo biến với vẻ bên ngoài tài liệu rõ ràng, giao diện ... Mục đích để sút tđọc lỗi ngay lập tức từ Lúc viết code vàbao gồm một kết cấu nghiêm ngặt tân tiến nhằm đáp ứng tốt hơn cho những dự án công trình phệ (nlỗi Angular)

Phần này coi như sẽ biết về JavaScript cơ bạn dạng, nên chỉ mày mò hồ hết Điểm sáng không giống biệtcủa TypeScript đối với JavaScript, còn số đông vấn đề khác kiến thức thừa kế từ JS.

Bạn đang xem: Từ dành riêng “type” trong typescript là gì, Ưu Điểm của typescript so vớijavascript


*

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

Công thế nhằm biên dịch code viết bởi TypeScript là typescript, là là 1 gói của NodeJs,cai quản vì npm phải chúng ta phải cài đặt rất đầy đủ các yếu tố này

Để cài đặt TypeScript gõ lệnh tại terminate

# npm install -g typescriptSau khi cài đặt, thì áp dụng công cụ này bởi gõ lệnh tsc cùng với các tmê say số khớp ứng. Ví dụ tất cả filemain.ts mong mỏi biên dịch thành JavaScript main.js thì gõ:

# tsc main.ts#Biên dịch nhiều file# tsc *.ts#Tự rượu cồn dịch nếu như văn bản tệp tin nắm đổi# tsc main.ts --watchTrong khi hoàn toàn có thể chế tạo một tệp tin tsconfig.json nhằm cấu hình tsc mang lại từng thỏng mục dự án: tsconfig-json

IDE dùng để làm 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 công trình thứ nhất cùng với VS Code

Tạo một tlỗi mục dự án của người sử dụng, sử dụng VS Code mnghỉ ngơi thử mục kia ra, chế tạo ra một tệp tin mã nguồn TS hello.ts với nội dung:

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

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

*
khi đã có file tsconfig.json thì thời gian làm sao hy vọng biên dịch TS thành JS chỉ câu hỏi gõ CTRL+SHIFT+B, menu đổ ra lựa chọn mục: tsc: build, nó đang dịch từ bỏ TypeScript sang trọng JavaScript cho mình.Nếu lựa chọn tsc: watch vẫn tự động dịch mỗi khi file nguồn update.

Ở ví dụ trên, sau khoản thời gian biên dịch thì tự hello.ts vẫn gồm thêm tệp tin hello.js với nội dung

var fullName;console.log("Xin xin chào, " + fullName);Chạy thử file js có thể tích hợp vào trang HTML nhằm bình chọn, hoặc chạy cùng với NodeJStừ chiếc lệnh terminate gõ (Không cửa hàng với DOM HTML)

#node hello.jsSau trên đây tò mò một vài Đặc điểm của TypeScript

Knhì báo biến đổi với phong cách tài liệu gắng thể

TypeScript có thể chấp nhận được knhì báo biến hóa bằng cách đã cho thấy phong cách tài liệu cụ thể của biến

var username: string;//Hoặc khởi chế tác luôn luôn var username: string = "XTLAB";//Hoặc dạng hình tài liệu ngẫu nhiên username: any;Có các giao diện tài liệu nguim tbỏ string, number, boolean cũng rất có thể chỉ địnhthay đổi kia thừa nhận vẻ bên ngoài tài liệu ngẫu nhiên cùng với any, câu hỏi mang lại knhị báo những điều đó giúp vạc hiện lỗi tức thì từ bỏ Khi code,ví dụ khai báo vươn lên là là string lại gán số sẽ sở hữu được thông tin lỗi Lúc dịch.

Khai báo phát triển thành mảng cùng với kiểu dữ liệu ráng thể

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

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

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

TypeScript mang đến knhị báo kết cấu của một các loại tài liệu Gọi là đồ họa interface, gần như đối tượng người dùng cónhững trực thuộc tính, dữ liệu giống cùng với bối cảnh thì hoàn toàn có thể áp dụng nó nlỗi đồ họa vẫn biết.

Xem thêm: Tò He Là Gì ? Nghĩa Của Từ Tò He Trong Tiếng Việt Tò He Là Gì

//Knhị báo một giao diệninterface Product name: string, price: number//Hàm dìm tmê mệt số bao gồm giao diện Productfunction showProduct(product: Product) console.log(product.name + ":" + product.price);//Tạo tía đố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 bởi vì p1 tất cả bối cảnh ProductshowProduct(p2); //Báo Lỗi vì chưng p2 gồm price kiểu string => khác giao diện ProductshowProduct(p3); //Báo Lỗi do p3 không có nằm trong tính price => khác đồ họa Product

Class - Lớp cùng tính kế thừa lớp

Xây dựng với thực hiện phần bên trong TypeScript thì tương tự nhỏng vào JavaScript (xem Lớp trong JavaScript trước, chỉ bao gồm điềucác ở trong tính, tsi mê số cách làm yêu cầu khai báo cùng với vẻ bên ngoài tài liệu nạm thể). Ngoài ra với TypeScipt các cách tiến hành,thuộc tính là phổ biến, riêng biệt, đảm bảo (giống C#) được khái báo cùng với từ bỏ khóa public (khoác định),private (không truy vấn được quanh đó lớp), protected (kiểu như private, nhưng mà lớp kế thừa truycập được).

lấy ví dụ như sau convert mã JavaScript khai báo 1 phần bên trong ví dụ sống Lớp vào JavaScript, thành tương xứng với TypeScript,hãy chú ý biệt lập tham số những thủ tục cùng nằm trong tính của lớp giữa 2 phiên bản

//Knhì báo một lớp mang tên Productclass Product name: string; price: number; infomation: string; //Hàm khởi chế tạo ra 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 mix 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 người sử dụng từ bỏ lớp bằng newlet sanpsi = new Product("Iphone", 1000);//truy vấn ở trong tính đối tượng người tiêu dùng sanpmê man.nameconsole.log(sanpmê say.name);//call một cách tiến hành của đối tượngsanpham.checkStore(100);//Call settersanpđắm đuối.info = "tin tức thành phầm ...";//call getterconsole.log(sanpđam mê.info);//Gọi 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; phối info(i: string) //super.info(i) - nếu như muốn thực hành thủ tụ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(sanpham2.info);sanphamét vuông.totalInStore();

Generic - trong TypeScript

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

//Khai báo một hàm Generic, kiểu dữ liệu thay mặt đại diện T làm sao đó//Hàm tạo nên mảng thứ hạng Tfunction getArray(thành phầm : 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ị cnhát vào mảng bộ phận số//Tạo ra mảng loại numbervar arNumber = getArray(22);Cách thức làm tương tự như với Interface với 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 - trong TypeScript

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

Module hóa không phải của riêng TypeScript nhưng nó là chuẩn chỉnh của ECMAScript, vào một file .tslàm sao ao ước các thành phần của chính nó hoàn toàn có thể sử dụng lại ngơi nghỉ file .ts khác thì dùng đến từ khóa exportcho các thành phần kia (các nguyên tố có thể là biến chuyển, hằng, lớp, đối tượng người dùng ...)

export name1, name2, …, nameN ;khi nào buộc phải dùng cho những nhân tố export thì hấp thụ vào bằng từ bỏ khóa import

import name1, name2, …, nameN from "./namemodule";//namemodule đường dẫn tới tệp tin .tslấy ví dụ sinh sống file module1.ts knhị báo

var var1:string = "A";function fun1() console.log("f1");class classExample property1: stringexport var1, fun1, classExample;Vậy nên xuất module gồm 3 nhân tố, lúc này sống tệp tin không giống, nếu muốn sử dụng 3 yếu tắc này thì knhì báocùng với import

//Nạp 1 thành phầnimport classExample from "./module1";//Nạp nhiều nhân tố thì liệt kê raimport classExample, var1 from "./module1";quý khách hàng 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ằng M.var1, M.classExample ...Namespace hệt như C#, PHP.. ... để tránh xung bất chợt về thương hiệu. Quý khách hàng hoàn toàn có thể gộp các lớp, hàm ... vào trong 1 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 tới hàm, lớp cần chỉ ra rằng namespace cầm thểUtility.log("Hotline me");Utility.error("maybe!");var cls : Utility.ClassExam = new Utility.ClassExam();//Export Namespaceexport UtilityKhi áp dụng lại code, hoàn toàn có thể import theo Namespace