TypeScript - Hướng dẫn Nhanh

JavaScript đã được giới thiệu như một ngôn ngữ cho phía máy khách. Sự phát triển của Node.js cũng đánh dấu JavaScript là một công nghệ phía máy chủ mới nổi. Tuy nhiên, khi mã JavaScript phát triển, nó có xu hướng trở nên lộn xộn hơn, gây khó khăn cho việc bảo trì và sử dụng lại mã. Hơn nữa, việc không nắm bắt được các tính năng của Hướng đối tượng, kiểm tra kiểu mạnh và kiểm tra lỗi thời gian biên dịch đã ngăn cản JavaScript thành công ở cấp doanh nghiệp như một công nghệ phía máy chủ chính thức.TypeScript đã được trình bày để thu hẹp khoảng cách này.

TypeScript là gì?

Theo định nghĩa, “TypeScript là JavaScript để phát triển quy mô ứng dụng.”

TypeScript là một ngôn ngữ biên dịch, hướng đối tượng, được định kiểu mạnh mẽ. Nó được thiết kế bởiAnders Hejlsberg(người thiết kế C #) tại Microsoft. TypeScript vừa là một ngôn ngữ vừa là một bộ công cụ. TypeScript là một tập hợp JavaScript được đánh máy được biên dịch sang JavaScript. Nói cách khác, TypeScript là JavaScript cộng với một số tính năng bổ sung.

Các tính năng của TypeScript

TypeScript is just JavaScript. TypeScript bắt đầu bằng JavaScript và kết thúc bằng JavaScript. Typecript thông qua các khối xây dựng cơ bản của chương trình của bạn từ JavaScript. Do đó, bạn chỉ cần biết JavaScript để sử dụng TypeScript. Tất cả mã TypeScript được chuyển đổi thành mã JavaScript tương đương với mục đích thực thi.

TypeScript supports other JS libraries. TypeScript được biên dịch có thể được sử dụng từ bất kỳ mã JavaScript nào. JavaScript do TypeScript tạo có thể sử dụng lại tất cả các khung, công cụ và thư viện JavaScript hiện có.

JavaScript is TypeScript. Điều này có nghĩa là bất kỳ.js tệp có thể được đổi tên thành .ts và được biên dịch với các tệp TypeScript khác.

TypeScript is portable. TypeScript có thể di động trên các trình duyệt, thiết bị và hệ điều hành. Nó có thể chạy trên bất kỳ môi trường nào mà JavaScript chạy trên đó. Không giống như các đối tác của nó, TypeScript không cần một máy ảo chuyên dụng hoặc một môi trường thời gian chạy cụ thể để thực thi.

TypeScript và ECMAScript

Đặc tả ECMAScript là một đặc tả chuẩn hóa của một ngôn ngữ kịch bản. Có sáu phiên bản của ECMA-262 được xuất bản. Phiên bản 6 của tiêu chuẩn có tên mã là "Harmony". TypeScript được căn chỉnh với đặc tả ECMAScript6.

TypeScript sử dụng các tính năng ngôn ngữ cơ bản của nó từ đặc tả ECMAScript5, tức là đặc tả chính thức cho JavaScript. Các tính năng của ngôn ngữ TypeScript như Mô-đun và định hướng dựa trên lớp phù hợp với đặc tả EcmaScript 6. Ngoài ra, TypeScript cũng bao gồm các tính năng như generics và gõ chú thích không phải là một phần của đặc tả EcmaScript6.

Tại sao sử dụng TypeScript?

TypeScript vượt trội hơn các ngôn ngữ lập trình khác như CoffeeScript và Dart theo cách mà TypeScript là JavaScript mở rộng. Ngược lại, các ngôn ngữ như Dart, CoffeeScript tự nó là những ngôn ngữ mới và yêu cầu môi trường thực thi ngôn ngữ cụ thể.

Các lợi ích của TypeScript bao gồm:

• Compilation- JavaScript là một ngôn ngữ thông dịch. Do đó, nó cần được chạy để kiểm tra xem nó có hợp lệ hay không. Nó có nghĩa là bạn viết tất cả các mã chỉ để tìm không có đầu ra, trong trường hợp có lỗi. Do đó, bạn phải dành hàng giờ để tìm lỗi trong mã. Trình chuyển đổi TypeScript cung cấp tính năng kiểm tra lỗi. TypeScript sẽ biên dịch mã và tạo ra các lỗi biên dịch, nếu nó tìm thấy một số loại lỗi cú pháp. Điều này giúp làm nổi bật các lỗi trước khi tập lệnh được chạy.

• Strong Static Typing- JavaScript không được gõ mạnh. TypeScript đi kèm với một hệ thống suy luận kiểu và gõ tĩnh tùy chọn thông qua TLS (TypeScript Language Service). Kiểu của một biến, được khai báo không có kiểu, có thể được TLS suy ra dựa trên giá trị của nó.

• TypeScript supports type definitionscho các thư viện JavaScript hiện có. Tệp Định nghĩa TypeScript (với.d.tsphần mở rộng) cung cấp định nghĩa cho các thư viện JavaScript bên ngoài. Do đó, mã TypeScript có thể chứa các thư viện này.

• TypeScript supports Object Oriented Programming các khái niệm như lớp, giao diện, kế thừa, v.v.

Các thành phần của TypeScript

Về cơ bản, TypeScript có ba thành phần sau:

• Language - Nó bao gồm cú pháp, từ khóa và chú thích kiểu.

• The TypeScript Compiler - Trình biên dịch TypeScript (tsc) chuyển đổi các hướng dẫn được viết bằng TypeScript sang JavaScript tương đương của nó.

• The TypeScript Language Service- "Dịch vụ ngôn ngữ" cho thấy một lớp bổ sung xung quanh đường ống biên dịch cốt lõi là các ứng dụng giống như trình biên tập. Dịch vụ ngôn ngữ hỗ trợ tập hợp chung của các thao tác soạn thảo điển hình như hoàn thành câu lệnh, trợ giúp chữ ký, định dạng và phác thảo mã, tô màu, v.v.

Tệp khai báo

Khi một tập lệnh TypeScript được biên dịch, có một tùy chọn để tạo declaration file (với phần mở rộng .d.ts) có chức năng như một giao diện cho các thành phần trong JavaScript đã biên dịch. Khái niệm tệp khai báo tương tự như khái niệm tệp tiêu đề trong C / C ++. Tệp khai báo (tệp có.d.ts phần mở rộng) cung cấp intellisense cho các loại, lời gọi hàm và hỗ trợ biến cho các thư viện JavaScript như jQuery, MooTools, v.v.

Dùng thử Tùy chọn trực tuyến

Chúng tôi đã thiết lập lập trình TypeScript trực tuyến, để bạn có thể thực hiện tất cả các ví dụ có sẵn trực tuyến cùng một lúc khi bạn đang làm bài tập lý thuyết của mình. Điều này giúp bạn tin tưởng vào những gì bạn đang đọc và kiểm tra kết quả bằng các tùy chọn khác nhau. Vui lòng sửa đổi bất kỳ ví dụ nào và thực hiện trực tuyến.

Hãy thử ví dụ sau bằng cách sử dụng tùy chọn trình biên dịch trực tuyến của chúng tôi có sẵn tại CodingGround

var message:string = "Hello World" 
console.log(message)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

Đối với hầu hết các ví dụ được đưa ra trong hướng dẫn này, bạn sẽ tìm thấy Try ittrong phần mã trang web của chúng tôi ở góc trên cùng bên phải, sẽ đưa bạn đến trình biên dịch trực tuyến. Vì vậy, chỉ cần tận dụng nó và tận hưởng việc học của bạn.

Trong chương này, chúng ta sẽ thảo luận về cách cài đặt TypeScript trên nền tảng Windows. Chúng tôi cũng sẽ giải thích cách cài đặt Brackets IDE.

TypeScript ─ Dùng thử Tùy chọn Trực tuyến

Bạn có thể kiểm tra các tập lệnh của mình trực tuyến bằng cách sử dụng The TypeScript tại www.typescriptlang.org/Playground . Trình chỉnh sửa trực tuyến hiển thị JavaScript tương ứng do trình biên dịch phát ra.

Bạn có thể thử ví dụ sau bằng cách sử dụng Playground.

var num:number = 12 
console.log(num)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var num = 12;
console.log(num);

Đầu ra của chương trình trên được đưa ra dưới đây:

12

Thiết lập môi trường cục bộ

Typecript là một công nghệ Mã nguồn mở. Nó có thể chạy trên mọi trình duyệt, mọi máy chủ và mọi hệ điều hành. Bạn sẽ cần các công cụ sau để viết và kiểm tra chương trình Typecript -

Trình soạn thảo văn bản

Trình soạn thảo văn bản giúp bạn viết mã nguồn của mình. Ví dụ về một số trình chỉnh sửa bao gồm Windows Notepad, Notepad ++, Emacs, vim hoặc vi, v.v. Các trình chỉnh sửa được sử dụng có thể khác nhau tùy theo Hệ điều hành.

Các tệp nguồn thường được đặt tên với phần mở rộng .ts

Trình biên dịch TypeScript

Trình biên dịch TypeScript tự nó là một .tstệp được biên dịch thành tệp JavaScript (.js). TSC (TypeScript Compiler) là một trình biên dịch từ nguồn sang nguồn (trình biên dịch / chuyển tiếp).

TSC tạo một phiên bản JavaScript của .tstệp được chuyển đến nó. Nói cách khác, TSC tạo ra một mã nguồn JavaScript tương đương từ tệp Typecript được cung cấp làm đầu vào cho nó. Quá trình này được gọi là chuyển đổi.

Tuy nhiên, trình biên dịch từ chối bất kỳ tệp JavaScript thô nào được chuyển đến nó. Trình biên dịch chỉ giao dịch với.ts hoặc là .d.ts các tập tin.

Cài đặt Node.js

Node.js là một mã nguồn mở, môi trường thời gian chạy đa nền tảng cho JavaScript phía máy chủ. Node.js được yêu cầu để chạy JavaScript mà không cần trình duyệt hỗ trợ. Nó sử dụng công cụ JavaScript V8 của Google để thực thi mã. Bạn có thể tải xuống mã nguồn Node.js hoặc trình cài đặt được tạo sẵn cho nền tảng của mình. Nút có sẵn ở đây -https://nodejs.org/en/download

Cài đặt trên Windows

Làm theo các bước dưới đây để cài đặt Node.js trong môi trường Windows.

Step 1 - Tải xuống và chạy trình cài đặt .msi cho Node.

Step 2 - Để xác minh xem cài đặt có thành công hay không, hãy nhập lệnh node –v trong cửa sổ đầu cuối.

Step 3 - Gõ lệnh sau vào cửa sổ terminal để cài đặt TypeScript.

npm install -g typescript

Cài đặt trên Mac OS X

Để cài đặt node.js trên Mac OS X, bạn có thể tải xuống gói nhị phân được biên dịch trước để cài đặt dễ dàng và đẹp mắt. Đi quahttp://nodejs.org/ và nhấp vào nút cài đặt để tải xuống gói mới nhất.

Cài đặt gói từ .dmg bằng cách làm theo trình hướng dẫn cài đặt sẽ cài đặt cả nút và npm. npm là Node Package Manager, hỗ trợ cài đặt các gói bổ sung cho node.js.

Cài đặt trên Linux

Bạn cần cài đặt một số phụ thuộc trước khi có thể cài đặt Node.js và NPM.

• Ruby và GCC. Bạn sẽ cần Ruby 1.8.6 hoặc mới hơn và GCC 4.2 hoặc mới hơn.

• Homebrew. Homebrew là một trình quản lý gói ban đầu được thiết kế cho Mac, nhưng nó đã được chuyển sang Linux dưới dạng Linuxbrew. Bạn có thể tìm hiểu thêm về Homebrew tạihttp://brew.sh/ và Linuxbrew tại http://brew.sh/linuxbrew

Sau khi các phần phụ thuộc này được cài đặt, bạn có thể cài đặt Node.js bằng cách sử dụng lệnh sau trên thiết bị đầu cuối:

brew install node.

Hỗ trợ IDE

Typecript có thể được xây dựng trên rất nhiều môi trường phát triển như Visual Studio, Sublime Text 2, WebStorm / PHPStorm, Eclipse, Brackets, v.v. Visual Studio Code và Brackets IDE được thảo luận ở đây. Môi trường phát triển được sử dụng ở đây là Visual Studio Code (nền tảng Windows).

Mã Visual Studio

Đây là một IDE mã nguồn mở từ Visual Studio. Nó có sẵn cho các nền tảng Mac OS X, Linux và Windows. VScode có sẵn tại -https://code.visualstudio.com/

Cài đặt trên Windows

Step 1- Tải xuống Visual Studio Code cho Windows.

Step 2- Nhấp đúp vào VSCodeSetup.exe

để khởi chạy quá trình thiết lập. Điều này sẽ chỉ mất một phút.

Step 3 - Ảnh chụp màn hình IDE được đưa ra bên dưới.

Step 4- Bạn có thể truy cập trực tiếp vào đường dẫn của tệp bằng cách nhấp chuột phải vào tệp → mở trong dấu nhắc lệnh. Tương tự, tùy chọn Reveal in Explorer hiển thị tệp trong File Explorer.

Cài đặt trên Mac OS X

Hướng dẫn cài đặt cụ thể cho Mac OS X của Visual Studio Code có tại

https://code.visualstudio.com/Docs/editor/setup

Cài đặt trên Linux

Hướng dẫn cài đặt cụ thể Linux cho Visual Studio Code có thể được tìm thấy tại

https://code.visualstudio.com/Docs/editor/setup

Dấu ngoặc

Brackets là một trình soạn thảo mã nguồn mở miễn phí để phát triển web, được tạo bởi Adobe Systems. Nó có sẵn cho Linux, Windows và Mac OS X. Giá đỡ có sẵn tạihttp://brackets.io/

Phần mở rộng TypeScript cho Dấu ngoặc

Brackets hỗ trợ tiện ích mở rộng để thêm chức năng bổ sung thông qua Trình quản lý tiện ích mở rộng. Các bước sau giải thích việc cài đặt phần mở rộng TypeScript bằng cách sử dụng tương tự.

• Đăng cài đặt, nhấp vào biểu tượng trình quản lý tiện ích mở rộng

  
  ở phía bên tay phải của trình chỉnh sửa. Nhập bảng chữ vào hộp tìm kiếm.

• Cài đặt các plugin Brackets TSLint và Brackets TypeScript plugin.

Bạn có thể chạy dấu nhắc / trình bao DOS trong chính Dấu ngoặc bằng cách thêm một phần mở rộng nữa Khung vỏ.

Sau khi cài đặt, bạn sẽ tìm thấy một biểu tượng của trình bao ở phía bên phải của trình chỉnh sửa

. Sau khi nhấp vào biểu tượng, bạn sẽ thấy cửa sổ shell như hình dưới đây -

Note- Typecript cũng có sẵn dưới dạng plugin cho môi trường Visual Studio 2012 và 2013 (https://www.typescriptlang.org/#Download).VS 2015 trở lên bao gồm plugin Typescript theo mặc định.

Bây giờ, bạn đã sẵn sàng !!!

Cú pháp xác định một tập hợp các quy tắc để viết chương trình. Mỗi đặc tả ngôn ngữ xác định cú pháp riêng của nó. Một chương trình TypeScript bao gồm:

• Modules
• Functions
• Variables
• Tuyên bố và biểu thức
• Comments

Mã TypeScript đầu tiên của bạn

Chúng ta hãy bắt đầu với ví dụ “Hello World” truyền thống -

var message:string = "Hello World" 
console.log(message)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

• Dòng 1 khai báo một biến bằng thông báo tên. Biến là một cơ chế để lưu trữ các giá trị trong một chương trình.

• Dòng 2 in giá trị của biến vào dấu nhắc. Ở đây, giao diện điều khiển đề cập đến cửa sổ đầu cuối. Hàm log () được sử dụng để hiển thị văn bản trên màn hình.

Biên dịch và thực thi chương trình TypeScript

Hãy để chúng tôi xem cách biên dịch và thực thi chương trình TypeScript bằng Visual Studio Code. Làm theo các bước dưới đây -

Step 1- Lưu tệp với phần mở rộng .ts. Chúng tôi sẽ lưu tệp dưới dạng Test.ts. Trình chỉnh sửa mã đánh dấu các lỗi trong mã, nếu có, trong khi bạn lưu nó.

Step 2- Nhấp chuột phải vào tệp TypeScript trong tùy chọn Tệp Làm việc trong Ngăn Khám phá của Mã VS. Chọn tùy chọn Mở trong Dấu nhắc Lệnh.

Step 3 - Để biên dịch tập tin, sử dụng lệnh sau trên cửa sổ terminal.

tsc Test.ts

Step 4- Tập tin được biên dịch thành Test.js. Để chạy chương trình đã viết, hãy nhập dòng sau vào dòng lệnh.

node Test.js

Cờ biên dịch

Cờ trình biên dịch cho phép bạn thay đổi hành vi của trình biên dịch trong quá trình biên dịch. Mỗi cờ trình biên dịch hiển thị một cài đặt cho phép bạn thay đổi cách trình biên dịch hoạt động.

Bảng sau liệt kê một số cờ phổ biến được liên kết với trình biên dịch TSC. Cách sử dụng dòng lệnh điển hình sử dụng một số hoặc tất cả các công tắc.

Không.	Cờ biên dịch & Mô tả
1.	--help Hiển thị hướng dẫn trợ giúp
2.	--module Tải các mô-đun bên ngoài
3.	--target Đặt phiên bản ECMA mục tiêu
4.	--declaration Tạo tệp .d.ts bổ sung
5.	--removeComments Xóa tất cả nhận xét khỏi tệp đầu ra
6.	--out Biên dịch nhiều tệp thành một tệp đầu ra duy nhất
7.	--sourcemap Tạo tệp bản đồ nguồn (.map)
số 8.	--module noImplicitAny Không cho phép trình biên dịch suy ra bất kỳ loại nào
9.	--watch Theo dõi các thay đổi tệp và biên dịch lại chúng một cách nhanh chóng

Note - Nhiều tệp có thể được biên dịch cùng một lúc.

tsc file1.ts, file2.ts, file3.ts

Số nhận dạng trong TypeScript

Số nhận dạng là tên được đặt cho các phần tử trong một chương trình như biến, hàm, v.v. Các quy tắc cho số nhận dạng là:

• Số nhận dạng có thể bao gồm cả hai, ký tự và chữ số. Tuy nhiên, số nhận dạng không thể bắt đầu bằng một chữ số.

• Số nhận dạng không được bao gồm các ký hiệu đặc biệt ngoại trừ dấu gạch dưới (_) hoặc dấu đô la ($).

• Số nhận dạng không được là từ khóa.

• Chúng phải là duy nhất.

• Số nhận dạng có phân biệt chữ hoa chữ thường.

• Số nhận dạng không được chứa khoảng trắng.

Các bảng sau liệt kê một số ví dụ về số nhận dạng hợp lệ và không hợp lệ:

Số nhận dạng hợp lệ	Số nhận dạng không hợp lệ
tên đầu tiên	Var
tên đầu tiên	tên đầu tiên
num1	tên đầu tiên
$ kết quả	1 số

TypeScript ─ Từ khóa

Từ khóa có một ý nghĩa đặc biệt trong ngữ cảnh của một ngôn ngữ. Bảng sau liệt kê một số từ khóa trong TypeScript.

phá vỡ	như	bất kì	công tắc điện
trường hợp	nếu	phi	khác
var	con số	chuỗi	được
mô-đun	kiểu	ví dụ	loại
công cộng	riêng tư	enum	xuất khẩu
cuối cùng	cho	trong khi	vô hiệu
vô giá trị	siêu	điều này	Mới
trong	trở về	thật	sai
bất kì	kéo dài	tĩnh	để cho
gói hàng	dụng cụ	giao diện	chức năng
Mới	thử	năng suất	hăng sô
tiếp tục	làm	nắm lấy

Khoảng trắng và ngắt dòng

TypeScript bỏ qua khoảng trắng, tab và dòng mới xuất hiện trong chương trình. Bạn có thể sử dụng các khoảng trắng, tab và dòng mới một cách thoải mái trong chương trình của mình và bạn có thể tự do định dạng và thụt lề chương trình của mình theo cách gọn gàng và nhất quán giúp mã dễ đọc và dễ hiểu.

TypeScript phân biệt chữ hoa chữ thường

TypeScript phân biệt chữ hoa chữ thường. Điều này có nghĩa là TypeScript phân biệt giữa các ký tự viết hoa và viết thường.

Dấu chấm phẩy là tùy chọn

Mỗi dòng lệnh được gọi là statement. Dấu chấm phẩy là tùy chọn trong TypeScript.

Example

console.log("hello world")
console.log("We are learning TypeScript")

Một dòng duy nhất có thể chứa nhiều câu lệnh. Tuy nhiên, các câu lệnh này phải được phân tách bằng dấu chấm phẩy.

Nhận xét trong TypeScript

Nhận xét là một cách để cải thiện khả năng đọc của chương trình. Nhận xét có thể được sử dụng để bao gồm thông tin bổ sung về một chương trình như tác giả của mã, gợi ý về một hàm / cấu trúc, v.v. Nhận xét bị trình biên dịch bỏ qua.

TypeScript hỗ trợ các loại nhận xét sau:

• Single-line comments ( // ) - Bất kỳ văn bản nào giữa // và cuối dòng được coi là một nhận xét

• Multi-line comments (/* */) - Những bình luận này có thể kéo dài nhiều dòng.

Example

//this is single line comment 
 
/* This is a  
   Multi-line comment 
*/

TypeScript và Hướng đối tượng

TypeScript là JavaScript hướng đối tượng. Định hướng đối tượng là một mô hình phát triển phần mềm theo mô hình thế giới thực. Hướng đối tượng coi một chương trình là một tập hợp các đối tượng giao tiếp với nhau thông qua cơ chế gọi là các phương thức. TypeScript cũng hỗ trợ các thành phần hướng đối tượng này.

• Object- Một đối tượng là một đại diện thời gian thực của bất kỳ thực thể nào. Theo Grady Brooch, mọi vật thể phải có ba đặc điểm:

  • State - được mô tả bởi các thuộc tính của một đối tượng

  • Behavior - mô tả cách đối tượng sẽ hoạt động

  • Identity - một giá trị duy nhất để phân biệt một đối tượng với một tập hợp các đối tượng tương tự như vậy.

• Class- Một lớp về mặt OOP là một bản thiết kế để tạo các đối tượng. Một lớp đóng gói dữ liệu cho đối tượng.

• Method - Phương pháp tạo điều kiện giao tiếp giữa các đối tượng.

Example: TypeScript and Object Orientation

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

Ví dụ trên định nghĩa một lời chào lớp . Lớp có một phương thức welcome () . Phương thức in chuỗi “Hello World” trên thiết bị đầu cuối. Cácnewtừ khóa tạo một đối tượng của lớp (obj). Đối tượng gọi phương thức welcome () .

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

Đầu ra của chương trình trên được đưa ra dưới đây:

Hello World!!!

Hệ thống Loại biểu thị các loại giá trị khác nhau được ngôn ngữ hỗ trợ. Hệ thống Loại kiểm tra tính hợp lệ của các giá trị được cung cấp trước khi chúng được chương trình lưu trữ hoặc thao tác. Điều này đảm bảo rằng mã hoạt động như mong đợi. Hệ thống Loại cũng cho phép gợi ý mã phong phú hơn và tài liệu tự động.

TypeScript cung cấp các kiểu dữ liệu như một phần của Hệ thống Kiểu tùy chọn của nó. Phân loại kiểu dữ liệu như dưới đây:

Loại bất kỳ

Các anykiểu dữ liệu là siêu kiểu của tất cả các kiểu trong TypeScript. Nó biểu thị một kiểu động. Sử dụngany kiểu tương đương với việc chọn không tham gia kiểm tra kiểu cho một biến.

Các loại cài sẵn

Bảng sau minh họa tất cả các kiểu cài sẵn trong TypeScript:

Loại dữ liệu	Từ khóa	Sự miêu tả
Con số	con số	Giá trị dấu chấm động 64 bit chính xác gấp đôi. Nó có thể được sử dụng để biểu diễn cả hai, số nguyên và phân số.
Chuỗi	chuỗi	Đại diện cho một chuỗi các ký tự Unicode
Boolean	boolean	Đại diện cho các giá trị lôgic, đúng và sai
Hư không	vô hiệu	Được sử dụng trên các kiểu trả về hàm để đại diện cho các hàm không trả về
Vô giá trị	vô giá trị	Biểu thị sự vắng mặt có chủ ý của một giá trị đối tượng.
Chưa xác định	chưa xác định	Biểu thị giá trị được cấp cho tất cả các biến chưa được khởi tạo

Note - Không có kiểu số nguyên trong TypeScript và JavaScript.

Không và không xác định ─ Chúng có giống nhau không?

Các null và undefinedkiểu dữ liệu thường là một nguồn gây nhầm lẫn. Không thể sử dụng null và undefined để tham chiếu kiểu dữ liệu của một biến. Chúng chỉ có thể được gán dưới dạng giá trị cho một biến.

Tuy nhiên, null và undefined không giống nhau . Một biến được khởi tạo với undefined nghĩa là biến đó không có giá trị hoặc đối tượng được gán cho nó trong khi null có nghĩa là biến đó đã được đặt thành một đối tượng có giá trị không được xác định.

Các loại do người dùng xác định

Các kiểu do người dùng định nghĩa bao gồm Enumerations (enum), lớp, giao diện, mảng và bộ giá trị. Những điều này sẽ được thảo luận chi tiết trong các chương sau.

Một biến, theo định nghĩa, là "một không gian được đặt tên trong bộ nhớ" để lưu trữ các giá trị. Nói cách khác, nó hoạt động như một vùng chứa các giá trị trong một chương trình. Các biến TypeScript phải tuân theo các quy tắc đặt tên JavaScript -

• Tên biến có thể chứa bảng chữ cái và chữ số.

• Chúng không được chứa khoảng trắng và các ký tự đặc biệt, ngoại trừ dấu gạch dưới (_) và dấu đô la ($).

• Tên biến không được bắt đầu bằng chữ số.

Một biến phải được khai báo trước khi nó được sử dụng. Sử dụngvar từ khóa để khai báo biến.

Khai báo biến trong TypeScript

Cú pháp kiểu để khai báo một biến trong TypeScript là bao gồm dấu hai chấm (:) sau tên biến, theo sau là kiểu của nó. Cũng như trong JavaScript, chúng tôi sử dụngvar từ khóa để khai báo một biến.

Khi bạn khai báo một biến, bạn có bốn tùy chọn:

• Khai báo kiểu và giá trị của nó trong một câu lệnh.

• Khai báo kiểu của nó nhưng không có giá trị. Trong trường hợp này, biến sẽ được đặt thành không xác định.

• Khai báo giá trị của nó nhưng không có kiểu. Kiểu biến sẽ được đặt thành kiểu dữ liệu của giá trị được gán.

• Không khai báo giá trị không phải loại. Trong trường hợp này, kiểu dữ liệu của biến sẽ là bất kỳ và sẽ được khởi tạo thành không xác định.

Bảng sau minh họa cú pháp hợp lệ cho khai báo biến như đã thảo luận ở trên:

Không.	Cú pháp và mô tả khai báo biến
1.	var name:string = ”mary” Biến lưu trữ một giá trị của kiểu chuỗi
2.	var name:string; Biến là một biến chuỗi. Giá trị của biến được đặt thành không xác định theo mặc định
3.	var name = ”mary” Kiểu của biến được suy ra từ kiểu dữ liệu của giá trị. Ở đây, biến có kiểu chuỗi
4.	var name; Kiểu dữ liệu của biến là bất kỳ. Giá trị của nó được đặt thành không xác định theo mặc định.

Ví dụ: Các biến trong TypeScript

var name:string = "John"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var name = "John";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("name" + name);
console.log("first score: " + score1);
console.log("second score : " + score2);
console.log("sum of the scores: " + sum);

Đầu ra của chương trình trên được đưa ra dưới đây:

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

Trình biên dịch TypeScript sẽ tạo ra lỗi nếu chúng ta cố gắng gán một giá trị cho một biến không cùng kiểu. Do đó, TypeScript tuân theo Kiểu gõ mạnh. Cú pháp gõ Strong đảm bảo rằng các kiểu được chỉ định ở hai bên của toán tử gán (=) là giống nhau. Đây là lý do tại sao đoạn mã sau sẽ dẫn đến lỗi biên dịch:

var num:number = "hello"     // will result in a compilation error

Nhập Assertion trong TypeScript

TypeScript cho phép thay đổi một biến từ kiểu này sang kiểu khác. TypeScript đề cập đến quá trình này là Type Assertion . Cú pháp là đặt kiểu đích giữa các ký hiệu <> và đặt nó trước biến hoặc biểu thức. Ví dụ sau giải thích khái niệm này:

Thí dụ

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(typeof(str2))

Nếu bạn di con trỏ chuột qua câu lệnh khẳng định kiểu trong Visual Studio Code, nó sẽ hiển thị sự thay đổi trong kiểu dữ liệu của biến. Về cơ bản, nó cho phép khẳng định từ kiểu S đến T thành công nếu S là kiểu con của T hoặc T là kiểu con của S.

Lý do tại sao nó không được gọi là "kiểu ép kiểu" là vì ép kiểu thường ngụ ý một số loại hỗ trợ thời gian chạy trong khi "xác nhận kiểu" hoàn toàn là một cấu trúc thời gian biên dịch và là một cách để bạn cung cấp gợi ý cho trình biên dịch về cách bạn muốn mã của mình được phân tích.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

"use strict";
var str = '1';
var str2 = str; //str is now of type number 
console.log(typeof (str2));

Nó sẽ tạo ra kết quả sau:

string

Nhập suy ra trong TypeScript

Thực tế là, Typecript được nhập mạnh, tính năng này là tùy chọn. TypeScript cũng khuyến khích nhập biến động. Điều này có nghĩa là, TypeScript khuyến khích khai báo một biến mà không có kiểu. Trong những trường hợp như vậy, trình biên dịch sẽ xác định kiểu của biến trên cơ sở giá trị được gán cho nó. TypeScript sẽ tìm cách sử dụng đầu tiên của biến trong mã, xác định kiểu mà nó đã được đặt ban đầu và sau đó giả sử cùng một kiểu cho biến này trong phần còn lại của khối mã của bạn.

Điều tương tự được giải thích trong đoạn mã sau:

Ví dụ: Nhập theo suy luận

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

Trong đoạn mã trên -

• Đoạn mã khai báo một biến và đặt giá trị của nó là 2. Lưu ý rằng khai báo biến không chỉ định kiểu dữ liệu. Do đó, chương trình sử dụng kiểu nhập suy luận để xác định kiểu dữ liệu của biến, tức là, nó chỉ định kiểu của giá trị đầu tiên mà biến được đặt. Trong trường hợp này,num được đặt thành số loại.

• Khi mã cố gắng đặt giá trị của biến thành chuỗi. Trình biên dịch ném một lỗi vì kiểu của biến đã được đặt thành số.

Nó sẽ tạo ra kết quả sau:

error TS2011: Cannot convert 'string' to 'number'.

Phạm vi biến TypeScript

Phạm vi của một biến chỉ định nơi mà biến được xác định. Tính khả dụng của một biến trong chương trình được xác định bởi phạm vi của nó. Các biến TypeScript có thể thuộc các phạm vi sau:

• Global Scope- Các biến toàn cục được khai báo bên ngoài các cấu trúc lập trình. Các biến này có thể được truy cập từ bất kỳ đâu trong mã của bạn.

• Class Scope - Các biến này còn được gọi là fields. Các trường hoặc biến lớp được khai báo bên trong lớp nhưng bên ngoài các phương thức. Các biến này có thể được truy cập bằng cách sử dụng đối tượng của lớp. Các trường cũng có thể là tĩnh. Các trường tĩnh có thể được truy cập bằng cách sử dụng tên lớp.

• Local Scope - Các biến cục bộ, như tên cho thấy, được khai báo trong các cấu trúc như phương thức, vòng lặp, v.v. Các biến cục bộ chỉ có thể truy cập được trong cấu trúc nơi chúng được khai báo.

Ví dụ sau minh họa các phạm vi biến trong TypeScript.

Ví dụ: Phạm vi biến

var global_num = 12          //global variable 
class Numbers { 
   num_val = 13;             //class variable 
   static sval = 10;         //static field 
   
   storeNum():void { 
      var local_num = 14;    //local variable 
   } 
} 
console.log("Global num: "+global_num)  
console.log(Numbers.sval)   //static variable  
var obj = new Numbers(); 
console.log("Global num: "+obj.num_val)

Khi chuyển đổi, mã JavaScript sau được tạo:

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

Nó sẽ tạo ra kết quả sau:

Global num: 12
10
Global num: 13

Nếu bạn cố gắng truy cập biến cục bộ bên ngoài phương thức, nó sẽ dẫn đến lỗi biên dịch.

error TS2095: Could not find symbol 'local_num'.

Nhà điều hành là gì?

Một toán tử xác định một số chức năng sẽ được thực hiện trên dữ liệu. Dữ liệu mà các toán tử làm việc được gọi là toán hạng. Hãy xem xét biểu thức sau:

7 + 5 = 12

Ở đây, các giá trị 7, 5 và 12 là operands, trong khi + và = là operators.

Các toán tử chính trong TypeScript có thể được phân loại là:

• Toán tử số học
• Toán tử logic
• Toán tử quan hệ
• Toán tử bitwise
• Toán tử chuyển nhượng
• Toán tử bậc ba / có điều kiện
• Toán tử chuỗi
• Loại toán tử

Toán tử số học

Giả sử các giá trị trong biến a và b lần lượt là 10 và 5.

Hiển thị các ví dụ

Nhà điều hành	Sự miêu tả	Thí dụ
+ (Bổ sung)	trả về tổng của các toán hạng	a + b là 15
- (Phép trừ)	trả về sự khác biệt của các giá trị	a - b là 5
* (Phép nhân)	trả về sản phẩm của các giá trị	a * b là 50
/ (Bộ phận)	thực hiện phép toán chia và trả về thương số	a / b là 2
% (Mô-đun)	thực hiện phép toán chia và trả về phần còn lại	a% b là 0
++ (Tăng dần)	Tăng giá trị của biến lên một	a ++ là 11
- (Giảm dần)	Giảm giá trị của biến đi một	a-- là 9

Toán tử quan hệ

Toán tử quan hệ kiểm tra hoặc xác định kiểu quan hệ giữa hai thực thể. Toán tử quan hệ trả về một giá trị Boolean, nghĩa là true / false.

Giả sử giá trị của A là 10 và B là 20.

Hiển thị các ví dụ

Nhà điều hành	Sự miêu tả	Thí dụ
>	Lớn hơn	(A> B) là Sai
<	Ít hơn	(A <B) là True
> =	Lớn hơn hoặc bằng	(A> = B) là Sai
<=	Nhỏ hơn hoặc bằng	(A <= B) là True
==	Bình đẳng	(A == B) sai
! =	Không công bằng	(A! = B) là True

Toán tử logic

Toán tử lôgic được sử dụng để kết hợp hai hoặc nhiều điều kiện. Các toán tử logic cũng trả về giá trị Boolean. Giả sử giá trị của biến A là 10 và B là 20.

Hiển thị các ví dụ

Nhà điều hành	Sự miêu tả	Thí dụ
&& (Và)	Toán tử chỉ trả về true nếu tất cả các biểu thức được chỉ định trả về true	(A> 10 && B> 10) là Sai
|| (HOẶC LÀ)	Toán tử trả về true nếu ít nhất một trong các biểu thức được chỉ định trả về true	(A> 10 || B> 10) là True
! (KHÔNG PHẢI)	Toán tử trả về nghịch đảo của kết quả của biểu thức. Ví dụ:! (> 5) trả về false	! (A> 10) là Đúng

Toán tử Bitwise

Giả sử biến A = 2 và B = 3

Hiển thị các ví dụ

Nhà điều hành	Sự miêu tả	Thí dụ
& (Bitwise AND)	Nó thực hiện phép toán Boolean AND trên mỗi bit của các đối số nguyên của nó.	(A & B) là 2
| (BitWise HOẶC)	Nó thực hiện phép toán Boolean OR trên mỗi bit của các đối số nguyên của nó.	(A | B) là 3
^ (Bitwise XOR)	Nó thực hiện phép toán HOẶC độc quyền Boolean trên mỗi bit của các đối số nguyên của nó. HOẶC độc quyền có nghĩa là toán hạng một là đúng hoặc toán hạng hai là đúng, nhưng không phải cả hai.	(A ^ B) là 1
~ (Bitwise Không)	Nó là một toán tử một ngôi và hoạt động bằng cách đảo ngược tất cả các bit trong toán hạng.	(~ B) là -4
<< (Dịch sang trái)	Nó di chuyển tất cả các bit trong toán hạng đầu tiên sang trái theo số vị trí được chỉ định trong toán hạng thứ hai. Các bit mới được lấp đầy bởi các số không. Chuyển một giá trị sang trái một vị trí tương đương với nhân nó với 2, dịch chuyển hai vị trí tương đương với nhân 4, v.v.	(A << 1) là 4
>> (Chuyển sang phải)	Toán tử Shift phải nhị phân. Giá trị của toán hạng bên trái được di chuyển sang phải bằng số bit được chỉ định bởi toán hạng bên phải.	(A >> 1) là 1
>>> (Sang phải với Zero)	Toán tử này cũng giống như toán tử >>, ngoại trừ việc các bit được chuyển sang bên trái luôn bằng không.	(A >>> 1) là 1

Người điều hành nhiệm vụ

Hiển thị các ví dụ

Nhà điều hành	Sự miêu tả	Thí dụ
= (Bài tập đơn giản)	Gán các giá trị từ toán hạng bên phải cho toán hạng bên trái	C = A + B sẽ gán giá trị của A + B vào C
+ = (Thêm và chuyển nhượng)	Nó thêm toán hạng bên phải vào toán hạng bên trái và gán kết quả cho toán hạng bên trái.	C + = A tương đương với C = C + A
- = (Trừ và gán)	Nó trừ toán hạng bên phải khỏi toán hạng bên trái và gán kết quả cho toán hạng bên trái.	C - = A tương đương với C = C - A
* = (Nhân và gán)	Nó nhân toán hạng bên phải với toán hạng bên trái và gán kết quả cho toán hạng bên trái.	C * = A tương đương với C = C * A
/ = (Phân chia và Phân công)	Nó chia toán hạng bên trái với toán hạng bên phải và gán kết quả cho toán hạng bên trái.

Note - Logic tương tự áp dụng cho các toán tử Bitwise, vì vậy chúng sẽ trở thành << =, >> =, >> =, & =, | = và ^ =.

Các nhà khai thác khác

Toán tử phủ định (-)

Thay đổi dấu hiệu của một giá trị. Hãy lấy một ví dụ.

var x:number = 4 
var y = -x; 
console.log("value of x: ",x);   //outputs 4 
console.log("value of y: ",y);   //outputs -4

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var x = 4;
var y = -x;
console.log("value of x: ", x);   //outputs 4
console.log("value of y: ", y);   //outputs -4

Nó sẽ tạo ra kết quả sau:

value of x:  4 
value of y:  -4

Toán tử chuỗi: Toán tử nối (+)

Toán tử + khi được áp dụng cho chuỗi sẽ nối chuỗi thứ hai với chuỗi thứ nhất. Ví dụ sau đây giúp chúng ta hiểu khái niệm này.

var msg:string = "hello"+"world" 
console.log(msg)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var msg = "hello" + "world";
console.log(msg);

Nó sẽ tạo ra kết quả sau:

helloworld

Thao tác nối không thêm khoảng cách giữa các chuỗi. Nhiều chuỗi có thể được nối trong một câu lệnh.

Điều hành có điều kiện (?)

Toán tử này được sử dụng để biểu diễn một biểu thức điều kiện. Toán tử điều kiện đôi khi cũng được gọi là toán tử bậc ba. Cú pháp như dưới đây:

Test ? expr1 : expr2

• Test - đề cập đến biểu thức điều kiện

• expr1 - giá trị được trả về nếu điều kiện là đúng

• expr2 - giá trị trả về nếu điều kiện sai

Hãy xem đoạn mã sau:

var num:number = -2 
var result = num > 0 ?"positive":"non-positive" 
console.log(result)

Dòng 2 kiểm tra xem giá trị trong biến numlớn hơn 0. Nếunum được đặt thành giá trị lớn hơn 0, nó trả về chuỗi "dương", còn chuỗi "không dương" được trả về.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var num = -2;
var result = num > 0 ? "positive" : "non-positive";
console.log(result);

Đoạn mã trên sẽ tạo ra kết quả sau:

non-positive

Loại toán tử

toán tử typeof

Nó là một toán tử một ngôi. Toán tử này trả về kiểu dữ liệu của toán hạng. Hãy xem ví dụ sau:

var num = 12 
console.log(typeof num);   //output: number

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var num = 12;
console.log(typeof num);   //output: number

Nó sẽ tạo ra kết quả sau:

number

ví dụ

Toán tử này có thể được sử dụng để kiểm tra xem một đối tượng có thuộc loại được chỉ định hay không. Việc sử dụnginstanceof toán tử được thảo luận trong chương classes.

Cấu trúc ra quyết định yêu cầu người lập trình chỉ định một hoặc nhiều điều kiện để được đánh giá hoặc kiểm tra bởi chương trình, cùng với một câu lệnh hoặc các câu lệnh sẽ được thực thi nếu điều kiện đó được xác định là đúng và tùy chọn, các câu lệnh khác sẽ được thực thi nếu điều kiện được xác định là sai.

Dưới đây là hình thức chung của cấu trúc ra quyết định điển hình được tìm thấy trong hầu hết các ngôn ngữ lập trình -

Một cấu trúc ra quyết định đánh giá một điều kiện trước khi các lệnh được thực thi. Các cấu trúc ra quyết định trong TypeScript được phân loại như sau:

Không.	Tuyên bố & Mô tả
1.	câu lệnh if Câu lệnh 'if' bao gồm một biểu thức Boolean theo sau là một hoặc nhiều câu lệnh.
2.	câu lệnh if ... else Câu lệnh 'if' có thể được theo sau bởi một câu lệnh 'else' tùy chọn, thực thi khi biểu thức Boolean sai.
3.	else… if và các câu lệnh if lồng nhau Bạn có thể sử dụng một câu lệnh 'if' hoặc 'else if' bên trong (các) câu lệnh 'if' hoặc 'else if' khác.
4.	chuyển đổi tuyên bố Câu lệnh 'switch' cho phép một biến được kiểm tra dựa trên danh sách các giá trị.

Bạn có thể gặp phải các tình huống, khi một khối mã cần được thực thi nhiều lần. Nói chung, các câu lệnh được thực hiện tuần tự: Câu lệnh đầu tiên trong một hàm được thực hiện đầu tiên, tiếp theo là câu lệnh thứ hai, v.v.

Các ngôn ngữ lập trình cung cấp các cấu trúc điều khiển khác nhau cho phép các đường dẫn thực thi phức tạp hơn.

Một câu lệnh lặp cho phép chúng ta thực hiện một câu lệnh hoặc một nhóm câu lệnh nhiều lần. Dưới đây là dạng chung của câu lệnh lặp trong hầu hết các ngôn ngữ lập trình.

TypeScript cung cấp các loại vòng lặp khác nhau để xử lý các yêu cầu về vòng lặp. Hình sau minh họa sự phân loại của các vòng lặp:

Vòng lặp xác định

Một vòng lặp có số lần lặp là xác định / cố định được gọi là definite loop. Các vòng lặp for là một thực hiện một vòng lặp xác định.

Không.	Vòng lặp & Mô tả
1.	vòng lặp for Vòng lặp for là sự triển khai của một vòng lặp xác định.

Vòng lặp vô thời hạn

Vòng lặp không xác định được sử dụng khi số lần lặp trong vòng lặp là không xác định hoặc không xác định.

Các vòng lặp không giới hạn có thể được thực hiện bằng cách sử dụng -

S.Không	Vòng lặp & Mô tả
1.	trong khi lặp lại Vòng lặp while thực hiện các lệnh mỗi khi điều kiện được chỉ định đánh giá là true.
2.	làm trong khi Vòng lặp do… while tương tự như vòng lặp while ngoại trừ vòng lặp do… while không đánh giá điều kiện lần đầu tiên vòng lặp thực thi.

Ví dụ: while so với do..ared

var n:number = 5 
while(n > 5) { 
   console.log("Entered while") 
} 
do { 
   console.log("Entered do…while") 
} 
while(n>5)

Ví dụ ban đầu khai báo một vòng lặp while. Vòng lặp chỉ được nhập nếu biểu thức được chuyển tới while đánh giá là true. Trong ví dụ này, giá trị của n không lớn hơn 0, do đó biểu thức trả về false và vòng lặp bị bỏ qua.

Mặt khác, vòng lặp do… while thực hiện câu lệnh một lần. Điều này là do lần lặp ban đầu không xem xét biểu thức Boolean. Tuy nhiên, đối với lần lặp tiếp theo, while sẽ kiểm tra điều kiện và đưa điều khiển ra khỏi vòng lặp.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var n = 5;
while (n > 5) {
   console.log("Entered while");
}

do {
   console.log("Entered do…while");
} while (n > 5);

Đoạn mã trên sẽ tạo ra kết quả sau:

Entered do…while

Tuyên bố nghỉ

Các breakcâu lệnh được sử dụng để lấy điều khiển ra khỏi một cấu trúc. Sử dụngbreaktrong một vòng lặp khiến chương trình thoát khỏi vòng lặp. Cú pháp của nó như sau:

Cú pháp

break

Sơ đồ dòng chảy

Thí dụ

Bây giờ, hãy xem đoạn mã ví dụ sau:

var i:number = 1 
while(i<=10) { 
   if (i % 5 == 0) {   
      console.log ("The first multiple of 5  between 1 and 10 is : "+i) 
      break     //exit the loop if the first multiple is found 
   } 
   i++ 
}  //outputs 5 and exits the loop

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var i = 1;

while (i <= 10) {
   if (i % 5 == 0) {
      console.log("The first multiple of 5  between 1 and 10 is : " + i);
      break; //exit the loop if the first multiple is found
   }
   i++;
} //outputs 5 and exits the loop

Nó sẽ tạo ra kết quả sau:

The first multiple of 5  between 1 and 10 is : 5

Tuyên bố tiếp tục

Các continuecâu lệnh bỏ qua các câu lệnh tiếp theo trong vòng lặp hiện tại và đưa điều khiển trở lại phần đầu của vòng lặp. Không giống như câu lệnh break, continue không thoát khỏi vòng lặp. Nó kết thúc lần lặp hiện tại và bắt đầu lần lặp tiếp theo.

Cú pháp

continue

Sơ đồ

Thí dụ

Dưới đây là một ví dụ về câu lệnh continue:

var num:number = 0
var count:number = 0;

for(num=0;num<=20;num++) {
   if (num % 2==0) {
      continue
   }
   count++
}
console.log (" The count of odd values between 0 and 20 is: "+count)    //outputs 10

Ví dụ trên hiển thị số lượng giá trị chẵn từ 0 đến 20. Vòng lặp thoát khỏi vòng lặp hiện tại nếu số đó là số chẵn. Điều này đạt được bằng cách sử dụngcontinue tuyên bố.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var num = 0;
var count = 0;

for (num = 0; num <= 20; num++) {
   if (num % 2 == 0) {
      continue;
   }
   count++;
}
console.log(" The count of odd values between 0 and 20 is: " + count);     //outputs 10

Đầu ra

The count of odd values between 0 and 20 is: 10

Vòng lặp vô hạn

Vòng lặp vô hạn là một vòng lặp chạy không ngừng. Cácfor vòng lặp và while loop có thể được sử dụng để tạo một vòng lặp vô tận.

Cú pháp: Infinite Loop sử dụng vòng lặp for

for(;;) { 
   //statements 
}

Ví dụ: Vòng lặp vô hạn sử dụng vòng lặp for

for(;;) { 
   console.log(“This is an endless loop”) 
}

Cú pháp: Vòng lặp vô hạn sử dụng vòng lặp while

while(true) { 
   //statements 
}

Ví dụ: Vòng lặp vô hạn sử dụng vòng lặp while

while(true) { 
   console.log(“This is an endless loop”) 
}

Các hàm là các khối xây dựng của mã có thể đọc được, có thể bảo trì và có thể tái sử dụng. Hàm là một tập hợp các câu lệnh để thực hiện một nhiệm vụ cụ thể. Các hàm tổ chức chương trình thành các khối mã logic. Sau khi được xác định, các hàm có thể được gọi để truy cập mã. Điều này làm cho mã có thể được sử dụng lại. Hơn nữa, các hàm giúp bạn dễ dàng đọc và duy trì mã của chương trình.

Một khai báo hàm cho trình biên dịch biết về tên, kiểu trả về và các tham số của hàm. Một định nghĩa hàm cung cấp nội dung thực tế của hàm.

Sr.No	Funtions & Description
1.	Xác định một chức năng Một định nghĩa hàm xác định những gì và cách thức một nhiệm vụ cụ thể sẽ được thực hiện.
2.	Gọi một hàm Một hàm phải được gọi để thực thi nó.
3.	Trả lại các chức năng Các hàm cũng có thể trả về giá trị cùng với điều khiển, quay lại người gọi.
4.	Chức năng được tham số hóa Tham số là một cơ chế để truyền giá trị cho các hàm.

Các thông số tùy chọn

Các tham số tùy chọn có thể được sử dụng khi các đối số không cần được truyền bắt buộc để thực thi một hàm. Một tham số có thể được đánh dấu tùy chọn bằng cách thêm dấu chấm hỏi vào tên của nó. Tham số tùy chọn phải được đặt làm đối số cuối cùng trong một hàm. Cú pháp để khai báo một hàm với tham số tùy chọn như sau:

function function_name (param1[:type], param2[:type], param3[:type])

Ví dụ: Tham số tùy chọn

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","[email protected]");

• Ví dụ trên khai báo một hàm được tham số hóa. Ở đây, tham số thứ ba, tức là, mail_id là một tham số tùy chọn.

• Nếu một tham số tùy chọn không được chuyển một giá trị trong khi gọi hàm, giá trị của tham số được đặt thành không xác định.

• Hàm in ra giá trị của mail_id chỉ khi đối số được truyền vào một giá trị.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "[email protected]");

Đoạn mã trên sẽ tạo ra kết quả sau:

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

Tham số còn lại

Tham số phần còn lại tương tự như đối số biến trong Java. Các tham số còn lại không hạn chế số lượng giá trị mà bạn có thể chuyển cho một hàm. Tuy nhiên, tất cả các giá trị được truyền phải cùng loại. Nói cách khác, tham số phần còn lại hoạt động như trình giữ chỗ cho nhiều đối số cùng loại.

Để khai báo một tham số nghỉ, tên tham số được bắt đầu bằng ba dấu chấm. Bất kỳ tham số nonrest nào phải đến trước tham số còn lại.

Ví dụ: Tham số còn lại

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

• Khai báo hàm addNumbers (), chấp nhận một tham số còn lại là nums . Kiểu dữ liệu của tham số còn lại phải được đặt thành một mảng. Hơn nữa, một hàm có thể có nhiều nhất một tham số nghỉ.

• Hàm được gọi hai lần, bằng cách chuyển ba và sáu giá trị tương ứng.

• Vòng lặp for lặp qua danh sách đối số, được chuyển đến hàm và tính tổng của chúng.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

Đầu ra của đoạn mã trên như sau:

sum of numbers 6 
sum of numbers 50

Tham số mặc định

Các tham số hàm cũng có thể được gán giá trị theo mặc định. Tuy nhiên, các tham số như vậy cũng có thể là các giá trị được truyền rõ ràng.

Cú pháp

function function_name(param1[:type],param2[:type] = default_value) { 
}

Note - Một tham số không thể được khai báo tùy chọn và mặc định cùng một lúc.

Ví dụ: Tham số mặc định

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

Đầu ra của nó như sau:

Discount amount : 500 
Discount amount : 300

• Ví dụ khai báo hàm, tính_đĩa . Hàm có hai tham số - giá và tỷ lệ.

• Giá trị của tỷ lệ tham số được đặt thành 0,50 theo mặc định.

• Chương trình gọi hàm, chỉ truyền cho nó giá trị của tham số. Ở đây, giá trị của tỷ lệ là 0,50 (mặc định)

• Cùng một hàm được gọi, nhưng với hai đối số. Giá trị mặc định của tỷ lệ bị ghi đè và được đặt thành giá trị được truyền rõ ràng.

Chức năng ẩn danh

Các hàm không bị ràng buộc với một định danh (tên hàm) được gọi là anonymous functions. Các hàm này được khai báo động trong thời gian chạy. Các hàm ẩn danh có thể chấp nhận đầu vào và trả về đầu ra, giống như các hàm tiêu chuẩn. Một chức năng ẩn danh thường không thể truy cập được sau khi tạo lần đầu.

Các biến có thể được gán một chức năng ẩn danh. Biểu thức như vậy được gọi là biểu thức hàm.

Cú pháp

var res = function( [arguments] ) { ... }

Ví dụ ─ Một hàm Ẩn danh Đơn giản

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Nó sẽ tạo ra kết quả sau:

hello world

Ví dụ ─ Hàm ẩn danh với các tham số

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

Hàm ẩn danh trả về sản phẩm của các giá trị được chuyển cho nó.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

Đầu ra của đoạn mã trên như sau:

24

Biểu thức hàm và Khai báo hàm ─ Chúng có đồng nghĩa với nhau không?

Biểu thức hàm và khai báo hàm không đồng nghĩa. Không giống như một biểu thức hàm, một khai báo hàm được ràng buộc bởi tên hàm.

Sự khác biệt cơ bản giữa cả hai là, các khai báo hàm được phân tích cú pháp trước khi thực thi chúng. Mặt khác, các biểu thức hàm chỉ được phân tích cú pháp khi công cụ tập lệnh gặp nó trong quá trình thực thi.

Khi trình phân tích cú pháp JavaScript nhìn thấy một hàm trong dòng mã chính, nó sẽ giả định là Khai báo Hàm. Khi một hàm xuất hiện như một phần của câu lệnh, nó là một Biểu thức Hàm.

Hàm tạo hàm

TypeScript cũng hỗ trợ định nghĩa một hàm với hàm tạo JavaScript được tích hợp sẵn có tên là Function ().

Cú pháp

var res = new Function( [arguments] ) { ... }.

Thí dụ

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

Hàm mới () là một lệnh gọi đến hàm tạo, đến lượt nó sẽ tạo và trả về một tham chiếu hàm.

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của mã ví dụ trên như sau:

12

Các hàm đệ quy và TypeScript

Đệ quy là một kỹ thuật để lặp lại một hoạt động bằng cách gọi một hàm đến chính nó lặp đi lặp lại cho đến khi nó đi đến kết quả. Đệ quy được áp dụng tốt nhất khi bạn cần gọi nhiều lần cùng một hàm với các tham số khác nhau từ trong một vòng lặp.

Ví dụ - Đệ quy

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đây là đầu ra của nó -

720

Ví dụ: Hàm đệ quy ẩn danh

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của nó như sau:

Hello!!

Các hàm Lambda

Lambda đề cập đến các hàm ẩn danh trong lập trình. Các hàm Lambda là một cơ chế ngắn gọn để biểu diễn các hàm ẩn danh. Các chức năng này còn được gọi làArrow functions.

Chức năng Lambda - Giải phẫu

Có 3 phần đối với một hàm Lambda -

• Parameters - Một chức năng có thể có các tham số tùy chọn

• The fat arrow notation/lambda notation (=>) - Nó còn được gọi là toán tử đi tới

• Statements - đại diện cho tập lệnh của hàm

Tip - Theo quy ước, việc sử dụng tham số ký tự đơn được khuyến khích để khai báo hàm chính xác và gọn nhẹ.

Lambda Expression

Nó là một biểu thức hàm ẩn danh trỏ đến một dòng mã. Cú pháp của nó như sau:

( [param1, parma2,…param n] )=>statement;

Ví dụ: Lambda Expression

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

Chương trình khai báo một hàm biểu thức lambda. Hàm trả về tổng của 10 và đối số được truyền vào.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

Đây là đầu ra của đoạn mã trên -

110

Tuyên bố Lambda

Câu lệnh Lambda là một khai báo hàm ẩn danh trỏ đến một khối mã. Cú pháp này được sử dụng khi nội dung hàm kéo dài nhiều dòng. Cú pháp của nó như sau:

( [param1, parma2,…param n] )=> {
 
   //code block
}

Ví dụ: câu lệnh Lambda

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

Tham chiếu của hàm được trả về và lưu trữ trong biến foo.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

Kết quả của chương trình trên như sau:

110

Các biến thể cú pháp

Loại tham số Suy luận

Không bắt buộc phải chỉ định kiểu dữ liệu của một tham số. Trong trường hợp này, kiểu dữ liệu của tham số là bất kỳ. Chúng ta hãy xem đoạn mã sau:

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

Đầu ra của nó như sau:

12 is numeric 
Tom is a string

Dấu ngoặc đơn tùy chọn cho một tham số

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

Đầu ra của nó như sau:

The function got 12

Dấu ngoặc nhọn tùy chọn cho một câu lệnh duy nhất, Dấu ngoặc đơn trống cho không có tham số

Ví dụ sau đây cho thấy hai biến thể Cú pháp này.

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

Đầu ra của nó như sau:

Function invoked

Quá tải chức năng

Các chức năng có khả năng hoạt động khác nhau trên cơ sở đầu vào được cung cấp cho chúng. Nói cách khác, một chương trình có thể có nhiều phương thức trùng tên với cách triển khai khác nhau. Cơ chế này được gọi là Chức năng Quá tải. TypeScript cung cấp hỗ trợ cho việc nạp chồng hàm.

Để quá tải một hàm trong TypeScript, bạn cần làm theo các bước được cung cấp bên dưới:

Step 1- Khai báo nhiều hàm trùng tên nhưng khác chữ ký hàm. Chữ ký hàm bao gồm những điều sau đây.

• The data type of the parameter

function disp(string):void; 
function disp(number):void;

• The number of parameters

function disp(n1:number):void; 
function disp(x:number,y:number):void;

• The sequence of parameters

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Note - Chữ ký của hàm không bao gồm kiểu trả về của hàm.

Step 2- Phần khai báo phải được theo sau bởi định nghĩa hàm. Các loại tham số phải được đặt thànhanynếu các loại tham số khác nhau trong quá trình quá tải. Ngoài ra, chocase b đã giải thích ở trên, bạn có thể xem xét việc đánh dấu một hoặc nhiều tham số là tùy chọn trong quá trình định nghĩa hàm.

Step 3 - Cuối cùng, bạn phải gọi hàm để làm cho nó hoạt động.

Thí dụ

Bây giờ chúng ta hãy xem đoạn mã ví dụ sau:

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

• Hai dòng đầu tiên mô tả khai báo quá tải hàm. Hàm có hai quá tải -

  • Hàm chấp nhận một tham số chuỗi đơn.

  • Hàm chấp nhận hai giá trị của kiểu số và chuỗi tương ứng.

• Dòng thứ ba xác định hàm. Kiểu dữ liệu của các tham số được đặt thànhany. Hơn nữa, tham số thứ hai là tùy chọn ở đây.

• Hàm nạp chồng được gọi bởi hai câu lệnh cuối cùng.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

Đoạn mã trên sẽ tạo ra kết quả sau:

abc 
1 
xyz

TypeScript như JavaScript hỗ trợ các giá trị số dưới dạng các đối tượng Số. Một đối tượng số chuyển đổi chữ số thành một thể hiện của lớp số. Lớp Number hoạt động như một trình bao bọc và cho phép thao tác với các ký tự số khi chúng là các đối tượng.

Cú pháp

var var_name = new Number(value)

Trong trường hợp đối số không phải là số được truyền dưới dạng đối số cho hàm tạo của Số, nó sẽ trả về NaN (Không phải – a – Số)

Bảng sau liệt kê một tập hợp các thuộc tính của đối tượng Number:

Không.	Kê khai tài sản
1.	MAX_VALUE Giá trị lớn nhất có thể mà một số trong JavaScript có thể có là 1.7976931348623157E + 308.
2.	MIN_VALUE Giá trị nhỏ nhất có thể của một số trong JavaScript có thể có 5E-324.
3.	NaN Bằng một giá trị không phải là số.
4.	NEGATIVE_INFINITY Giá trị nhỏ hơn MIN_VALUE.
5.	POSITIVE_INFINITY Giá trị lớn hơn MAX_VALUE.
6.	prototype Thuộc tính tĩnh của đối tượng Number. Sử dụng thuộc tính nguyên mẫu để gán các thuộc tính và phương thức mới cho đối tượng Number trong tài liệu hiện tại.
7.	constructor Trả về hàm đã tạo phiên bản của đối tượng này. Theo mặc định, đây là đối tượng Number.

Thí dụ

console.log("TypeScript Number Properties: "); 
console.log("Maximum value that a number variable can hold: " + Number.MAX_VALUE); 
console.log("The least value that a number variable can hold: " + Number.MIN_VALUE); 
console.log("Value of Negative Infinity: " + Number.NEGATIVE_INFINITY); 
console.log("Value of Negative Infinity:" + Number.POSITIVE_INFINITY);

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của nó như sau:

TypeScript Number Properties:  
Maximum value that a number variable can hold: 1.7976931348623157e+308 
The least value that a number variable can hold: 5e-324 
Value of Negative Infinity: -Infinity 
Value of Negative Infinity:Infinity

Ví dụ: NaN

var month = 0 
if( month<=0 || month >12) { 
   month = Number.NaN 
   console.log("Month is "+ month) 
} else { 
   console.log("Value Accepted..") 
}

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của nó như sau:

Month is NaN

Ví dụ: prototye

function employee(id:number,name:string) { 
   this.id = id 
   this.name = name 
} 

var emp = new employee(123,"Smith") 
employee.prototype.email = "[email protected]" 

console.log("Employee 's Id: "+emp.id) 
console.log("Employee's name: "+emp.name) 
console.log("Employee's Email ID: "+emp.email)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
function employee(id, name) {
   this.id = id;
   this.name = name;
}

var emp = new employee(123, "Smith");
employee.prototype.email = "[email protected]";

console.log("Employee 's Id: " + emp.id);
console.log("Employee's name: " + emp.name);
console.log("Employee's Email ID: " + emp.email);

Đầu ra của nó như sau:

Employee’s Id: 123 
Emaployee’s name: Smith 
Employee’s Email ID: [email protected]

Phương pháp số

Đối tượng Number chỉ chứa các phương thức mặc định là một phần của định nghĩa đối tượng. Một số phương pháp thường được sử dụng được liệt kê dưới đây:

Không.	Phương pháp & Mô tả
1.	toExponential () Buộc một số hiển thị trong ký hiệu hàm mũ, ngay cả khi số đó nằm trong phạm vi mà JavaScript thường sử dụng ký hiệu chuẩn.
2.	toFixed () Định dạng một số với một số chữ số cụ thể ở bên phải của số thập phân.
3.	toLocaleString () Trả về phiên bản giá trị chuỗi của số hiện tại ở định dạng có thể thay đổi tùy theo cài đặt cục bộ của trình duyệt.
4.	toPre precision () Xác định tổng số chữ số (bao gồm các chữ số ở bên trái và bên phải của số thập phân) để hiển thị một số. Một độ chính xác âm sẽ tạo ra một lỗi.
5.	toString () Trả về biểu diễn chuỗi của giá trị của số. Hàm được chuyển sang cơ số, một số nguyên từ 2 đến 36 xác định cơ sở để sử dụng để biểu diễn các giá trị số.
6.	giá trị của() Trả về giá trị ban đầu của số.

Đối tượng Chuỗi cho phép bạn làm việc với một loạt ký tự. Nó bao bọc kiểu dữ liệu nguyên thủy của chuỗi với một số phương thức trợ giúp.

Cú pháp

var var_name = new String(string);

Dưới đây là danh sách các phương thức có sẵn trong đối tượng String cùng với mô tả của chúng:

Không.	Kê khai tài sản
1.	Constructor Trả về một tham chiếu đến hàm String đã tạo đối tượng.
2.	Chiều dài Trả về độ dài của chuỗi.
3.	Nguyên mẫu Thuộc tính nguyên mẫu cho phép bạn thêm thuộc tính và phương thức vào một đối tượng.

Phương thức chuỗi

Dưới đây là danh sách các phương thức có sẵn trong đối tượng String cùng với mô tả của chúng:

Không.	Phương pháp & Mô tả
1.	charAt () Trả về ký tự tại chỉ mục được chỉ định.
2.	charCodeAt () Trả về một số cho biết giá trị Unicode của ký tự tại chỉ mục đã cho.
3.	concat () Kết hợp văn bản của hai chuỗi và trả về một chuỗi mới.
4.	Chỉ số() Trả về chỉ mục trong đối tượng Chuỗi đang gọi của lần xuất hiện đầu tiên của giá trị được chỉ định hoặc -1 nếu không tìm thấy.
5.	lastIndexOf () Trả về chỉ mục trong đối tượng Chuỗi đang gọi của lần xuất hiện cuối cùng của giá trị được chỉ định hoặc -1 nếu không tìm thấy.
6.	localeCompare () Trả về một số cho biết một chuỗi tham chiếu đến trước hay sau hoặc giống với chuỗi đã cho theo thứ tự sắp xếp.
7.	match() Được sử dụng để so khớp một biểu thức chính quy với một chuỗi.
số 8.	thay thế() Được sử dụng để tìm một kết quả phù hợp giữa một biểu thức chính quy và một chuỗi và để thay thế chuỗi con đã so khớp bằng một chuỗi con mới.
9.	Tìm kiếm() Thực hiện tìm kiếm đối sánh giữa một biểu thức chính quy và một chuỗi được chỉ định.
10.	lát () Trích xuất một phần của chuỗi và trả về một chuỗi mới.
11.	tách () Tách một đối tượng Chuỗi thành một mảng chuỗi bằng cách tách chuỗi thành các chuỗi con.
12.	substr () Trả về các ký tự trong một chuỗi bắt đầu tại vị trí đã chỉ định thông qua số ký tự đã chỉ định.
13.	chuỗi con () Trả về các ký tự trong một chuỗi giữa hai chỉ mục vào chuỗi.
14.	toLocaleLowerCase () Các ký tự trong một chuỗi được chuyển đổi thành chữ thường trong khi vẫn tôn trọng ngôn ngữ hiện tại.
15.	toLocaleUpperCase () Các ký tự trong một chuỗi được chuyển đổi thành chữ hoa đồng thời tôn trọng ngôn ngữ hiện tại.
16.	toLowerCase () Trả về giá trị chuỗi đang gọi được chuyển đổi thành chữ thường.
17.	toString () Trả về một chuỗi đại diện cho đối tượng được chỉ định.
18.	Đến trường hợp trên() Trả về giá trị chuỗi đang gọi được chuyển đổi thành chữ hoa.
19.	giá trị của() Trả về giá trị ban đầu của đối tượng được chỉ định.

Việc sử dụng các biến để lưu trữ giá trị gây ra những hạn chế sau:

• Các biến có bản chất vô hướng. Nói cách khác, một khai báo biến chỉ có thể chứa một biến duy nhất tại một thời điểm. Điều này có nghĩa là để lưu trữ n giá trị trong một chương trình, cần khai báo n biến. Do đó, việc sử dụng các biến là không khả thi khi một người cần lưu trữ một bộ sưu tập giá trị lớn hơn.

• Các biến trong chương trình được cấp phát bộ nhớ theo thứ tự ngẫu nhiên, do đó gây khó khăn cho việc truy xuất / đọc các giá trị theo thứ tự khai báo của chúng.

TypeScript giới thiệu khái niệm mảng để giải quyết giống nhau. Mảng là một tập hợp các giá trị đồng nhất. Để đơn giản hóa, mảng là một tập hợp các giá trị của cùng một kiểu dữ liệu. Nó là một kiểu người dùng xác định.

Các tính năng của một mảng

Đây là danh sách các tính năng của một mảng:

• Khai báo mảng cấp phát các khối bộ nhớ tuần tự.

• Mảng là tĩnh. Điều này có nghĩa là một mảng sau khi được khởi tạo sẽ không thể thay đổi kích thước.

• Mỗi khối bộ nhớ đại diện cho một phần tử mảng.

• Các phần tử của mảng được xác định bởi một số nguyên duy nhất được gọi là chỉ số con / chỉ mục của phần tử.

• Giống như các biến, mảng cũng vậy, nên được khai báo trước khi chúng được sử dụng. Sử dụng từ khóa var để khai báo một mảng.

• Khởi tạo mảng đề cập đến việc điền các phần tử của mảng.

• Các giá trị phần tử mảng có thể được cập nhật hoặc sửa đổi nhưng không thể bị xóa.

Khai báo và Khởi tạo Mảng

Để khai báo một mảng khởi tạo trong Typecript, hãy sử dụng cú pháp sau:

Cú pháp

var array_name[:datatype];        //declaration 
array_name = [val1,val2,valn..]   //initialization

Một khai báo mảng không có kiểu dữ liệu được coi là thuộc kiểu bất kỳ. Kiểu của một mảng như vậy được suy ra từ kiểu dữ liệu của phần tử đầu tiên của mảng trong quá trình khởi tạo.

Ví dụ, một khai báo như - var numlist:number[] = [2,4,6,8] sẽ tạo một mảng như dưới đây:

Con trỏ mảng tham chiếu đến phần tử đầu tiên theo mặc định.

Arrays may be declared and initialized in a single statement. Cú pháp tương tự là -

var array_name[:data type] = [val1,val2…valn]

Note - Cặp dấu [] được gọi là số chiều của mảng.

Truy cập các phần tử mảng

Tên mảng theo sau chỉ số con được sử dụng để chỉ một phần tử mảng. Cú pháp của nó như sau:

array_name[subscript] = value

Ví dụ: Mảng đơn giản

var alphas:string[]; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var alphas;
alphas = ["1", "2", "3", "4"];
console.log(alphas[0]);
console.log(alphas[1]);

Đầu ra của đoạn mã trên như sau:

1 
2

Ví dụ: Khai báo và khởi tạo câu lệnh đơn

var nums:number[] = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var nums = [1, 2, 3, 3];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

Đầu ra của nó như sau:

1 
2 
3 
3

Đối tượng mảng

Một mảng cũng có thể được tạo bằng cách sử dụng đối tượng Array. Phương thức khởi tạo Array có thể được truyền.

• Một giá trị số đại diện cho kích thước của mảng hoặc

• Danh sách các giá trị được phân tách bằng dấu phẩy.

Ví dụ sau đây cho thấy cách tạo một mảng bằng phương pháp này.

Thí dụ

var arr_names:number[] = new Array(4)  

for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var arr_names = new Array(4);

for (var i = 0; i < arr_names.length; i++) {
   arr_names[i] = i * 2;
   console.log(arr_names[i]);
}

Đầu ra của nó như sau:

0 
2 
4 
6

Ví dụ: Array Constructor chấp nhận các giá trị được phân tách bằng dấu phẩy

var names:string[] = new Array("Mary","Tom","Jack","Jill") 

for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau:

//Generated by typescript 1.8.10
var names = new Array("Mary", "Tom", "Jack", "Jill");
for (var i = 0; i < names.length; i++) {
   console.log(names[i]);
}

Đầu ra của nó như sau:

Mary 
Tom 
Jack 
Jill

Phương thức mảng

Dưới đây là danh sách các phương thức của đối tượng Array cùng với mô tả của chúng.

Không.	Phương pháp & Mô tả
1.	concat () Trả về một mảng mới bao gồm mảng này được kết hợp với (các) mảng và / hoặc (các) giá trị khác.
2.	mỗi() Trả về true nếu mọi phần tử trong mảng này thỏa mãn hàm kiểm tra được cung cấp.
3.	bộ lọc () Tạo một mảng mới với tất cả các phần tử của mảng này mà hàm lọc đã cung cấp trả về true.
4.	cho mỗi() Gọi một hàm cho mỗi phần tử trong mảng.
5.	Chỉ số() Trả về chỉ số đầu tiên (ít nhất) của một phần tử trong mảng bằng giá trị được chỉ định hoặc -1 nếu không tìm thấy.
6.	tham gia() Nối tất cả các phần tử của một mảng thành một chuỗi.
7.	lastIndexOf () Trả về chỉ số cuối cùng (lớn nhất) của một phần tử trong mảng bằng giá trị đã chỉ định hoặc -1 nếu không tìm thấy.
số 8.	bản đồ() Tạo một mảng mới với kết quả của việc gọi một hàm được cung cấp trên mọi phần tử trong mảng này.
9.	pop () Loại bỏ phần tử cuối cùng khỏi một mảng và trả về phần tử đó.
10.	đẩy() Thêm một hoặc nhiều phần tử vào cuối mảng và trả về độ dài mới của mảng.
11.	giảm() Áp dụng một hàm đồng thời chống lại hai giá trị của mảng (từ trái sang phải) để giảm nó xuống một giá trị duy nhất.
12.	ReduceRight () Áp dụng đồng thời một hàm đối với hai giá trị của mảng (từ phải sang trái) để giảm nó xuống một giá trị duy nhất.
13.	đảo ngược() Đảo ngược thứ tự của các phần tử của một mảng - đầu tiên trở thành cuối cùng và cuối cùng trở thành đầu tiên.
14.	shift () Loại bỏ phần tử đầu tiên khỏi một mảng và trả về phần tử đó.
15.	lát () Trích xuất một phần của mảng và trả về một mảng mới.
16.	một số() Trả về true nếu ít nhất một phần tử trong mảng này đáp ứng chức năng kiểm tra được cung cấp.
17.	sắp xếp () Sắp xếp các phần tử của một mảng.
18.	mối nối () Thêm và / hoặc xóa các phần tử khỏi một mảng.
19.	toString () Trả về một chuỗi đại diện cho mảng và các phần tử của nó.
20	unshift () Thêm một hoặc nhiều phần tử vào phía trước của một mảng và trả về độ dài mới của mảng.

Cấu trúc mảng

Đề cập đến việc phá vỡ cấu trúc của một thực thể. TypeScript hỗ trợ cấu trúc lại khi được sử dụng trong ngữ cảnh của một mảng.

Thí dụ

var arr:number[] = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);

Đầu ra của nó như sau:

12 
13

Traversal mảng sử dụng for… in loop

Người ta có thể sử dụng for…in vòng lặp để đi qua một mảng.

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 

for(j in nums) { 
   console.log(nums[j]) 
}

Vòng lặp thực hiện duyệt mảng dựa trên chỉ mục.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var j;
var nums = [1001, 1002, 1003, 1004];

for (j in nums) {
   console.log(nums[j]);
}

Đầu ra của đoạn mã trên được đưa ra dưới đây:

1001 
1002 
1003 
1004

Mảng trong TypeScript

TypeScript hỗ trợ các khái niệm sau trong mảng:

Không.	Khái niệm & Mô tả
1.	Mảng đa chiều TypeScript hỗ trợ mảng đa chiều. Dạng đơn giản nhất của mảng nhiều chiều là mảng hai chiều.
2.	Truyền mảng cho các hàm Bạn có thể chuyển cho hàm một con trỏ tới một mảng bằng cách chỉ định tên của mảng mà không có chỉ mục.
3.	Trả về mảng từ các hàm Cho phép một hàm trả về một mảng

Đôi khi, có thể cần phải lưu trữ một bộ sưu tập các giá trị thuộc nhiều loại khác nhau. Mảng sẽ không phục vụ mục đích này. TypeScript cung cấp cho chúng ta một kiểu dữ liệu gọi là tuple giúp đạt được mục đích như vậy.

Nó đại diện cho một tập hợp các giá trị không đồng nhất. Nói cách khác, bộ giá trị cho phép lưu trữ nhiều trường thuộc các loại khác nhau. Các bộ giá trị cũng có thể được truyền dưới dạng tham số cho các hàm.

Cú pháp

var tuple_name = [value1,value2,value3,…value n]

Ví dụ

var mytuple = [10,"Hello"];

Bạn cũng có thể khai báo một bộ giá trị trống trong Typescript và chọn khởi tạo nó sau.

var mytuple = []; 
mytuple[0] = 120 
mytuple[1] = 234

Truy cập các giá trị trong Tuples

Các giá trị tuple được gọi là các mục riêng lẻ. Tuples dựa trên chỉ mục. Điều này có nghĩa là các mục trong một bộ có thể được truy cập bằng cách sử dụng chỉ mục số tương ứng của chúng. Chỉ mục của mục Tuple bắt đầu từ 0 và mở rộng đến n-1 (trong đó n là kích thước của tuple).

Cú pháp

tuple_name[index]

Ví dụ: Tuple đơn giản

var mytuple = [10,"Hello"]; //create a  tuple 
console.log(mytuple[0]) 
console.log(mytuple[1])

Trong ví dụ trên, một tuple, mytuple, được khai báo. Bộ tuple chứa các giá trị của kiểu số và kiểu chuỗi tương ứng.

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của nó như sau:

10 
Hello

Ví dụ: Empty Tuple

var tup = [] 
tup[0] = 12 
tup[1] = 23 

console.log(tup[0]) 
console.log(tup[1])

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của nó như sau:

12 
23

Hoạt động Tuple

Tuples trong TypeScript hỗ trợ các hoạt động khác nhau như đẩy một mục mới, xóa một mục khỏi bộ tuple, v.v.

Thí dụ

var mytuple = [10,"Hello","World","typeScript"]; 
console.log("Items before push "+mytuple.length)    // returns the tuple size 

mytuple.push(12)                                    // append value to the tuple 
console.log("Items after push "+mytuple.length) 
console.log("Items before pop "+mytuple.length) 
console.log(mytuple.pop()+" popped from the tuple") // removes and returns the last item
  
console.log("Items after pop "+mytuple.length)

• Push () nối một mục vào tuple

• Cửa sổ pop () loại bỏ và trả về giá trị cuối cùng trong bộ tuple

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

Items before push 4 
Items after push 5 
Items before pop 5 
12 popped from the tuple 
Items after pop 4

Đang cập nhật Tuples

Tuple có thể thay đổi, có nghĩa là bạn có thể cập nhật hoặc thay đổi giá trị của các phần tử tuple.

Thí dụ

var mytuple = [10,"Hello","World","typeScript"]; //create a  tuple 
console.log("Tuple value at index 0 "+mytuple[0]) 

//update a tuple element 
mytuple[0] = 121     
console.log("Tuple value at index 0 changed to   "+mytuple[0])

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

Tuple value at index 0 10 
Tuple value at index 0 changed to 121

Phá hủy một Tuple

Phá hủy cấu trúc đề cập đến việc phá vỡ cấu trúc của một thực thể. TypeScript hỗ trợ cấu trúc lại khi được sử dụng trong ngữ cảnh của một tuple.

Thí dụ

var a =[10,"hello"] 
var [b,c] = a 
console.log( b )    
console.log( c )

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

Đầu ra của nó như sau:

10 
hello

TypeScript 1.4 cung cấp cho các chương trình khả năng kết hợp một hoặc hai kiểu. Các kiểu liên kết là một cách hiệu quả để thể hiện một giá trị có thể là một trong một số kiểu. Hai hoặc nhiều kiểu dữ liệu được kết hợp bằng cách sử dụng ký hiệu ống dẫn (|) để biểu thị Loại Liên minh. Nói cách khác, một kiểu liên hợp được viết dưới dạng một chuỗi các kiểu được phân tách bằng các thanh dọc.

Cú pháp: Liên hợp ký tự

Type1|Type2|Type3

Ví dụ: Biến loại kết hợp

var val:string|number 
val = 12 
console.log("numeric value of val "+val) 
val = "This is a string" 
console.log("string value of val "+val)

Trong ví dụ trên, kiểu của biến là union. Nó có nghĩa là biến có thể chứa một số hoặc một chuỗi làm giá trị của nó.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var val;
val = 12;
console.log("numeric value of val " + val);
val = "This is a string";
console.log("string value of val " + val);

Đầu ra của nó như sau:

numeric value of val  12 
string value of val this is a string

Ví dụ: Loại Liên minh và tham số hàm

function disp(name:string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      
      for(i = 0;i<name.length;i++) { 
         console.log(name[i])
      } 
   } 
} 
disp("mark") 
console.log("Printing names array....") 
disp(["Mark","Tom","Mary","John"])

