TypeScript Hướng dẫn: Thế nào là gì, Giao diện, Enum, Mảng có ví dụ

Bởi: James Hartman James Hartman
Hours cập nhật

Là gì TypeScript?

TypeScript là một tập hợp siêu của JavaKịch bản. TypeScript là ngôn ngữ lập trình hướng đối tượng thuần túy hỗ trợ các lớp, giao diện, v.v. Đây là ngôn ngữ nguồn mở được phát triển bởi Microsoft biên dịch mã tĩnh thành JavaScript. Có thể dễ dàng chạy trên trình duyệt hoặc Nodejs.

Tất cả các tính năng mới nhất được phát hành cho ECMAScript đều được hỗ trợ trong TypeScript và thêm vào đó TypeScript có các tính năng hướng đối tượng riêng như giao diện, khai báo môi trường xung quanh, kế thừa lớp, v.v. giúp phát triển một ứng dụng lớn mà nếu không sẽ khó thực hiện JavaScript.

Cách tải xuống và cài đặt TypeScript

Dưới đây là quy trình từng bước để tải xuống và cài đặt TypeScript:

Bước 1) Tải xuống và cài đặt Nodejs

Truy cập trang web chính thức của nodejs: https://nodejs.org/en/download/ và tải xuống và cài đặt nodejs theo hệ điều hành của bạn. Hướng dẫn chi tiết về cách tải xuống nodejs có sẵn tại đây: https://www.guru99.com/download-install-node-js.html

Bước 2) Kiểm tra phiên bản Nodejs và npm

Để kiểm tra xem nodejs và npm đã được cài đặt chưa, chỉ cần kiểm tra phiên bản trong dấu nhắc lệnh của bạn.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Vậy là bạn đã cài đặt nodejs v10 và npm 6.

Bước 3) TypeScript Thi công

Tạo thư mục dự án của bạn typeproject/ và chạy npm init, như trong lệnh bên dưới:

npm init

Bước 4) Bắt đầu cài đặt

Bây giờ, chúng ta sẽ tạo gói .json để lưu trữ các phần phụ thuộc cho dự án của chúng ta.

Sau khi cài đặt xong TypeScript như sau:

npm -g install typescript

Lệnh trên sẽ đảm nhiệm việc cài đặt TypeScript. Thêm “-g” vào npm install sẽ cài đặt TypeScript trên toàn cầu. Ưu điểm của việc sử dụng -g là bạn sẽ có thể sử dụng TypeScript tsc lệnh từ bất kỳ thư mục nào khi nó được cài đặt trên toàn cầu. Trong trường hợp bạn không muốn cài đặt TypeScript trên toàn cầu sử dụng lệnh dưới đây:

npm --save install typescript

Tạo thư mục src/ trong thư mục dự án của bạn và tạo trong thư mục src/ TypeScript tập tin test.ts và viết mã của bạn.

Ví dụ: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Biên dịch TypeScript mã đến Javascript

Để biên dịch mã trên, hãy sử dụng lệnh sau:

If TypeScript được cài đặt trên toàn cầu, sử dụng lệnh bên dưới:

tsc test.ts

If TypeScript được cài đặt cục bộ vào dự án của bạn, bạn cần sử dụng đường dẫn của TypeScript từ node_modules như được hiển thị:

node_modules/typescript/bin/tsc test.ts

Lệnh trên sẽ tạo một tệp test.js và sẽ có mã được biên dịch sang javascript.

Ví dụ: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Thực hiện Javascript sử dụng Nodejs

Với TypeScript hướng dẫn này, chúng ta sẽ thực thi test.js trong nodejs như sau:

D:\typeproject\src>node test.js
15

Giá trị được điều khiển được hiển thị khi thực thi test.js

Thực hiện JavaScript trong trình duyệt

Ví dụ:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Thực hiện Javascript sử dụng Nodejs

Biên dịch TypeScript mã đến Javascript sử dụng phiên bản EcmaScript

TypeScript hỗ trợ tất cả các tính năng Ecmascript đã phát hành và các nhà phát triển có thể sử dụng chúng trong khi mã hóa. Nhưng không phải tất cả các tính năng mới đều hỗ trợ trên các trình duyệt cũ hơn, do đó bạn cần biên dịch javascript sang phiên bản Ecmascript cũ hơn. TypeScript cung cấp các tùy chọn trình biên dịch có thể làm như vậy.

Ví dụ: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Để biên dịch sang phiên bản ES mà bạn chọn, bạn có thể sử dụng tùy chọn target hoặc t trong lệnh của mình như sau:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Theo mặc định, mục tiêu là ES3. Trong trường hợp bạn muốn thay đổi nó, bạn có thể sử dụng lệnh trên.

Hiện tại chúng tôi sẽ sử dụng ES6 trong việc này TypeScript hướng dẫn như mục tiêu:

tsc --target ES6  test.ts

test.ts đến test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Mã vẫn giữ nguyên vì hàm mũi tên bạn đã sử dụng là một tính năng của ES6 và mã này khi được biên dịch sang ES6 cũng không bị thay đổi.

Theo mặc định, mục tiêu là ES3 nên nếu không có mục tiêu, bạn sẽ nhận được test.js dưới dạng:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Vậy ở đây, mũi tên mập được đổi thành hàm ẩn danh thông thường.

NHỮNG BÀI VIẾT LIÊN QUAN

Các biến trong TypeScript

