Hướng dẫn về TypeScript: Biết về các nguyên tắc cơ bản của TypeScript



TypeScript là một tập hợp JavaScript được đánh máy mạnh. Trong Hướng dẫn TypeScript này, chúng ta sẽ đi sâu và hiểu những điều cơ bản.

TypeScript là một tập hợp siêu được đánh máy mạnh mẽ của biên dịch sang JavaScript thuần túy. Bạn có thể sử dụng ngôn ngữ này để phát triển JavaScript quy mô ứng dụng. Ngoài ra, nó có thể được thực thi trên mọi trình duyệt, mọi máy chủ lưu trữ và mọi Hệ điều hành. Trong Hướng dẫn TypeScript này, chúng ta sẽ đi sâu vào TypeScript và hiểu những điều cơ bản theo trình tự sau:

Giới thiệu về TypeScript

TypeScript là một tập hợp JavaScript được đánh máy sẽ biên dịch thành JavaScript thuần túy. TypeScript là hướng đối tượng thuần túy với các lớp, giao diện và các ngôn ngữ lập trình được định kiểu tĩnh như C # hoặc là . Nó yêu cầu trình biên dịch để biên dịch và tạo trong tệp JavaScript. Về cơ bản, TypeScript là phiên bản ES6 của JavaScript với một số tính năng bổ sung.





Mã TypeScript được viết trong một tệp có phần mở rộng .ts và sau đó được biên dịch thành JavaScript bằng trình biên dịch. Bạn có thể viết tệp trong bất kỳ trình soạn thảo mã nào và trình biên dịch cần được cài đặt trên nền tảng của bạn. Sau khi cài đặt, lệnh tsc .ts biên dịch mã TypeScript thành một tệp JavaScript thuần túy.

Cú pháp:



var message: string = 'Chào mừng bạn đến với Edureka!' console.log (tin nhắn)

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

// Được tạo bởi typecript 1.8.10 var message = 'Chào mừng bạn đến với Edureka!' console.log (tin nhắn)

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

tính năng - hướng dẫn sắp chữ - edureka

  • Nền tảng chéo: Trình biên dịch TypeScript có thể được cài đặt trên bất kỳ Hệ điều hành nào như Windows, MacOS và Linux.



  • Ngôn ngữ hướng đối tượng : TypeScript cung cấp các tính năng như Các lớp học , Giao diện và Mô-đun. Do đó, nó có thể viết mã hướng đối tượng cho phát triển phía máy khách cũng như phía máy chủ.

  • Kiểm tra kiểu tĩnh : TypeScript sử dụng kiểu gõ tĩnh và giúp kiểm tra kiểu gõ tại thời điểm biên dịch. Do đó, bạn có thể tìm thấy lỗi trong khi viết mã mà không chạy tập lệnh.

  • Nhập tĩnh tùy chọn : TypeScript cũng cho phép gõ tĩnh tùy chọn trong trường hợp bạn đang sử dụng kiểu gõ động của JavaScript.

  • Thao tác DOM : Bạn có thể sử dụng TypeScript để thao tác DOM để thêm hoặc bớt các phần tử.

  • Các tính năng của ES 6 : TypeScript bao gồm hầu hết các tính năng của ECMAScript 2015 (ES 6, 7) đã được lên kế hoạch như lớp, giao diện, các chức năng Mũi tên, v.v.

Ưu điểm của việc sử dụng TypeScript

  • TypeScript là nhanh chóng, đơn giản, dễ học và chạy trên bất kỳ trình duyệt hoặc công cụ JavaScript nào.

  • Nó là giống đến JavaScript và sử dụng cùng một cú pháp và ngữ nghĩa.

  • Điều này giúp các nhà phát triển phần phụ trợ viết giao diện người dùng mã nhanh hơn .

  • Mã TypeScript có thể được gọi từ một mã JavaScript hiện có . Ngoài ra, nó hoạt động với các khung và thư viện JavaScript hiện có mà không gặp bất kỳ vấn đề nào.

  • Tệp Định nghĩa, với phần mở rộng .d.ts, cung cấp hỗ trợ cho các thư viện JavaScript hiện có như Jquery, D3.js , v.v. Vì vậy, mã TypeScript có thể thêm Thư viện JavaScript sử dụng các định nghĩa kiểu để tận dụng các lợi ích của việc kiểm tra kiểu, tự động hoàn thành mã và tài liệu trong các thư viện JavaScript được nhập động hiện có.

  • Nó bao gồm các tính năng từ ES6ES7 có thể chạy trong các công cụ JavaScript cấp ES5 như Node.js .