Hàm disp () có thể chấp nhận đối số kiểu chuỗi hoặc một mảng chuỗi.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
function disp(name) {
   if (typeof name == "string") {
      console.log(name);
   } else {
      var i;
      for (i = 0; i < name.length; i++) {
         console.log(name[i]);
      }
   }
}

disp("mark");
console.log("Printing names array....");
disp(["Mark", "Tom", "Mary", "John"]);

Kết quả như sau:

Mark 
Printing names array…. 
Mark 
Tom
Mary
John

Loại Liên minh và Mảng

Các kiểu liên kết cũng có thể được áp dụng cho mảng, thuộc tính và giao diện. Sau đây minh họa việc sử dụng kiểu liên hợp với một mảng.

Ví dụ: Kiểu Liên hợp và Mảng

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**numeric array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  

arr = ["Mumbai","Pune","Delhi"] 
console.log("**string array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

Chương trình khai báo một mảng. Mảng có thể đại diện cho một tập hợp số hoặc một tập hợp chuỗi.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var arr;
var i;
arr = [1, 2, 4];
console.log("**numeric array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
arr = ["Mumbai", "Pune", "Delhi"];
console.log("**string array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

Đầu ra của nó như sau:

**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi

Giao diện là một hợp đồng cú pháp mà một thực thể phải tuân theo. Nói cách khác, một giao diện xác định cú pháp mà bất kỳ thực thể nào cũng phải tuân theo.

Giao diện xác định các thuộc tính, phương thức và sự kiện, là các thành viên của giao diện. Giao diện chỉ chứa phần khai báo của các thành viên. Lớp dẫn xuất có trách nhiệm xác định các thành viên. Nó thường giúp cung cấp một cấu trúc chuẩn mà các lớp dẫn xuất sẽ tuân theo.

Hãy xem xét một đối tượng -

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

Nếu chúng ta xem xét chữ ký của đối tượng, nó có thể là -

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

Để sử dụng lại chữ ký trên các đối tượng, chúng ta có thể định nghĩa nó như một giao diện.

Khai báo giao diện

Từ khóa interface được sử dụng để khai báo một giao diện. Đây là cú pháp để khai báo một giao diện -

Cú pháp

interface interface_name { 
}

Ví dụ: Giao diện và Đối tượng

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

Ví dụ xác định một giao diện. Đối tượng khách hàng thuộc loại IPerson. Do đó, bây giờ nó sẽ ràng buộc đối tượng để xác định tất cả các thuộc tính như được chỉ định bởi giao diện.

Một đối tượng khác có chữ ký sau, vẫn được coi là IPerson vì đối tượng đó được xử lý theo kích thước hoặc chữ ký của nó.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

Đầu ra của mã ví dụ trên như sau:

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

Các giao diện không được chuyển đổi sang JavaScript. Nó chỉ là một phần của TypeScript. Nếu bạn thấy ảnh chụp màn hình của công cụ TS Playground thì không có tập lệnh java nào được phát ra khi bạn khai báo giao diện không giống một lớp. Vì vậy, các giao diện không có tác động JavaScript thời gian chạy.

Loại Liên minh và Giao diện

Ví dụ sau đây cho thấy việc sử dụng Loại Liên minh và Giao diện -

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

Đầu ra của nó như sau:

Hello 
Hello 
World 
**Hello World**

Giao diện và Mảng

Giao diện có thể xác định cả loại khóa mà một mảng sử dụng và loại mục nhập mà mảng chứa. Chỉ mục có thể là kiểu chuỗi hoặc kiểu số.

Thí dụ

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

Giao diện và Kế thừa

Một giao diện có thể được mở rộng bởi các giao diện khác. Nói cách khác, một giao diện có thể kế thừa từ giao diện khác. Typecript cho phép một giao diện kế thừa từ nhiều giao diện.

Sử dụng từ khóa expand để triển khai kế thừa giữa các giao diện.

Cú pháp: Kế thừa giao diện đơn

Child_interface_name extends super_interface_name

Cú pháp: Kế thừa nhiều giao diện

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Ví dụ: Kế thừa giao diện đơn giản

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

Đầu ra của nó như sau:

Age: 27 
Instrument: Drums

Ví dụ: Kế thừa nhiều giao diện

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+this.v1+" value 2: "+this.v2)

Đối tượng Iobj thuộc loại lá giao diện. Lá giao diện do kế thừa hiện có hai thuộc tính tương ứng là v1 và v2. Do đó, đối tượng Iobj bây giờ phải chứa các thuộc tính này.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

Đầu ra của đoạn mã trên như sau:

value 1: 12   value 2: 23

TypeScript là JavaScript hướng đối tượng. TypeScript hỗ trợ các tính năng lập trình hướng đối tượng như lớp, giao diện, v.v. Một lớp về mặt OOP là một bản thiết kế để tạo các đối tượng. Một lớp đóng gói dữ liệu cho đối tượng. Typecript cung cấp hỗ trợ được xây dựng cho khái niệm này được gọi là lớp. JavaScript ES5 trở về trước không hỗ trợ các lớp. Typecript lấy tính năng này từ ES6.

Tạo lớp học

Sử dụng từ khóa class để khai báo một lớp trong TypeScript. Cú pháp tương tự được đưa ra dưới đây:

Cú pháp

class class_name { 
   //class scope 
}

Từ khóa lớp được theo sau bởi tên lớp. Các quy tắc cho định danh phải được xem xét trong khi đặt tên một lớp.

Một định nghĩa lớp có thể bao gồm những điều sau:

• Fields- Trường là bất kỳ biến nào được khai báo trong một lớp. Các trường đại diện cho dữ liệu liên quan đến các đối tượng

• Constructors - Chịu trách nhiệm cấp phát bộ nhớ cho các đối tượng của lớp

• Functions- Các hàm thể hiện các hành động mà một đối tượng có thể thực hiện. Đôi khi chúng cũng được gọi là phương pháp

Các thành phần này kết hợp với nhau được gọi là thành viên dữ liệu của lớp.

Hãy xem xét một lớp Person trong bảng chữ.

class Person {
}

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

Ví dụ: Khai báo một lớp

class Car { 
   //field 
   engine:string; 
 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  

   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

Ví dụ khai báo một lớp Car. Lớp có một trường có tên là engine. Cácvartừ khóa không được sử dụng trong khi khai báo một trường. Ví dụ trên khai báo một phương thức khởi tạo cho lớp.

Hàm tạo là một hàm đặc biệt của lớp có nhiệm vụ khởi tạo các biến của lớp. TypeScript định nghĩa một phương thức khởi tạo bằng cách sử dụng từ khóa hàm tạo. Hàm tạo là một hàm và do đó có thể được tham số hóa.

Các thistừ khóa đề cập đến phiên bản hiện tại của lớp. Ở đây, tên tham số và tên trường của lớp giống nhau. Do đó, để tránh sự mơ hồ, trường của lớp được bắt đầu bằngthis từ khóa.

disp () là một định nghĩa hàm đơn giản. Lưu ý rằng từ khóa chức năng không được sử dụng ở đây.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Engine is  :   " + this.engine);
   };
   return Car;
}());