Biến được sử dụng để lưu trữ các giá trị và giá trị có thể là một chuỗi, số, Boolean hoặc một biểu thức. Khi nói đến các biến trong TypeScript, chúng tương tự như JavaScript. Vậy chúng ta hãy học cách khai báo và gán giá trị cho các biến trong TypeScript.

Các biến không thể được sử dụng trong mã mà không xác định. Để khai báo một biến bạn có thể sử dụng

là từ khóa,

cho phép từ khóa

const từ khóa

Làm việc với các biến trong TypeScript tương tự như javascript, và người dùng quen thuộc với javascript sẽ thấy rất dễ dàng. Chỉ có các biến như cho phép và const không được sử dụng nhiều so với là.

Khai báo biến bằng var

Cú pháp:

var firstname = "Roy";

Chúng ta hãy xem xét một số TypeScript ví dụ để hiểu hoạt động của từ khóa var cũng như phạm vi của các biến được khai báo bằng cách sử dụng là từ khóa.

Ví dụ 1:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

Ví dụ 2: 

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

Ví dụ 3:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Khai báo biến bằng let

TypeScript cú pháp của let như sau:

Cú pháp:

let name="Roy";

Công việc của cho phép biến gần giống như là, nhưng có một sự khác biệt nhỏ và sẽ được hiểu tương tự bằng cách sử dụng một TypeScript thí dụ.

Ví dụ:

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Trên đây TypeScript ví dụ đưa ra một lỗi, nhưng điều tương tự sẽ hoạt động tốt nếu nó xảy ra với là từ khóa. Biến sử dụng cho phép có sẵn trong phạm vi khối được khai báo, ví dụ: biến t chỉ có sẵn bên trong khối if chứ không có sẵn cho toàn bộ hàm.

Ngoài ra, nếu bạn tình cờ khai báo một biến bên trong bất kỳ hàm nào hoặc vòng lặp for, vòng lặp while, TypeScript khối chuyển đổi, nó sẽ chỉ có sẵn cho bạn bên trong khối đó và không có tham chiếu nào đến nó bên ngoài khối và nó sẽ báo lỗi nếu biến được sử dụng bên ngoài khối. Đây là điểm khác biệt chính giữa các biến được khai báo từ khóa var và let.

Khai báo biến bằng const

Const có nghĩa là các biến không đổi. Chúng tương tự như các biến let, với điểm khác biệt duy nhất là một khi giá trị được gán cho nó thì không thể thay đổi được.

Cú pháp:

const name;

Ví dụ:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Vì vậy, người dùng chỉ có thể sử dụng biến const trong trường hợp họ biết rằng họ không phải thay đổi các giá trị được gán cho nó.

Nhập vào TypeScript

TypeScript là một ngôn ngữ được gõ mạnh, trong khi javascript thì không. Một biến có giá trị được định nghĩa là một chuỗi có thể được thay đổi thành một số mà không có bất kỳ vấn đề nào trong Javascript. Điều tương tự không được dung thứ trong TypeScript. Trong TypeScript, kiểu của một biến chỉ được định nghĩa khi bắt đầu và trong suốt quá trình thực thi, nó phải duy trì cùng một kiểu; bất kỳ thay đổi nào đối với nó sẽ dẫn đến lỗi biên dịch trong quá trình biên dịch sang javascript.

Sau đây là các loại:

  • Con số
  • Chuỗi
  • Boolean
  • Bất kì
  • Làm mất hiệu lực

Con số

Chỉ lấy số nguyên, số float, phân số, v.v.

Cú pháp:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Dưới đây là một số phương thức quan trọng có thể được sử dụng trên các loại Số:

toFixed () – nó sẽ chuyển đổi số thành chuỗi và sẽ giữ các vị trí thập phân được cung cấp cho phương thức.

toString () – phương thức này sẽ chuyển đổi số thành chuỗi.

giá trị của() – phương pháp này sẽ trả về giá trị nguyên thủy của số.

toPrecision() – phương pháp này sẽ định dạng số theo độ dài xác định.

Ví dụ: với tất cả các phương thức String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

Chuỗi

Chuỗi: chỉ các giá trị chuỗi

Cú pháp:

let str :string = "hello world";

Dưới đây là một số phương thức quan trọng có thể được sử dụng trên các kiểu String:

  • chia() – phương thức này sẽ chia chuỗi thành một mảng.
  • ký tựAt() – phương thức này sẽ đưa ra ký tự đầu tiên cho chỉ mục đã cho.
  • Chỉ số() – phương thức này sẽ đưa ra vị trí xuất hiện đầu tiên cho giá trị được cung cấp cho nó.
  • Thay thế () – phương thức này lấy 2 chuỗi, đầu tiên là giá trị cần tìm kiếm trong chuỗi và nếu có sẽ thay thế nó sẽ là chuỗi thứ 2 và sẽ trả về một chuỗi mới.
  • Tỉa () – phương pháp này sẽ loại bỏ khoảng trắng ở cả hai bên của chuỗi.
  • chất nền() – phương thức này sẽ đưa ra một phần của chuỗi phụ thuộc vào vị trí được cho là bắt đầu và kết thúc.
  • chuỗi con() – phương thức này sẽ đưa ra một phần của chuỗi phụ thuộc vào vị trí được cho là bắt đầu và kết thúc. Ký tự ở vị trí cuối sẽ bị loại trừ.
  • Đến trường hợp trên() -sẽ chuyển chuỗi thành chữ hoa
  • toLowerCase() – sẽ chuyển chuỗi thành chữ thường.