Bây giờ bạn đã hiểu TypeScript là gì, hãy tiếp tục với Hướng dẫn TypeScript này và xem xét các loại khác nhau.

Các loại TypeScript

Hệ thống Loại biểu thị các loại giá trị khác nhau được ngôn ngữ hỗ trợ. Nó kiểm tra hợp lệ của cung cấp giá trị trước khi chúng được lưu trữ hoặc thao tác bởi chương trình.

Nó có thể được phân thành hai loại như:

  • Được xây dựng trong : Điều này bao gồm number, string, boolean, void, null và undefined.
  • Đã xác định người dùng : Nó bao gồm các Enumerations (enums), các lớp, các giao diện, các mảng và bộ tuple.

Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript này và hiểu thêm về các biến.

Hướng dẫn TypeScript: Các biến

Biến là một không gian được đặt tên trong bộ nhớ được sử dụng để lưu trữ các giá trị.

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

Có bốn tùy chọn khi chúng ta khai báo một biến:

var [số nhận dạng]: [type-annotation] = value
var [số nhận dạng]: [type-annotation]
var [định danh] = giá trị
var [xác định]

Thí dụ:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('id nhân viên' + empid)

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

// Được tạo bởi typecript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('id nhân viên:' + empid)

Đầu ra:

tên: Daisy
id nhân viên: 1001

Bây giờ chúng ta hãy chuyển sang chủ đề tiếp theo của Hướng dẫn TypeScript của chúng tôi.

Các nhà khai thác

Một toán tử được sử dụng để xác định các 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. Có nhiều loại các nhà khai thác trong TypeScript chẳng hạn như:

  • 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ử số học

Các nhà khai thác Sự miêu tả

Phép cộng (+)

trả về tổng của các toán hạng

Phép trừ (-)

trả về sự khác biệt của các giá trị

Phép nhân (*)

trả về sản phẩm của các giá trị

Bộ phận (/)

thực hiện phép toán chia và trả về thương số

Mô đun (%)

thực hiện phép toán chia và trả về phần còn lại

Tăng dần (++)

Tăng giá trị của biến lên một

Giảm dần (-)

Giảm giá trị của biến đi một

Thí dụ:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Tổng:' + res) res = num1 - num2 console.log ('Sự khác biệt:' + res) res = num1 * num2 console.log ('Sản phẩm:' + res)

Đầu ra:

Tổng: 12
Sự khác biệt: 8
Sản phẩm: 20

Toán tử logic

Các nhà khai thác Sự miêu tả

VÀ (&&)

Nó chỉ trả về true nếu tất cả các biểu thức được chỉ định trả về true

HOẶC (||)

Điều này trả về true nếu ít nhất một trong các biểu thức được chỉ định trả về true

KHÔNG PHẢI (!)

Nó trả về nghịch đảo của kết quả của biểu thức.

Thí dụ:

var avg: number = 20 var ratio: number = 90 console.log ('Giá trị trung bình:' + avg + ', giá trị phần trăm:' + phần trăm) var res: boolean = ((trung bình> 50) && (phần trăm> 80 )) console.log ('(trung bình> 50) && (phần trăm> 80):', res)

Đầu ra:

Giá trị trung bình: 20, giá trị phần trăm: 90
(trung bình> 50) && (phần trăm> 80): sai

Toán tử quan hệ

Các nhà khai thác Sự miêu tả

>

Lớn hơn

<

Ít hơn

> =

Lớn hơn hoặc bằng

<=

Nhỏ hơn hoặc bằng

==

Bình đẳng

! =

Không công bằng

Thí dụ:

var num1: number = 10 var num2: number = 7 console.log ('Giá trị của num1:' + num1) console.log ('Giá trị của num2:' + num2) var res = num1> num2 console.log ('num1 lớn hơn num2: '+ res) res = num1

Đầu ra:

Giá trị của num1: 10
Giá trị của num2: 7
num1 lớn hơn num2: true
num1 nhỏ hơn num2: false

Toán tử Bitwise

Các nhà khai thác Sự miêu tả

Bitwise VÀ (&)

thực hiện phép toán Boolean AND trên mỗi bit đối số nguyên của nó.

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ó.

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ó.

Bitwise KHÔNG (~)

Đây là 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.

Dịch 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.

Shift phải (>>)

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.