Tạo đối tượng Instance

Để tạo một phiên bản của lớp, hãy sử dụng newtừ khóa theo sau là tên lớp. Cú pháp tương tự được đưa ra dưới đây:

Cú pháp

var object_name = new class_name([ arguments ])

• Các new từ khóa chịu trách nhiệm cho việc khởi tạo.

• Phía bên phải của biểu thức gọi hàm tạo. Hàm tạo phải được truyền các giá trị nếu nó được tham số hóa.

Ví dụ: Khởi tạo một lớp

var obj = new Car("Engine 1")

Truy cập thuộc tính và chức năng

Các thuộc tính và chức năng của một lớp có thể được truy cập thông qua đối tượng. Sử dụng ' . 'ký hiệu dấu chấm (được gọi là dấu chấm) để truy cập các thành viên dữ liệu của một lớp.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Ví dụ: Đặt chúng lại với nhau

class Car { 
   //field 
   engine:string; 
   
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   //function 
   disp():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 

//create an object 
var obj = new Car("XXSY1")

//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  

//access the function
obj.disp()

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Function displays Engine is  :   " + this.engine);
   };
   return Car;
}());

//create an object
var obj = new Car("XXSY1");

//access the field
console.log("Reading attribute value Engine as :  " + obj.engine);

//access the function
obj.disp();