Ví dụ:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

Boolean

Sẽ chấp nhận các giá trị logic như true, false, 0 và 1.

Cú pháp:

let bflag :boolean = 1;
let status :boolean = true;

Bất kì

Cú pháp:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Các biến được khai báo bằng cách sử dụng bất kì kiểu có thể lấy biến dưới dạng chuỗi, số, mảng, boolean hoặc void. TypeScript sẽ không đưa ra bất kỳ lỗi thời gian biên dịch nào; điều này tương tự với các biến được khai báo trong JavaScript. Chỉ sử dụng bất kỳ biến kiểu nào khi bạn không chắc chắn về kiểu giá trị sẽ được liên kết với biến đó.

Làm mất hiệu lực

Kiểu void chủ yếu được sử dụng làm kiểu trả về trên một hàm không có gì để trả về.

Cú pháp:

function testfunc():void{
 //code here
}

TypeScript Mảng

An Mảng in TypeScript là một kiểu dữ liệu mà bạn có thể lưu trữ nhiều giá trị. Hãy cùng tìm hiểu cách khai báo và gán giá trị cho các hoạt động Mảng trong TypeScript.

từ TypeScript là ngôn ngữ có kiểu dữ liệu mạnh, bạn phải cho biết kiểu dữ liệu của các giá trị trong một mảng là gì. Nếu không, nó sẽ coi nó là kiểu bất kỳ.

Khai báo và khởi tạo một mảng

Cú pháp:

let nameofthearray : Array<typehere>

Ví dụ

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Các cách khác nhau để truy cập các phần tử từ Mảng

Để lấy các phần tử từ một mảng, các giá trị bắt đầu từ chỉ số 0 đến độ dài của mảng.

Ví dụ:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Bạn cũng có thể lấy các phần tử từ một mảng bằng cách sử dụng TypeScript cho vòng lặp như hình dưới đây:

Sử dụng TypeScript vòng lặp for

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Sử dụng vòng lặp for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Sử dụng vòng lặp for-of

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Sử dụng vòng lặp foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript Phương thức mảng

TypeScript Đối tượng mảng có nhiều thuộc tính và phương thức giúp các nhà phát triển xử lý mảng một cách dễ dàng và hiệu quả. Bạn có thể nhận giá trị của một thuộc tính bằng cách chỉ định tên mảng.property và đầu ra của một phương thức bằng cách chỉ định tên mảng.method().

tài sản chiều dài

=> Nếu bạn muốn biết số phần tử trong một mảng, bạn có thể sử dụng thuộc tính length.

Revphương pháp khác

=> Bạn có thể đảo ngược thứ tự các mục trong mảng bằng phương pháp đảo ngược.

Phương pháp sắp xếp

=> Bạn có thể sắp xếp các mục trong mảng bằng phương thức sắp xếp.

Phương pháp bật lên

=> Bạn có thể xóa mục cuối cùng của mảng bằng phương thức pop.

Shift phương pháp

=> Bạn có thể xóa mục đầu tiên của mảng bằng phương thức shift.

Phương pháp đẩy

=> Bạn có thể thêm giá trị vào mục cuối cùng của mảng.

phương pháp nối

=> Bạn có thể nối hai mảng thành một phần tử mảng.

Ví dụ về thuộc tính độ dài

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Ví dụ cho phương pháp đảo ngược

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Ví dụ về phương pháp sắp xếp

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Ví dụ về phương thức pop

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Ví dụ cho phương pháp shift

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Ví dụ về phương pháp đẩy

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Ví dụ về phương thức concat

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

Lớp trong TypeScript

TypeScript là một tập hợp siêu của JavaKịch bản, vì vậy bất cứ điều gì có thể làm trong JavaKịch bản cũng có thể có trong TypeScript. Lớp là một tính năng mới được thêm vào từ ES6 trở đi, vì vậy ở phần trước JavaScript chức năng kiểu lớp đã được thử nghiệm bằng cách sử dụng một hàm có chức năng nguyên mẫu để tái sử dụng mã. Sử dụng lớp, bạn có thể có mã của chúng tôi gần giống với các ngôn ngữ như java, c#, python, v.v., nơi mã có thể được tái sử dụng. Với tính năng của lớp trong TypeScript/JavaChữ viết làm cho ngôn ngữ trở nên rất mạnh mẽ.

Xác định một lớp trong TypeScript

Đây là cú pháp lớp cơ bản trong TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Ví dụ: Một ví dụ hoạt động trên Lớp

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

Trong ví dụ trên, bạn có một lớp tên là Sinh viên. Nó có các thuộc tính tuổi, tên và roll_no.

Trình xây dựng trong một TypeScript Lớp

Ví dụ về lớp Học sinh mà chúng ta đã định nghĩa ở trên, nó có một hàm tạo như dưới đây:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Phương thức khởi tạo có các thông số age, name và roll_no. Hàm tạo sẽ đảm nhiệm việc khởi tạo các thuộc tính khi lớp được gọi. Các thuộc tính được truy cập bằng cách sử dụng điều này từ khóa. Ví dụ this.age để truy cập thuộc tính age, this.roll_no để truy cập roll_no, v.v. Bạn cũng có thể có một hàm tạo mặc định, như hiển thị bên dưới:

constructor () {}