Shift phải bằng Zero (>>>)

Nó tương tự như toán tử >>, ngoại trừ việc các bit được chuyển sang bên trái luôn bằng 0.

hồi quy logistic trong mã python

Thí dụ:

var a: number = 2 // Bản trình bày bit 10 var b: number = 3 // Bản trình bày bit 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', kết quả)

Đầu ra:

(a & b) => 2
(a | b) => 3

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

Các nhà khai thác Sự miêu tả

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

Thêm và gán (+ =)

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.

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.

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.

Chia và gán (/ =)

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.

Thí dụ:

var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)

Đầu ra:

a = b: 10
a + = b: 20
a - = b: 10

Đây là những nhà khai thác khác nhau. Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript của chúng tôi và tìm hiểu về các vòng lặp.

Vòng lặp

Có thể có những tình huống khi một khối mã cần được thực thi nhiều lần. A vòng câu lệnh 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.

Các vòng lặp TypeScript có thể được phân loại là:

Đối với vòng lặp

Các vòng lặp for là một triển khai của một vòng lặp xác định.

Cú pháp:

for (biểu thức thứ nhất, biểu thức thứ hai, biểu thức thứ ba) {// các câu lệnh được thực thi lặp lại}

Ở đây, biểu thức đầu tiên được thực thi trước khi vòng lặp bắt đầu. Biểu thức thứ hai là điều kiện để thực thi vòng lặp. Và biểu thức thứ ba được thực thi sau khi thực thi mọi khối mã.

Thí dụ:

for (cho tôi = 0 tôi<2 i++) { console.log ('Execute block statement' + i) }

Đầu ra:

Thực thi câu lệnh khối 0
Thực thi câu lệnh khối 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.

Cú pháp:

while (biểu thức điều kiện) {// khối mã được thực thi}

Thí dụ:

let i: number = 1 while (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Đầu ra:

Thực thi câu lệnh khối số 1
Thực thi câu lệnh khối số 2

Do..While Loop

Vòng lặp do & hellipworthy tương tự như vòng lặp while ngoại trừ việc nó không đánh giá điều kiện lần đầu tiên vòng lặp thực thi.

Cú pháp:

do {// khối mã được thực thi} while (biểu thức điều kiện)

Thí dụ:

let i: number = 1 do {console.log ('Số thực thi câu lệnh khối.' + i) i ++} while (i<3)

Đầu ra:

Thực thi câu lệnh khối số 1
Thực thi câu lệnh khối số 2

Ngoài những điều này, có các câu lệnh break và continue trong TypeScript được sử dụng trong một vòng lặp.

Tuyên bố ngắt

Câu lệnh break được sử dụng để kiểm soát một cấu trúc. Sử dụng câu lệnh break trong một vòng lặp giúp chương trình thoát khỏi vòng lặp.

Thí dụ:

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

Đầu ra:

Bội số đầu tiên của 5 giữa 1 và 10 là: 5

Tiếp tục Tuyên bố

Câu lệnh continue 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.

Thí dụ:

var num: number = 0 var count: number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Đầu ra:

Tổng số các giá trị lẻ từ 0 đến 10 là: 5

Đây là các vòng lặp khác nhau trong TypeScript. Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript của chúng tôi và hiểu các chức năng.

Chức năng

Trong JavaScript, chức năng là một trong những phần quan trọng nhất vì nó là một ngôn ngữ lập trình chức năng. Các hàm đảm bảo rằng chương trình có thể bảo trì và tái sử dụng, và được tổ chức thành các khối có thể đọc được. Trong khi TypeScript cung cấp khái niệm về các lớp và mô-đun, các hàm vẫn là một phần không thể thiếu của ngôn ngữ.

Các hàm được đặt tên

Một hàm được đặt tên được sử dụng để khai báo và gọi một hàm theo tên đã cho của nó.

kiểu dữ liệu sql cho ngày tháng

Thí dụ:

function display () {console.log ('TypeScript Function')} display ()

Đầu ra:

Chức năng TypeScript

Chức năng ẩn danh

Một hàm ẩn danh là một hàm được định nghĩa là một biểu thức. Biểu thức này được lưu trữ trong một biến. Các hàm này được gọi bằng cách sử dụng tên biến mà hàm được lưu trữ trong đó.

Thí dụ:

let welcome = function () {console.log ('TypeScript Function')} welcome ()

Đầu ra:

Chức năng TypeScript

Hàm mũi tên

Ký hiệu mũi tên béo được sử dụng cho các hàm ẩn danh, tức là cho các biểu thức hàm. Chúng cũng được gọi là hàm lambda trong các ngôn ngữ khác.

Cú pháp:

(param1, param2, ..., paramN) => biểu thức

Sử dụng mũi tên béo (=>) giảm nhu cầu sử dụng từ khóa ‘chức năng’. Các tham số được chuyển trong dấu ngoặc nhọn và biểu thức hàm được đặt trong dấu ngoặc nhọn {}.

Thí dụ:

let sum = (x: number, y: number): number => {return x + y} sum (10, 30) // trả về 40

Quá tải chức năng

TypeScript cung cấp khái niệm nạp chồng hàm. Do đó, bạn có thể có nhiều hàm có cùng tên nhưng khác kiểu tham số và kiểu trả về.

Thí dụ:

function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // trả về 'Hello Edureka' add ( 10, 10) // trả về 20

Trong ví dụ trên, chúng ta có cùng một hàm add () với hai khai báo hàm và một hàm thực thi. Chữ ký đầu tiên có hai tham số kiểu chuỗi, trong khi chữ ký thứ hai có hai tham số kiểu.

Đây là các loại chức năng khác nhau. Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript của chúng tôi và hiểu các chuỗi trong TypeScript.

Hướng dẫn TypeScript: Chuỗi

Các là một kiểu dữ liệu nguyên thủy khác được sử dụng để lưu trữ dữ liệu văn bản. Giá trị chuỗi được bao quanh bởi dấu ngoặc kép đơn hoặc dấu ngoặc kép.

Cú pháp:

var var_name = new String (chuỗi)

Có các thuộc tính khác nhau của các phương thức có sẵn trong đối tượng String như:

  • Người xây dựng - Nó trả về một tham chiếu đến hàm String đã tạo đối tượng
  • Chiều dài - Điều này trả về độ dài của chuỗi
  • Nguyên mẫu - Thuộc tính này cho phép bạn thêm thuộc tính và phương thức vào một đối tượng

Thí dụ:

let name = new String ('Chào mừng đến với Edureka!') console.log ('Tin nhắn:' + tên) console.log ('Độ dài:' + tên.length)

Đầu ra:

Thông điệp: Chào mừng đến với Edureka!
Chiều dài: 19

Phương thức chuỗi

Danh sách các phương thức trong đối tượng chuỗi bao gồm:

phương pháp Sự miêu tả

charAt ()

Nó trả về ký tự tại chỉ mục được chỉ định

charCodeAt ()

Nó trả về một số cho biết giá trị Unicode của ký tự tại chỉ mục đã cho

concat ()

Kết hợp văn bản của hai chuỗi và trả về một chuỗi mới

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

lastIndexOf ()

Nó 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

trận đấu()

Được sử dụng để đối sánh một biểu thức chính quy với một chuỗi

localeCompare ()

Trả về một số cho biết liệu 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

Tìm kiếm()

Điều này 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

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

lát ()

Nó trích xuất một phần của chuỗi và trả về một chuỗi mới

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

substr ()

Trả về các ký tự trong một chuỗi bắt đầu tại vị trí được chỉ định thông qua số ký tự được chỉ định

chuỗi con ()

Nó trả về các ký tự trong một chuỗi giữa hai chỉ mục vào chuỗi

toLocaleLowerCase ()

điểm tương đồng giữa java và javascript

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

toLocaleUpperCase ()

Các ký tự trong một chuỗi được chuyển đổi thành chữ hoa trong khi vẫn tôn trọng ngôn ngữ hiện tại

toLowerCase ()

Nó trả về giá trị chuỗi gọi được chuyển đổi thành chữ thường

Đến trường hợp trên()

Nó trả về giá trị chuỗi gọi được chuyển đổi thành chữ hoa

toString ()

Trả về một chuỗi đại diện cho đối tượng được chỉ định

giá trị của()

Trả về giá trị ban đầu của đối tượng được chỉ định

Thí dụ:

let str: string = 'Chào mừng đến với Edureka' str.charAt (0) // trả về 'w' str.charAt (2) // trả về 'l' 'Chào mừng đến với Edureka'.charAt (2) trả về' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // trả về 'welcomeEdureka' str1.concat ('', str2) // trả về 'welcome Edureka' str1.concat ('' to ' ') // trả về' chào mừng đến với '

Bây giờ bạn đã biết về chuỗi, hãy tiếp tục với hướng dẫn TypeScript này và hiểu về mảng.

Mảng trong TypeScript

An mảng là một kiểu dữ liệu đặc biệt lưu trữ tuần tự nhiều giá trị của các kiểu dữ liệu khác nhau bằng một cú pháp đặc biệt. 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 hoặc chỉ số của phần tử.

Cú pháp:

var array_name [: datatype] // khai báo array_name = [val1, val2, valn ..] // khởi tạo

Thí dụ:

let name: Array names = ['John', 'Daisy', 'Rachel'] let id: Array id = [101, 700, 321]

Phương thức mảng

Dưới đây là danh sách các phương thức Array khác nhau có thể được sử dụng cho các mục đích khác nhau:

phương pháp Sự miêu tả

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 được cung cấp trả về true

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

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 khác

Chỉ số()

Trả về chỉ số đầu tiên hoặc chỉ số nhỏ nhất của một phần tử trong mảng bằng giá trị đã chỉ định

cho mỗi()

Gọi một hàm cho mỗi phần tử trong mảng

tham gia()

Nối tất cả các phần tử của một mảng thành một chuỗi

lastIndexOf ()

Trả về chỉ số cuối cùng hoặc chỉ số lớn nhất của một phần tử trong mảng bằng giá trị đã chỉ định

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

đẩ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

pop ()

Loại bỏ phần tử cuối cùng khỏi một mảng và trả về phần tử đó

giảm()

Áp dụng đồng thời một hàm đối vớ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

ReduceRight ()

Áp dụng một hàm đồng thời chống lạ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

đảo ngược()

Đảo ngược thứ tự của các phần tử của một mảng

shift ()

Xóa phần tử đầu tiên khỏi một mảng và trả về phần tử đó

lát ()

Trích xuất một phần của mảng và trả về một mảng mới

một số()

Nó 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

sắp xếp ()

Nó sắp xếp các phần tử của một mảng

toString ()

Trả về một chuỗi đại diện cho mảng và các phần tử của nó

mối nối ()

Nó thêm và / hoặc xóa các phần tử khỏi một mảng

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

Thí dụ:

var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output: Tara name.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']

Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript này và tìm hiểu về Giao diện.

Giao diện TypeScript

Giao diện là một cấu trúc xác định hợp đồng trong ứng dụng của bạn. Nó xác định cú pháp cho các lớp tuân theo. Nó chỉ chứa phần khai báo của các thành viên và lớp dẫn xuất có trách nhiệm xác định các thành viên.

Thí dụ:

interface Employee {empID: number empName: string getSalary: (number) => number // hàm mũi tên getManagerName (number): string}

Trong ví dụ trên, Nhân viên giao diện bao gồm hai thuộc tính empIDempName . Nó cũng bao gồm một khai báo phương thức getSalaray sử dụng một hàm mũi tên bao gồm một tham số số và một kiểu trả về số. Các getManagerName được khai báo bằng một hàm bình thường.

TypeScript Các lớp học

TypeScript đã giới thiệu các lớp để chúng có thể tận dụng các lợi ích của các kỹ thuật hướng đối tượng như đóng gói và trừu tượng hóa. Lớp trong TypeScript được trình biên dịch TypeScript biên dịch thành các hàm JavaScript thuần túy để hoạt động trên các nền tảng và trình duyệt.

Một lớp bao gồm những thứ sau:

  • Người xây dựng
  • Tính chất
  • Phương pháp

Thí dụ:

class Employee {empID: number empName: string constructor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}

Di sản

TypeScript hỗ trợ Di sản vì nó là khả năng của một chương trình để tạo 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 hoặc lớp siêu. Các lớp mới tạo được gọi là lớp con hoặc 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. Tuy nhiên, TypeScript không hỗ trợ đa kế thừa.

Cú pháp:

class child_class_name mở rộng parent_class_name

Thí dụ:

class Person {name: string constructor (name: string) {this.name = name}} class Nhân viên mở rộng Person {empID: number constructor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Tên = Jason, ID nhân viên = 701

Bây giờ bạn đã biết về các lớp, hãy tiếp tục với Hướng dẫn TypeScript này và tìm hiểu về Đối tượng.

Đối tượng trong TypeScript

Một đối tượng là một thể hiện có chứa một tập hợp các cặp khóa-giá trị khác nhau. Các giá trị có thể là giá trị hoặc hàm vô hướng hoặc thậm chí là một mảng các đối tượng khác.

Cú pháp:

var object_name = {key1: “value1”, // giá trị vô hướng key2: “value”, key3: function () {// functions}, key4: [“content1”, “content2”]

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ị.

Thí dụ:

var person = {firstname: 'Danny', lastname: 'Green'} // truy cập các giá trị đối tượng 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:

Danny
màu xanh lá

Đây là những yếu tố quan trọng khác nhau của TypeScript. Bây giờ, hãy tiếp tục với Hướng dẫn TypeScript này và xem một ví dụ để hiểu trường hợp sử dụng.

Hướng dẫn TypeScript: Trường hợp Sử dụng

Ở đây, chúng ta sẽ học cách chuyển đổi sang TypeScript.

Khi chúng tôi biên dịch một tệp TypeScript, nó sẽ tạo ra tệp JavaScript tương ứng có cùng tên. Ở đây, chúng ta cần đảm bảo rằng tệp JavaScript gốc của chúng ta đóng vai trò là đầu vào không thể nằm trong cùng một thư mục để TypeScript không ghi đè chúng.

Quá trình chuyển từ JavaScript sang TypeScript bao gồm các bước sau:

1. Thêm tệp tsconfig.json vào dự án

Bạn cần thêm tệp tsconfig.json vào dự án. TypeScript sử dụng tệp tsconfig.json để quản lý các tùy chọn biên dịch của dự án, chẳng hạn như tệp bạn muốn bao gồm và loại trừ.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Tích hợp với một công cụ xây dựng

Hầu hết các dự án JavaScript đều có một công cụ xây dựng tích hợp như gulp hoặc webpack. Bạn có thể tích hợp các dự án với webpack theo những cách sau:

  • Chạy lệnh sau trên thiết bị đầu cuối:
$ npm cài đặt awesome-typecript-loader source-map-loader

Trong tích hợp webpack, bạn sử dụng awesome-typecript-loader kết hợp với source-map-loader để gỡ lỗi mã nguồn dễ dàng hơn.

  • Thứ hai, hợp nhất thuộc tính cấu hình mô-đun trong tệp webpack.config.js của chúng tôi để bao gồm bộ tải.

3. Di chuyển tất cả các tệp .js sang tệp .ts

Trong bước này, bạn phải đổi tên tệp .js thành tệp .ts. Tương tự, nếu tệp sử dụng JSX, bạn sẽ cần đổi tên nó thành .tsx. Bây giờ, nếu chúng ta mở tệp đó trong trình chỉnh sửa hỗ trợ TypeScript, một số mã có thể bắt đầu gây ra lỗi biên dịch. Vì vậy, việc chuyển đổi từng tệp một cho phép xử lý các lỗi biên dịch dễ dàng hơn. Nếu TypeScript tìm thấy bất kỳ lỗi biên dịch nào trong quá trình chuyển đổi, nó vẫn có thể dịch mã.

4. Kiểm tra lỗi

Sau khi chuyển tệp js sang tệp ts, ngay lập tức, TypeScript sẽ bắt đầu Kiểm tra loại mã của chúng ta. Vì vậy, bạn có thể gặp lỗi chẩn đoán trong mã JavaScript.

5. Sử dụng Thư viện JavaScript của bên thứ ba

Các dự án JavaScript sử dụng các thư viện của bên thứ ba như hoặc Lodash. Để biên dịch tệp, TypeScript cần biết kiểu của tất cả các đối tượng trong các thư viện này. Các tệp định nghĩa Kiểu TypeScript cho các thư viện JavaScript đã có sẵn tại Chắc chắnTyped. Vì vậy, không cần phải cài đặt loại này bên ngoài. Bạn chỉ cần cài đặt những loại được sử dụng trong dự án của chúng tôi.

Đối với jQuery, bạn có thể cài đặt định nghĩa:

$ npm install @ type / jquery

Sau đó, thực hiện các thay đổi đối với dự án JavaScript, chạy công cụ xây dựng. Bây giờ, bạn sẽ có dự án TypeScript được biên dịch thành JavaScript đơn giản có thể chạy trong trình duyệt.

Với điều này, chúng ta đã đến phần cuối của Hướng dẫn TypeScript này. Tôi hy vọng bạn đã hiểu tất cả các yếu tố quan trọng của TypeScript.

Kiểm tra của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của “Hướng dẫn TypeScript” và chúng tôi sẽ liên hệ lại với bạn.