Đầu ra của đoạn mã trên như sau:

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

Kế thừa giai cấp

TypeScript hỗ trợ khái niệm Kế thừa. Tính kế thừa là khả năng của một chương trình tạo ra các lớp mới từ một lớp hiện có. Lớp được mở rộng để tạo các lớp mới hơn được gọi là lớp cha / siêu lớp. Các lớp mới tạo được gọi là lớp con / lớp con.

Một lớp kế thừa từ một lớp khác bằng cách sử dụng từ khóa 'expand'. Các lớp con kế thừa tất cả các thuộc tính và phương thức ngoại trừ các thành viên private và các hàm tạo từ lớp cha.

Cú pháp

class child_class_name extends parent_class_name

Tuy nhiên, TypeScript không hỗ trợ đa kế thừa.

Ví dụ: Kế thừa lớp

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 

class Circle extends Shape { 
   disp():void { 
      console.log("Area of the circle:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shape = (function () {
   function Shape(a) {
      this.Area = a;
   }
   return Shape;
}());

var Circle = (function (_super) {
   __extends(Circle, _super);
   function Circle() {
      _super.apply(this, arguments);
   }
	
   Circle.prototype.disp = function () { 
      console.log("Area of the circle:  " + this.Area); 
   };
   return Circle;
}(Shape));

var obj = new Circle(223);
obj.disp();

Đầu ra của đoạn mã trên như sau:

Area of the Circle: 223

Ví dụ trên khai báo một Hình dạng lớp. Lớp được mở rộng bởi lớp Circle. Vì có mối quan hệ kế thừa giữa các lớp, nên lớp con tức là lớp Xe có quyền truy cập ngầm vào thuộc tính lớp cha của nó tức là khu vực.

Thừa kế có thể được phân loại là -

• Single - Mỗi lớp có thể mở rộng nhiều nhất từ ​​một lớp cha

• Multiple- Một lớp có thể kế thừa từ nhiều lớp. TypeScript không hỗ trợ đa kế thừa.

• Multi-level - Ví dụ sau đây cho thấy cách hoạt động của kế thừa đa cấp.

Thí dụ

class Root { 
   str:string; 
} 

class Child extends Root {} 
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  

var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

Lớp Lá lấy các thuộc tính từ các lớp Gốc và Con nhờ kế thừa đa cấp.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var Root = (function () {
   function Root() {
   }
   return Root;
}());

var Child = (function (_super) {
   __extends(Child, _super);
   function Child() {
      _super.apply(this, arguments);
   }
   return Child;
}(Root));

var Leaf = (function (_super) {
   __extends(Leaf, _super);
   function Leaf() {
      _super.apply(this, arguments);
   }
   return Leaf;
}(Child));

var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

Đầu ra của nó như sau:

Đầu ra

hello

TypeScript ─ Kế thừa lớp và Ghi đè phương thức

Ghi đè phương thức là một cơ chế mà lớp con định nghĩa lại phương thức của lớp cha. Ví dụ sau minh họa tương tự -

class PrinterClass { 
   doPrint():void {
      console.log("doPrint() from Parent called…") 
   } 
} 

class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() 
      console.log("doPrint() is printing a string…")
   } 
} 