Các phương thức bên trong một TypeScript Lớp

Ví dụ lớp Students có các phương thức được định nghĩa như getRollNo(), getName(), getAge() được sử dụng để cung cấp thông tin chi tiết về các thuộc tính roll_no, name và age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Tạo thể hiện của lớp trong TypeScript

Ví dụ:

In TypeScript để tạo một thể hiện của một lớp, bạn cần sử dụng toán tử new. Khi chúng ta tạo một thể hiện của một lớp bằng toán tử new, chúng ta sẽ có được đối tượng có thể truy cập các thuộc tính và phương thức của lớp như được hiển thị bên dưới:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

Biên dịch TypeScript Lớp tới JavaScript

Bạn có thể sử dụng lệnh tsc như dưới đây để biên dịch thành Javascript.

Command: tsc  Students.ts

Đầu ra của Javascript mã khi biên dịch như dưới đây:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, Lớp được chuyển đổi thành hàm tự gọi.

Kế thừa giai cấp

Các lớp có thể được kế thừa bằng cách sử dụng thêm từ khóa trong TypeScript.

Cú pháp kế thừa lớp:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

hạng B sẽ có thể chia sẻ hạng A các phương thức và thuộc tính.

Đây là một ví dụ hoạt động của một lớp sử dụng Kế thừa

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Bạn có hai lớp, Người và Sinh viên. Lớp Sinh viên mở rộng Person và đối tượng được tạo trên Sinh viên có thể truy cập các phương thức và thuộc tính của chính nó cũng như lớp mà nó đã mở rộng.

Bây giờ chúng ta hãy thêm một số thay đổi nữa cho lớp trên.

Ví dụ:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

Những thay đổi mà bạn đã thêm so với ví dụ trước là có một hàm tạo được định nghĩa trong lớp Sinh viên. Hàm tạo phải lấy các tham số giống như lớp cơ sở và thêm bất kỳ tham số bổ sung nào của chính nó nếu có.

In TypeScript bạn cần gọi super sẽ tất cả các thông số làm thông số cơ sở trong đó. Đây phải là điều đầu tiên được thực hiện bên trong hàm tạo. Super sẽ thực thi hàm tạo của lớp mở rộng.

Truy cập công cụ sửa đổi trong TypeScript

TypeScript hỗ trợ các công cụ sửa đổi quyền truy cập công khai, riêng tư và được bảo vệ đối với các phương thức và thuộc tính của bạn. Theo mặc định, nếu công cụ sửa đổi truy cập không được cung cấp thì phương thức hoặc thuộc tính sẽ được coi là công khai và chúng sẽ có thể truy cập dễ dàng từ đối tượng của lớp.

Trong trường hợp các công cụ sửa đổi truy cập riêng tư, chúng không có sẵn để truy cập từ đối tượng của lớp và chỉ được sử dụng bên trong lớp. Chúng không có sẵn cho lớp kế thừa.

Trong trường hợp các công cụ sửa đổi truy cập được bảo vệ, chúng có nghĩa là được sử dụng bên trong lớp và lớp kế thừa và sẽ không thể truy cập được từ đối tượng của lớp.

Ví dụ:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena
  • Riêng: Các thuộc tính hoặc phương thức không thể được truy cập bởi đối tượng của lớp và cả lớp dẫn xuất, chúng được sử dụng bên trong lớp.
  • Được bảo vệ: các thuộc tính và phương thức cũng không thể được truy cập bởi đối tượng được tạo. Chúng có thể truy cập được từ bên trong lớp và có sẵn cho lớp mở rộng nó.
  • Công cộng: các thuộc tính và phương thức được khai báo mà không cần bất kỳ từ khóa nào. Chúng có thể dễ dàng được truy cập bằng cách sử dụng đối tượng của lớp từ bên ngoài.

Giao diện trong TypeScript

Một trong những tính năng cốt lõi của TypeScript là giao diện. Giao diện là một tập hợp các quy tắc được xác định cần được thực thể sử dụng nó triển khai. Thực thể có thể là một lớp, hàm hoặc biến. Giao diện có thể bao gồm các thuộc tính và phương thức. Bạn có thể định nghĩa các thuộc tính là tùy chọn bằng cách sử dụng cú pháp “?” cho thuộc tính hoặc phương thức đó. Giao diện thêm một kiểm tra kiểu mạnh cho bất kỳ hàm, biến hoặc lớp nào triển khai giao diện.

Cú pháp của giao diện trong TypeScript

interface Dimension {
    width: string;
    height: string;
}

Bạn đã xác định một giao diện có tên là Thứ nguyên có các thuộc tính chiều rộng và chiều cao và cả hai đều có loại dưới dạng chuỗi.

Bây giờ giao diện này có thể được thực hiện bởi một biến, một hàm hoặc một lớp. Dưới đây là ví dụ về biến triển khai giao diện Thứ nguyên.

Ví dụ:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Chữ ký của giao diện Thứ nguyên có chiều rộng và chiều cao và cả hai đều bắt buộc. Trong trường hợp trong khi triển khai giao diện, bất kỳ thuộc tính nào bị thiếu hoặc loại bị thay đổi, nó sẽ báo lỗi thời gian biên dịch trong khi biên dịch mã sang javascript.

Đoạn mã trên, khi được biên dịch sang javascript, trông như sau:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Bây giờ chúng ta hãy xem cách sử dụng một giao diện có chức năng.

Sử dụng Giao diện trên một hàm làm kiểu trả về

Ví dụ:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

Trong ví dụ trên, giao diện Dimension được triển khai trên hàm getDimension() làm kiểu trả về. Kiểu trả về của getDimension() phải khớp với các thuộc tính và loại được đề cập cho Thứ nguyên giao diện.

Mã được biên dịch thành Javascript sẽ như sau:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Trong quá trình biên dịch, nếu kiểu trả về không khớp với giao diện thì nó sẽ báo lỗi.

Giao diện là tham số chức năng

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

Vì vậy, ví dụ trên, bạn đã sử dụng Thứ nguyên giao diện làm tham số cho hàm getDimension(). Khi gọi hàm, bạn cần đảm bảo tham số được truyền cho nó khớp với quy tắc Giao diện được xác định.

Mã được biên dịch thành Javascript sẽ như sau:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Giao diện triển khai lớp

Để sử dụng giao diện với một lớp, bạn cần sử dụng từ khóa thực hiện.

Cú pháp cho Lớp thực hiện một giao diện:

class NameofClass implements InterfaceName {
}

Ví dụ sau đây cho thấy cách hoạt động của giao diện với lớp.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

Trong ví dụ trên, bạn đã xác định Giao diện Thứ nguyên với các thuộc tính chiều rộng và chiều cao cả loại chuỗi và một phương thức có tên getWidth() có giá trị trả về dưới dạng chuỗi.

Mã được biên dịch thành Javascript sẽ như sau:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Các chức năng trong TypeScript

Chức năng là tập hợp các hướng dẫn được thực hiện để thực hiện một nhiệm vụ. TRONG Javascript, hầu hết mã được viết dưới dạng hàm và đóng vai trò chính. TRONG TypeScript, bạn có sẵn lớp, giao diện, mô-đun, không gian tên, nhưng các hàm vẫn đóng một vai trò quan trọng. Sự khác biệt giữa chức năng trong javascript và TypeScript hàm là kiểu trả về có sẵn với TypeScript chức năng.

JavaChức năng script:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript chức năng:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Trong các hàm trên, tên hàm được thêm vào, các tham số là a1và b1 cả hai đều có kiểu là số và kiểu trả về cũng là số. Nếu bạn tình cờ truyền một chuỗi cho hàm, nó sẽ gây ra lỗi thời gian biên dịch trong khi biên dịch nó thành JavaKịch bản.

Thực hiện cuộc gọi đến hàm: thêm

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

Các thông số a1 và b1 là các tham số bắt buộc và sẽ báo lỗi nếu không được nhận theo cách đó. Ngoài ra, kiểu thông số và kiểu trả về rất quan trọng và không thể thay đổi một khi đã xác định.

Tham số tùy chọn cho hàm

Trong javascript, tất cả các tham số cho các hàm đều là tùy chọn và được coi là không xác định nếu không được truyền. Nhưng không giống như trường hợp với TypeScript, sau khi xác định các thông số, bạn cũng cần gửi chúng, nhưng trong trường hợp bạn muốn giữ bất kỳ thông số nào là tùy chọn, bạn có thể làm như vậy bằng cách sử dụng? chống lại tên param như hiển thị bên dưới:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

Xin lưu ý rằng các tham số tùy chọn chỉ được xác định trong một hàm cuối cùng, bạn không thể có tham số đầu tiên là tùy chọn và tham số thứ hai là bắt buộc. Khi bạn gọi hàm bằng một trình biên dịch tham số sẽ báo lỗi. Vì vậy cần phải giữ các thông số tùy chọn ở cuối.

Gán giá trị mặc định cho thông số

Bạn có thể gán giá trị mặc định cho các thông số như dưới đây:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Tương tự như các tham số tùy chọn, ở đây các tham số khởi tạo mặc định cũng phải được giữ ở cuối trong một hàm.

Thông số nghỉ ngơi

Bạn đã thấy cách TypeScript xử lý các tham số bắt buộc, các tham số tùy chọn và các tham số khởi tạo giá trị mặc định. Bây giờ, chúng ta sẽ xem xét các thông số còn lại. Các tham số còn lại là một nhóm các tham số tùy chọn được xác định cùng nhau và chúng được xác định bằng ba dấu chấm (…) theo sau là tên của tham số, là một mảng.

Cú pháp cho các thông số còn lại:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Như được hiển thị ở trên, các tham số còn lại được xác định bằng cách sử dụng (…param-name); thông số còn lại là một mảng có tiền tố ba dấu chấm. Mảng sẽ có tất cả các thông số được truyền cho nó. Bạn có thể gọi hàm, như trong ví dụ dưới đây:

Ví dụ:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Chức năng mũi tên

Hàm mũi tên là một trong những tính năng quan trọng được phát hành trong ES6 và nó có sẵn trong TypeScript cũng vậy. Cú pháp hàm mũi tên có một mũi tên mập trong đó do đó hàm này được gọi là hàm mũi tên.

Cú pháp hàm mũi tên:

var nameoffunction = (params) => {				
 // code here			
}

Công dụng của hàm mũi tên là gì?

Chúng ta hãy xem ví dụ để hiểu trường hợp sử dụng của hàm Mũi tên:

Ví dụ:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Bạn đã tạo một hàm ẩn danh có thuộc tính this. Điểm khởi tạo thành 0 và phương thức getScore có setTimeout bên trong và trong 1 giây, nó sẽ điều khiển this.score. Giá trị được điều khiển không được xác định mặc dù bạn đã xác định và khởi tạo this.score. Vấn đề ở đây là vớiis từ khóa. Hàm bên trong setTimeout có cái này riêng và nó cố gắng tham chiếu điểm nội bộ và vì nó không được xác định nên nó cho kết quả không xác định.

Điều tương tự có thể được thực hiện bằng cách sử dụng chức năng Mũi tên như dưới đây:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Bạn đã thay đổi hàm bên trong setTimeout thành hàm mũi tên như dưới đây:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Chức năng mũi tên không có chức năng riêng điều này được xác định và nó chia sẻ cha mẹ của nó điều này, vì vậy các biến được khai báo bên ngoài có thể dễ dàng truy cập bằng cách sử dụng this bên trong hàm mũi tên. Chúng rất hữu ích vì cú pháp ngắn hơn cũng như cho các lệnh gọi lại, trình xử lý sự kiện, các hàm định giờ bên trong, v.v.

TypeScript liệt kê

TypeScript Enum là một đối tượng có tập hợp các giá trị liên quan được lưu trữ cùng nhau. Javascript không hỗ trợ enum. Hầu hết các ngôn ngữ lập trình Lượt thích Java, NS, C++ hỗ trợ TypeScript Enum và nó cũng có sẵn với TypeScript cũng vậy. Enum được định nghĩa bằng từ khóa enum.

Làm thế nào để khai báo một Enum?

Cú pháp:

enum NameofEnum {
   value1,
   value2,
    ..
}

Ví dụ: Enum

enum Directions {
North,
South,
East,
West
}

Trong ví dụ trên, bạn đã định nghĩa một enum có tên là Directions. Giá trị được đưa ra là Bắc, Nam, Đông, Tây. Các giá trị được đánh số từ 0 cho giá trị đầu tiên trong enum và sau đó tăng thêm 1 cho giá trị tiếp theo.

Khai báo một Enum có giá trị số

Theo mặc định, nếu một enum không được cung cấp bất kỳ giá trị nào, nó sẽ coi đó là một số bắt đầu từ 0. Ví dụ sau đây cho thấy một enum có giá trị số.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Bạn cũng có thể gán giá trị bắt đầu cho enum và các giá trị enum tiếp theo sẽ nhận giá trị tăng dần. Ví dụ:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Bây giờ giá trị enum North bắt đầu bằng 5, vì vậy South sẽ nhận giá trị là 6, East = 7 và West = 8.

Bạn cũng có thể chỉ định các giá trị bạn chọn thay vì lấy giá trị mặc định. Ví dụ:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Làm cách nào để truy cập Enum?

Ví dụ sau đây cho thấy cách sử dụng Enum trong mã của bạn:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

Mã được biên dịch sang javascript như sau:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

từ Javascript không hỗ trợ enum, nó chuyển đổi enum thành các hàm tự gọi như được hiển thị ở trên.

Khai báo một Enum có giá trị chuỗi

Bạn có thể gán các giá trị chuỗi theo lựa chọn của mình, như trong ví dụ bên dưới:

Ví dụ:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Mã được biên dịch sang javascript như sau:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Các mô-đun trong là gì TypeScript?

Các tập tin được tạo trong TypeScript có quyền truy cập toàn cục, điều đó có nghĩa là các biến được khai báo trong một tệp có thể dễ dàng truy cập trong tệp khác. Tính chất toàn cầu này có thể gây ra xung đột mã và có thể gây ra sự cố khi thực thi trong thời gian chạy. Bạn có chức năng mô-đun xuất và nhập có thể được sử dụng để tránh xung đột chức năng, biến toàn cục. Tính năng này có sẵn trong JavaScript với bản phát hành ES6 và cũng được hỗ trợ trong TypeScript.

Tại sao bạn cần Mô-đun trong TypeScript?

Ví dụ sau đây cho thấy sự cố khi không có mô-đun:

Ví dụ test1.ts

let age : number = 25;

Bạn đã xác định độ tuổi thay đổi của số loại trong test1.ts.

Ví dụ test2.ts

Trong tệp test2.ts, bạn có thể dễ dàng truy cập vào biến tuổi được xác định trong test1.ts và cũng sửa đổi nó như dưới đây:

age = 30; // changed from 25 to 30.
let _new_age = age;

Vì vậy, trường hợp trên có thể tạo ra nhiều vấn đề vì các biến có sẵn trên toàn cầu và có thể được sửa đổi.

Với Modules, mã được viết vẫn giữ nguyên vị trí của tệp và không thể truy cập được bên ngoài tệp đó. Để truy cập bất cứ thứ gì từ tệp, nó phải được xuất bằng từ khóa xuất. It được sử dụng khi bạn muốn sử dụng biến, lớp, hàm hoặc giao diện trong một tệp khác. Nhập khẩu được sử dụng khi bạn cũng muốn truy cập vào biến, lớp hoặc giao diện hoặc hàm đã xuất. Làm như vậy, mã được viết vẫn còn nguyên trong tệp và ngay cả khi bạn xác định các tên biến giống nhau, chúng sẽ không bị trộn lẫn và hoạt động cục bộ đối với tệp nơi chúng được khai báo.

Sử dụng Xuất và Nhập

Có nhiều cách để xuất và nhập khẩu. Vì vậy, sẽ thảo luận ở đây cú pháp được sử dụng nhiều nhất.