var obj = new StringPrinter() 
obj.doPrint()

Từ khóa super được sử dụng để chỉ lớp cha trực tiếp của một lớp. Từ khóa có thể được sử dụng để tham chiếu đến phiên bản siêu lớp của một biến, thuộc tính hoặc phương thức. Dòng 13 gọi phiên bản siêu lớp của hàm doWork ().

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var PrinterClass = (function () {
   function PrinterClass() {
   }
   PrinterClass.prototype.doPrint = function () { 
      console.log("doPrint() from Parent called…"); 
   };
   return PrinterClass;
}());

var StringPrinter = (function (_super) {
   __extends(StringPrinter, _super);
	
   function StringPrinter() {
      _super.apply(this, arguments);
   }
	
   StringPrinter.prototype.doPrint = function () {
      _super.prototype.doPrint.call(this);
      console.log("doPrint() is printing a string…");
   };
	
   return StringPrinter;
}(PrinterClass));

var obj = new StringPrinter();
obj.doPrint();

Đầu ra của đoạn mã trên như sau:

doPrint() from Parent called… 
doPrint() is printing a string…

Từ khóa tĩnh

Từ khóa static có thể được áp dụng cho các thành viên dữ liệu của một lớp. Một biến tĩnh vẫn giữ các giá trị của nó cho đến khi chương trình kết thúc quá trình thực thi. Các thành viên tĩnh được tham chiếu bởi tên lớp.

Thí dụ

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var StaticMem = (function () {
   function StaticMem() {
   }
	
   StaticMem.disp = function () {
      console.log("The value of num is" + StaticMem.num);
   };
	
   return StaticMem;
}());

StaticMem.num = 12;     // initialize the static variable
StaticMem.disp();      // invoke the static method

Đầu ra của đoạn mã trên như sau:

The value of num is 12

Toán tử instanceof

Các instanceof toán tử trả về true nếu đối tượng thuộc kiểu được chỉ định.

Thí dụ

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

Đầu ra của đoạn mã trên như sau:

obj is an instance of Person True

Ẩn dữ liệu

Một lớp có thể kiểm soát khả năng hiển thị của các thành viên dữ liệu của nó đối với các thành viên của các lớp khác. Khả năng này được gọi là Ẩn dữ liệu hoặc Đóng gói.

Định hướng đối tượng sử dụng khái niệm về bộ điều chỉnh truy cập hoặc bộ định hướng truy cập để thực hiện khái niệm Đóng gói. Các chỉ định / sửa đổi truy cập xác định khả năng hiển thị của các thành viên dữ liệu của một lớp bên ngoài lớp xác định của nó.

Các công cụ sửa đổi quyền truy cập được hỗ trợ bởi TypeScript là:

Không.	Thông số và mô tả truy cập
1.	public Một thành viên dữ liệu công khai có khả năng truy cập phổ biến. Các thành viên dữ liệu trong một lớp là công khai theo mặc định.
2.	private Các thành viên dữ liệu riêng tư chỉ có thể truy cập được trong lớp xác định các thành viên này. Nếu một thành viên lớp bên ngoài cố gắng truy cập một thành viên riêng tư, trình biên dịch sẽ thông báo lỗi.
3.	protected Một thành viên dữ liệu được bảo vệ có thể truy cập được bởi các thành viên trong cùng lớp với thành viên cũ và cả các thành viên của các lớp con.

Thí dụ

Bây giờ chúng ta hãy lấy một ví dụ để xem cách ẩn dữ liệu hoạt động như thế nào -

class Encapsulate { 
   str:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str)     //accessible 
console.log(obj.str2)   //compilation Error as str2 is private

Lớp có hai thuộc tính chuỗi, str1 và str2, lần lượt là các thành viên công cộng và riêng tư. Lớp được khởi tạo. Ví dụ trả về lỗi thời gian biên dịch, vì thuộc tính private str2 được truy cập bên ngoài lớp khai báo nó.

Lớp học và Giao diện

Các lớp cũng có thể triển khai các giao diện.

interface ILoan { 
   interest:number 
} 

class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 

var obj = new AgriLoan(10,1) 
console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

Lớp AgriLoan thực hiện giao diện Loan. Do đó, bây giờ nó ràng buộc đối với lớp để bao gồm thuộc tínhinterest với tư cách là thành viên của nó.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var AgriLoan = (function () {
   function AgriLoan(interest, rebate) {
      this.interest = interest;
      this.rebate = rebate;
   }
   return AgriLoan;
}());

var obj = new AgriLoan(10, 1);
console.log("Interest is : " + obj.interest + " Rebate is : " + obj.rebate);

Đầu ra của đoạn mã trên như sau:

Interest is : 10 Rebate is : 1

An objectlà một thể hiện chứa tập hợp các cặp giá trị khóa. Các giá trị có thể là giá trị vô hướng hoặc hàm hoặc thậm chí là mảng của các đối tượng khác. Cú pháp được đưa ra dưới đây:

Cú pháp

var object_name = { 
   key1: “value1”, //scalar value 
   key2: “value”,  
   key3: function() {
      //functions 
   }, 
   key4:[“content1”, “content2”] //collection  
};

Như được hiển thị ở trên, một đối tượng có thể chứa các giá trị, hàm và cấu trúc vô hướng như mảng và bộ giá trị.

Ví dụ: Object Literal Notation

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
//access the object values 
console.log(person.firstname) 
console.log(person.lastname)

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

Tom 
Hanks

Mẫu loại TypeScript

Giả sử bạn đã tạo một đối tượng theo nghĩa đen trong JavaScript là -

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
};

Trong trường hợp bạn muốn thêm một số giá trị vào một đối tượng, JavaScript cho phép bạn thực hiện các sửa đổi cần thiết. Giả sử sau này chúng ta cần thêm một hàm vào đối tượng person thì đây là cách bạn có thể thực hiện.

person.sayHello = function(){ return "hello";}

Nếu bạn sử dụng cùng một đoạn mã trong Typecript, trình biên dịch sẽ báo lỗi. Điều này là do trong Typecript, các đối tượng cụ thể phải có một mẫu kiểu. Các đối tượng trong Typecript phải là một thể hiện của một kiểu cụ thể.

Bạn có thể giải quyết vấn đề này bằng cách sử dụng một mẫu phương thức trong khai báo.

Ví dụ: Mẫu Typecript Type

var person = {
   firstName:"Tom", 
   lastName:"Hanks", 
   sayHello:function() {  }  //Type template 
} 
person.sayHello = function() {  
   console.log("hello "+person.firstName)
}  
person.sayHello()

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

hello Tom

Các đối tượng cũng có thể được truyền dưới dạng tham số cho chức năng.

Ví dụ: Đối tượng dưới dạng tham số hàm

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
var invokeperson = function(obj: { firstname:string, lastname :string }) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson(person)

Ví dụ khai báo một đối tượng theo nghĩa đen. Biểu thức hàm được gọi là chuyển đối tượng người.

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var person = {
   firstname: "Tom",
   lastname: "Hanks"
};

var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson(person);

Đầu ra của nó như sau:

first name :Tom 
last name :Hanks

Bạn có thể tạo và chuyển một đối tượng ẩn danh một cách nhanh chóng.

Ví dụ: Đối tượng ẩn danh

var invokeperson = function(obj:{ firstname:string, lastname :string}) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau.

//Generated by typescript 1.8.10
var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });
invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });

Đầu ra của nó như sau:

first name :Sachin 
last name :Tendulkar

Vịt gõ

Trong kiểu gõ vịt, hai đối tượng được coi là thuộc cùng một kiểu nếu cả hai có cùng một tập hợp các thuộc tính. Vị trí gõ xác minh sự hiện diện của các thuộc tính nhất định trong các đối tượng, thay vì loại thực tế của chúng, để kiểm tra tính phù hợp của chúng. Khái niệm này thường được giải thích bằng cụm từ sau:

“Khi tôi nhìn thấy một con chim đi như vịt và bơi như vịt và chạy như vịt, tôi gọi con chim đó là vịt.”

Trình biên dịch TypeScript triển khai hệ thống gõ kiểu vịt cho phép tạo đối tượng một cách nhanh chóng trong khi vẫn giữ an toàn cho kiểu gõ. Ví dụ sau cho thấy cách chúng ta có thể chuyển các đối tượng không triển khai giao diện một cách rõ ràng nhưng chứa tất cả các thành viên bắt buộc vào một hàm.

Thí dụ

interface IPoint { 
   x:number 
   y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
   var x = p1.x + p2.x 
   var y = p1.y + p2.y 
   return {x:x,y:y} 
} 

//Valid 
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  

//Error 
var newPoint2 = addPoints({x:1},{x:4,y:3})

Không gian tên là một cách để nhóm các mã liên quan một cách hợp lý. Điều này được tích hợp sẵn trong TypeScript không giống như trong JavaScript nơi các khai báo biến đi vào phạm vi toàn cầu và nếu nhiều tệp JavaScript được sử dụng trong cùng một dự án sẽ có khả năng ghi đè hoặc hiểu sai các biến giống nhau, điều này sẽ dẫn đến "vấn đề ô nhiễm không gian tên toàn cầu" trong JavaScript.

Xác định không gian tên

Định nghĩa không gian tên bắt đầu bằng từ khóa namespace theo sau là tên không gian tên như sau:

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

Các lớp hoặc giao diện sẽ được truy cập bên ngoài không gian tên phải được đánh dấu bằng từ khóa export.

Để truy cập lớp hoặc giao diện trong không gian tên khác, cú pháp sẽ là namespaceName.className

SomeNameSpaceName.SomeClassName;

Nếu không gian tên đầu tiên nằm trong tệp TypeScript riêng biệt, thì nó phải được tham chiếu bằng cú pháp tham chiếu dấu gạch chéo ba.

/// <reference path = "SomeFileName.ts" />

Chương trình sau minh họa việc sử dụng không gian tên:

FileName :IShape.ts 
---------- 
namespace Drawing { 
   export interface IShape { 
      draw(); 
   }
}  

FileName :Circle.ts 
---------- 
/// <reference path = "IShape.ts" /> 
namespace Drawing { 
   export class Circle implements IShape { 
      public draw() { 
         console.log("Circle is drawn"); 
      }  
      
      FileName :Triangle.ts 
      ---------- 
      /// <reference path = "IShape.ts" /> 
      namespace Drawing { 
         export class Triangle implements IShape { 
            public draw() { 
               console.log("Triangle is drawn"); 
            } 
         } 
         
         FileName : TestShape.ts 
         /// <reference path = "IShape.ts" />   
         /// <reference path = "Circle.ts" /> 
         /// <reference path = "Triangle.ts" />  
         function drawAllShapes(shape:Drawing.IShape) { 
            shape.draw(); 
         } 
         drawAllShapes(new Drawing.Circle());
         drawAllShapes(new Drawing.Triangle());
      }
   }
}

Đoạn mã trên có thể được biên dịch và thực thi bằng lệnh sau:

tsc --out app.js TestShape.ts  

node app.js

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau (app.js).

//Generated by typescript 1.8.10
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn");
      };
      return Circle;
   }());
	
   Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));

/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn");
      };
      return Triangle;
   }());
   Drawing.Triangle = Triangle;
})(Drawing || (Drawing = {}));

/// <reference path = "IShape.ts" />
/// <reference path = "Circle.ts" />
/// <reference path = "Triangle.ts" />
function drawAllShapes(shape) {
   shape.draw();
}

drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

Khi đoạn mã trên được biên dịch và thực thi, nó tạo ra kết quả sau:

Circle is drawn 
Triangle is drawn

Không gian tên lồng nhau

Bạn có thể xác định một không gian tên bên trong một không gian tên khác như sau:

namespace namespace_name1 { 
   export namespace namespace_name2 {
      export class class_name {    } 
   } 
}

Bạn có thể truy cập các thành viên của không gian tên lồng nhau bằng cách sử dụng toán tử dấu chấm (.) Như sau:

FileName : Invoice.ts  
namespace tutorialPoint { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
} 
FileName: InvoiceTest.ts 

/// <reference path = "Invoice.ts" />
var invoice = new tutorialPoint.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

Đoạn mã trên có thể được biên dịch và thực thi bằng lệnh sau:

tsc --out app.js InvoiceTest.ts 
node app.js

Khi biên dịch, nó sẽ tạo ra mã JavaScript sau (app.js).

//Generated by typescript 1.8.10
var tutorialPoint;
(function (tutorialPoint) {
   var invoiceApp;
   (function (invoiceApp) {
      var Invoice = (function () {
         function Invoice() {
         }
         Invoice.prototype.calculateDiscount = function (price) {
            return price * .40;
         };
         return Invoice;
      }());
      invoiceApp.Invoice = Invoice;
   })(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {}));
	
})(tutorialPoint || (tutorialPoint = {}));
/// <reference path = "Invoice.ts" />

var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

Khi đoạn mã trên được biên dịch và thực thi, nó tạo ra kết quả sau:

200

Một mô-đun được thiết kế với ý tưởng để tổ chức mã được viết bằng TypeScript. Các mô-đun được chia rộng rãi thành -

• Mô-đun nội bộ
• Mô-đun bên ngoài

Mô-đun nội bộ

Các mô-đun nội bộ đã có trong phiên bản trước của Typecript. Điều này được sử dụng để nhóm các lớp, giao diện, chức năng một cách hợp lý thành một đơn vị và có thể được xuất trong một mô-đun khác. Nhóm logic này được đặt tên là không gian tên trong phiên bản TypeScript mới nhất. Vì vậy, các mô-đun bên trong đã lỗi thời thay vào đó chúng ta có thể sử dụng không gian tên. Mô-đun nội bộ vẫn được hỗ trợ, nhưng khuyến nghị sử dụng không gian tên trên các mô-đun nội bộ.

Cú pháp mô-đun nội bộ (Cũ)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

Cú pháp vùng tên (Mới)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

JavaScript được tạo trong cả hai trường hợp đều giống nhau

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

Mô-đun bên ngoài

Các mô-đun bên ngoài trong TypeScript tồn tại để chỉ định và tải các phụ thuộc giữa nhiều bên ngoài jscác tập tin. Nếu chỉ có mộtjstệp được sử dụng, sau đó các mô-đun bên ngoài không liên quan. Theo truyền thống, quản lý phụ thuộc giữa các tệp JavaScript được thực hiện bằng cách sử dụng thẻ tập lệnh của trình duyệt (<script> </script>). Nhưng điều đó không thể mở rộng, vì nó rất tuyến tính trong khi tải các mô-đun. Điều đó có nghĩa là thay vì tải từng tệp một, không có tùy chọn không đồng bộ để tải mô-đun. Khi bạn đang lập trình js cho máy chủ, ví dụ NodeJs, bạn thậm chí không có thẻ script.

Có hai tình huống để tải người phụ thuộc js các tệp từ một tệp JavaScript chính duy nhất.

• Phía khách hàng - Yêu cầu
• Phía máy chủ - NodeJs

Chọn một trình tải mô-đun

Để hỗ trợ tải các tệp JavaScript bên ngoài, chúng tôi cần một trình tải mô-đun. Đây sẽ là cái khácjsthư viện. Đối với trình duyệt, thư viện phổ biến nhất được sử dụng là RequestieJS. Đây là một triển khai của đặc điểm kỹ thuật AMD (Định nghĩa mô-đun không đồng bộ). Thay vì tải từng tệp một, AMD có thể tải tất cả chúng một cách riêng biệt, ngay cả khi chúng phụ thuộc vào nhau.

Xác định mô-đun bên ngoài

Khi xác định mô-đun bên ngoài trong TypeScript nhắm mục tiêu CommonJS hoặc AMD, mỗi tệp được coi là một mô-đun. Vì vậy, có thể tùy chọn sử dụng mô-đun bên trong với mô-đun bên ngoài.

Nếu bạn đang di chuyển TypeScript từ AMD sang hệ thống mô-đun CommonJs, thì không cần thực hiện thêm công việc nào. Điều duy nhất bạn cần thay đổi chỉ là cờ của trình biên dịch Không giống như trong JavaScript, việc di chuyển từ CommonJs sang AMD hoặc ngược lại sẽ rất tốn kém.

Cú pháp để khai báo mô-đun bên ngoài là sử dụng từ khóa 'export' và 'import'.

Cú pháp

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

Để sử dụng mô-đun đã khai báo trong một tệp khác, một từ khóa nhập được sử dụng như được cung cấp bên dưới. Tên tệp chỉ được chỉ định mà không sử dụng phần mở rộng.

import someInterfaceRef = require(“./SomeInterface”);

Thí dụ

Hãy hiểu điều này bằng cách sử dụng một ví dụ.

// IShape.ts 
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
} 

// Triangle.ts 
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
   
// TestShape.ts 
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  

function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 

drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

Lệnh để biên dịch tệp TypeScript chính cho hệ thống AMD là:

tsc --module amd TestShape.ts

Khi biên dịch, nó sẽ tạo mã JavaScript sau cho AMD.

Tệp: IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

Tệp: Circle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

Tệp: Triangle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});

Tệp: TestShape.js

//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

Lệnh biên dịch tệp TypeScript chính cho Commonjs hệ thống là

tsc --module commonjs TestShape.ts

Khi biên dịch, nó sẽ tạo mã JavaScript sau cho Commonjs.

Tệp: Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

Tệp: Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

Tệp: TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

Đầu ra

Cirlce is drawn (external module)
Triangle is drawn (external module)

Khai báo môi trường xung quanh là một cách để thông báo cho trình biên dịch TypeScript biết rằng mã nguồn thực sự tồn tại ở nơi khác. Khi bạn đang sử dụng một loạt các bên thứ bajscác thư viện như jquery / anglejs / nodejs bạn không thể viết lại nó trong TypeScript. Đảm bảo an toàn kiểu chữ và nội dung trong khi sử dụng các thư viện này sẽ là một thách thức đối với một lập trình viên TypeScript. Khai báo môi trường xung quanh giúp tích hợp liền mạch cácjs thư viện vào TypeScript.

Xác định môi trường xung quanh

Khai báo môi trường xung quanh theo quy ước được lưu giữ trong tệp khai báo kiểu có phần mở rộng sau (d.ts)

Sample.d.ts

Tệp trên sẽ không được biên dịch sang JavaScript. Nó sẽ được sử dụng cho an toàn kiểu và intellisense.

Cú pháp để khai báo các biến hoặc mô-đun xung quanh sẽ như sau:

Cú pháp

declare module Module_Name {
}

Các tệp môi trường xung quanh phải được tham chiếu trong tệp TypeScript của máy khách như được minh họa -

/// <reference path = " Sample.d.ts" />

Thí dụ

Hãy hiểu điều này với sự trợ giúp của một ví dụ. Giả sử bạn được cung cấp một thư viện javascript của bên thứ ba chứa mã tương tự như thế này.

FileName: CalcThirdPartyJsLib.js 
var TutorialPoint;  
(function (TutorialPoint) {  
   var Calc = (function () { 
      function Calc() { 
      } 
      Calc.prototype.doSum = function (limit) {
         var sum = 0; 
         
         for (var i = 0; i <= limit; i++) { 
            Calc.prototype.doSum = function (limit) {
               var sum = 0; 
               
               for (var i = 0; i <= limit; i++) { 
                  sum = sum + i; 
                  return sum; 
                  return Calc; 
                  TutorialPoint.Calc = Calc; 
               })(TutorialPoint || (TutorialPoint = {})); 
               var test = new TutorialPoint.Calc();
            }
         }
      }
   }
}

Là một lập trình viên typecript, bạn sẽ không có thời gian để viết lại thư viện này thành typecript. Nhưng bạn vẫn cần sử dụng phương thức doSum () với kiểu an toàn. Những gì bạn có thể làm là tập tin khai báo xung quanh. Hãy để chúng tôi tạo tệp khai báo môi trường xung quanh Calc.d.ts

FileName: Calc.d.ts 
declare module TutorialPoint { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

Các tệp môi trường sẽ không chứa các triển khai, nó chỉ là các khai báo kiểu. Các khai báo bây giờ cần được đưa vào tệp biên bản như sau.

FileName : CalcTest.ts  
/// <reference path = "Calc.d.ts" /> 
var obj = new TutorialPoint.Calc(); 
obj.doSum("Hello"); // compiler error 
console.log(obj.doSum(10));

Dòng mã sau sẽ hiển thị lỗi trình biên dịch. Điều này là do trong tệp khai báo, chúng ta đã chỉ định tham số đầu vào sẽ là số.

obj.doSum("Hello");

Comment dòng trên và biên dịch chương trình theo cú pháp sau:

tsc CalcTest.ts

Khi biên dịch, nó sẽ tạo mã JavaScript sau (CalcTest.js).

//Generated by typescript 1.8.10
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");
console.log(obj.doSum(10));

Để thực thi mã, chúng ta hãy thêm một trang html với các thẻ script như dưới đây. Thêm tệp CalcTest.js đã biên dịch và tệp thư viện bên thứ ba CalcThirdPartyJsLib.js.

<html> 
   <body style = "font-size:30px;"> 
      <h1>Ambient Test</h1> 
      <h2>Calc Test</h2> 
   </body> 
   
   <script src = "CalcThirdPartyJsLib.js"></script> 
   <script src = "CalcTest.js"></script> 
</html>

Nó sẽ hiển thị trang sau:

Trên bảng điều khiển, bạn có thể thấy kết quả sau:

55

Tương tự, bạn có thể tích hợp jquery.d.ts hoặc angle.d.ts vào một dự án, dựa trên yêu cầu của bạn.