Cú pháp nhập và xuất 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Đây là một ví dụ hoạt động bằng cách sử dụng xuất và nhập.

Ví dụ:

test1.ts

export let age: number = 25;

Từ khóa xuất được sử dụng để chia sẻ biến tuổi trong một tệp khác.

test2.ts

import { age } from "./test1"
let new_age :number = age;

Từ khóa nhập khẩu được sử dụng để truy cập tuổi biến và bạn cần chỉ định vị trí tệp như được hiển thị ở trên.

Cú pháp nhập và xuất 2:

Có một cách khác để xuất và nhập và cú pháp tương tự như dưới đây:

export = classname;

import classname = require(“file path of modulename”)

Khi bạn đang sử dụng xuất khẩu = để xuất mô-đun của bạn, quá trình nhập phải sử dụng require(“đường dẫn tệp của tên mô-đun”) để nhập mô-đun.

Sau đây là một ví dụ thực tế minh họa cho trường hợp trên:

Khách hàng.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Trình tải mô-đun

Các mô-đun không thể tự hoạt động, vì vậy bạn cần trình tải mô-đun để xác định các phần phụ thuộc nhập như bạn đã thấy trong TypeScript ví dụ được hiển thị ở trên. Trình tải mô-đun có sẵn là CommonJS để nodejs và Require.js chạy trong trình duyệt.

Để biên dịch mã bằng mô-đun CommonJS, hãy sử dụng lệnh sau:

tsc --module commonjs testCustomer.ts

Để biên dịch mã bằng mô-đun Requirejs, hãy sử dụng lệnh sau:

tsc --module amd testCustomer.ts

Các tệp phụ thuộc sẽ được chuyển đổi thành tệp js bằng lệnh trên.

Ví dụ testCustomer.ts đến testCustomer.js bằng Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Ví dụ Customer.ts đến Customer.js bằng Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Để kiểm tra nó bằng require.js, bạn cần tạo một tệp có tên main.js, tệp này có tham chiếu đến các phần phụ thuộc như được hiển thị.

Đây là cấu trúc thư mục:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

chính.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

kiểm tra.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Trình tải mô-đun

Không gian tên trong TypeScript

Namespace về cơ bản là tập hợp các lớp, giao diện, biến, hàm cùng nhau trong một tệp.

Cú pháp không gian tên

namespace name{

export class {
}

export interface {
}

export const constname;

}

Mã liên quan có sẵn trong một không gian tên.

Ví dụ hoạt động của không gian tên: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Tên của không gian tên là thiết lập sinh viên, bạn đã thêm giao diện StudDetails, hàm addSpace và một lớp có tên là Student.

Truy cập không gian tên

Sau đây là mã nơi bạn đang sử dụng không gian tên Thiết lập sinh viên.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Lớp, giao diện, hàm có sẵn bên trong một không gian tên phải được tham chiếu bằng tên của ví dụ về không gian tên Sinh viênSetup.addSpace để truy cập chức năng, Sinh viênSetup.Student để truy cập vào lớp học.

Bạn có thể biên dịch cả hai tệp thành một js như dưới đây:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Kiểm tra đầu ra trong dấu nhắc lệnh bằng lệnh bên dưới:

node namespace.js

Nó sẽ hiển thị đầu ra dưới dạng:

The name is: H a r r y

Tuyên bố môi trường xung quanh trong TypeScript

TypeScript cho phép bạn sử dụng các tệp javascript của bên thứ ba bằng cách sử dụng khai báo ambient. Ưu điểm của tính năng này là bạn không phải viết lại và vẫn sử dụng được tất cả các tính năng của thư viện trong TypeScript.

Cú pháp môi trường xung quanh

Để khai báo mô-đun môi trường xung quanh:

declare module moduleName {
   //code here
}

Tệp môi trường xung quanh phải được lưu dưới dạng:

filename.d.ts

Để sử dụng tập tin tên tập tin.d.ts trong .ts của bạn, bạn cần gọi nó là:

/// <reference path="filename.d.ts"/>

Khai báo loại môi trường xung quanh trong TypeScript sẽ có tham chiếu đến thư viện của bên thứ ba và sẽ khai báo lại các hàm cần thiết với kiểu riêng của nó. Ví dụ, hãy xem xét bạn có một thư viện javascript nhỏ, như được hiển thị bên dưới:

Bên thứ ba JavaTệp tập lệnh: testString.js

Ví dụ: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Bạn có một đối tượng có tên là StringChecks có các hàm như isString, convertToUpperCase, convertToLowerCase và converToStringBold.

Tạo mô-đun môi trường xung quanh trong TypeScript

Bây giờ sẽ tạo một mô-đun môi trường xung quanh có tham chiếu đến các hàm js ở trên và cũng thêm tính năng kiểm tra loại theo yêu cầu của chúng tôi.

Tên tập tin: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Bạn phải xác định tên mô-đun là TestString và đã xuất giao diện StringsFunc.

isString(str: string): boolean

=> Điều này sẽ lấy param làm chuỗi và kiểu trả về sẽ là boolean. Khi sử dụng trong tệp .ts của bạn trong trường hợp bạn tình cờ chuyển tham số dưới dạng số hoặc bất kỳ thứ gì khác ngoài chuỗi, nó sẽ gây ra lỗi kiểu biên dịch.

ConvertToUpperCase(str:string): chuỗi

=> Điều này sẽ lấy đối số dưới dạng chuỗi và trả về một chuỗi. Điều tương tự cũng xảy ra ConvertToLowerCase(str: string)
: sợi dây; Và ConvertToStringBold(str: string): chuỗi
;

Vì trong tệp javascript, bạn có tên đối tượng là StringChecks, nên cuối cùng chúng ta cần tham chiếu tương tự trong tệp .d.ts được thực hiện như sau:

declare var StringChecks: TestString.StringsFunc;

Sử dụng mô-đun Ambient trong TypeScript

Bây giờ đây là tệp test.ts nơi sẽ sử dụng tệp xung quanh tstring.d.ts

Ví dụ: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Biên dịch TypeScript tsc test.ts đến test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Bây giờ bạn có thể sử dụng test.js trong tệp html và cả tệp thư viện testString.js

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Đây là đầu ra nhìn thấy trong bảng điều khiển:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript Lịch Sử

Hãy xem những địa danh quan trọng trong lịch sử của TypeScript:

  • Sau hai năm phát triển nội bộ tại Microsoft. TypeScript 0.9, phát hành năm 2013
  • Hỗ trợ bổ sung cho thuốc generic TypeScript 1.0 được phát hành tại Build 2014
  • Vào tháng 2014 năm XNUMX, một TypeScript trình biên dịch đã ra đời, nhanh hơn gấp năm lần so với phiên bản trước.
  • Vào tháng 2015 năm 6, hỗ trợ cho các mô-đun ESXNUMX, từ khóa vùng tên, cho, hỗ trợ, trang trí.
  • Vào tháng 2016 năm XNUMX, một tính năng được bổ sung như các loại khóa và tra cứu, các loại được ánh xạ và phần còn lại.
  • Vào ngày 27 tháng 2018 năm XNUMX, các loại điều kiện, khóa cải tiến với hỗ trợ loại giao lộ đã được thêm vào trong TypeScript.

Tại sao sử dụng TypeScript?

Sau đây là những ưu/lợi ích quan trọng của việc sử dụng TypeScript

  • Dự án lớn và phức tạp trong JavaScript khó viết mã và khó bảo trì.
  • TypeScript giúp ích rất nhiều trong việc tổ chức mã và loại bỏ hầu hết các lỗi trong quá trình biên dịch.
  • TypeScript hỗ trợ thư viện JS & Tài liệu API
  • Đây là ngôn ngữ kịch bản được gõ tùy chọn
  • TypeScript Mã có thể được chuyển đổi thành đơn giản JavaMã tập lệnh
  • Cấu trúc mã tốt hơn và kỹ thuật lập trình hướng đối tượng
  • Cho phép hỗ trợ công cụ thời gian phát triển tốt hơn
  • Nó có thể mở rộng ngôn ngữ vượt ra ngoài các trình trang trí chuẩn, async/await

Ai sử dụng TypeScript?

Dưới đây là một số ứng dụng phổ biến nhất của TypeScript:

  • Nhóm góc cạnh sử dụng TypeScript.
  • Cài đặt NodeJS và NPM
  • TypeScript Thi công
  • Biên dịch TypeScript mã đến Javascript
  • Thực thi mã bằng Nodejs
  • Thực hiện Javascript trong Trình duyệt
  • Biên dịch TypeScript mã đến Javascript sử dụng phiên bản EcmaScript
  • Bạn có thể dễ dàng biên dịch mã được viết bằng TypeScript đến JavaScript sử dụng NodeJS.
  • Vì vậy để làm việc với TypeScript trước tiên bạn cần tải xuống và cài đặt NodeJS.

Tổng kết

  • TypeScript là một tập hợp siêu của JavaKịch bản. TypeScript là ngôn ngữ lập trình hướng đối tượng thuần túy hỗ trợ các lớp, giao diện, v.v.
  • TypeScript hỗ trợ tất cả các tính năng Ecmascript đã phát hành và các nhà phát triển có thể sử dụng tính năng tương tự trong khi viết mã.
  • Các biến được sử dụng để lưu trữ giá trị và giá trị có thể là chuỗi, số, Boolean hoặc biểu thức.
  • In TypeScript, kiểu của một biến chỉ được định nghĩa khi bắt đầu và trong suốt quá trình thực thi, nó phải duy trì cùng một kiểu; bất kỳ thay đổi nào đối với nó sẽ dẫn đến lỗi biên dịch trong quá trình biên dịch sang javascript.
  • Một mảng trong TypeScript là loại dữ liệu trong đó bạn có thể lưu trữ nhiều giá trị.
  • Lớp là một tính năng mới được thêm vào từ ES6 trở đi, vì vậy ở phần trước JavaChức năng kiểu lớp đã được thử nghiệm bằng cách sử dụng một hàm có chức năng nguyên mẫu để tái sử dụng mã.
  • TypeScript hỗ trợ các công cụ sửa đổi quyền truy cập công khai, riêng tư và được bảo vệ đối với các phương thức và thuộc tính của bạn.
  • Một trong những tính năng cốt lõi của TypeScript là các giao diện. Giao diện là một tập hợp các quy tắc được xác định cần được thực thể sử dụng nó triển khai.
  • Chức năng là tập hợp các hướng dẫn được thực hiện để thực hiện một nhiệm vụ.
  • TypeScript Enum là một đối tượng có tập hợp các giá trị liên quan được lưu trữ cùng nhau.

Tóm tắt bài viết này với: