10 phút làm quen với Typescript

Trong bài viết này, chúng ta sẽ cùng bước đầu làm quen với Typescript. Sẽ dễ dàng hơn nếu bạn đã biết javascript cơ bản trước đó, hoặc tham khảo tài liệu Typescript theo link sau nhé: https://www.typescriptlang.org/docs/home.html

Type script là gì, nó có gì mới ?

Typescript (TS) có thể xem như là một phiên bản nâng cấp của Javascript (JS). Typescript bổ sung thêm một số tính năng mới mà JS không có, như lập trình hướng đối tượng. TS cũng có thể sử dụng hết các tính năng của ECMAScript 2015 (ES6), TS cũng luôn được cập nhật phiên bản để đáp ứng nhu cầu của lập trình viên. Vì vậy Typescript đang được cộng đồng lập trình viên đón nhận.

Installation và build một file TypeScript như thế nào?

• Trước khi install typescript, bạn phải cài nodejs trước đó!
  check version trong Terminal: node –version

Nếu chưa cài node JS, bạn có thể follow theo link sau : https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/

• Tiếp theo, trong terminal run lệnh sau để install typescript :

npm install -g typescript

• Đã xong phần installation, tiếp theo là làm thế nào để build 1 file TS:

Giả sử sau khi code file ts có dạng abc.ts , gõ lệnh sau trong terminal:

tsc abc.ts

Lệnh trên sẽ build ra một file abc.js, để run file này, gõ lệnh sau trong terminal:

node abc.js

Vậy là đã run được file .ts phải không nào!

Một số kiến thức làm quen cơ bản với typescript

• Types
  Typescript có các kiểu cơ bản sau: boolean, number, string, array, enum, any, void. Khi khai báo biến theo cấu trúc:
  ten_bien : kieu_du_lieu = gia_tri_bien

• Function

– Ngoài khai báo function như JS, khi khai báo function trong typescript, cần khai báo kiểu của tham số và kiểu trả về của function

function addNum(x: number, y: number): number {

    return x+y;

}

var myAdd = function(x: number, y: number): number { return x+y; };

Function trên có kiểu của tham số và kiểu trả về của function là: number

– Typescript cũng có arrow function, để không phải bind biến ‘this’ khi sử dụng trong function, Arrow function sẽ nhận biến this của scope gần nhất. Ngoài ra Arrow function cũng dễ viết, dễ đọc, tường minh hơn so với các cách khai báo function thông thường.

Dưới đây là ví dụ sử dụng arrow function:

//arrow function with parameters
let withParameters = (x: number, y: number): number => {
    return x + y;
}
console.log(withParameters(10, 20));

//arrow function without parameters
var withoutParameter =  () => console.log('Typescript cơ bản!')

//arrow function in class
class Employee {

    empCode: number;

    empName: string;

    constructor(code: number, name: string) {

            this.empName = name;

            this.empCode = code;

    }

    display = () => console.log(this.empCode +' ' + this.empName)

}

let emp = new Employee(12345, 'tung');

emp.display();

• Class

Cũng giống như java, scala hay một số ngôn ngữ hướng đối tượng, cách hoạt động của class trong Typescript cũng tương tự.

class Employee {
 name: string;
 address: string;
 age: number;

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

 out() {
  return this.name + " - " + this.address + " - " + this.age + " years old.";
 }
}

let newEmployee = new Employee("Duong Khac Tung", "abcdef", 22)
console.log(newEmployee.out())

Constructor sẽ được chạy ngay khi khởi tạo class mới. Ở ví dụ trên khi khai báo new Employee(“Duong Khac Tung”, “abcdef”, 22) thì việc đầu tiên sẽ là chạy hàm constructor gán các thông tin nhân viên vào biến ‘name’, ‘address’, ‘age’ của class. Ngoài ra, cũng giống như các ngôn ngữ lập trình hướng đối tượng khác, chúng ta cũng có thể dễ dàng sử dụng kế thừa trong typeScript.

class Animal {
 move(distanceInMeters: number = 0) {
  console.log(`Animal moved ${distanceInMeters}m.`);
 }
}

class Dog extends Animal {
 bark() {
  console.log('Woof! Woof!');
 }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Trong ví dụ trên, class Dog kế thừa từ class Animal sửu dụng từ khoá ‘extends’ nên có thể gọi được function move(). Animal thường được gọi là class cha (superclass), Dog là class con (subclass).

• Iterator

Iterator trong Typescript bản chất cũng giống như for trong java, hay foreach trong javascipt, duyệt từng phần tử trong một mảng lấy ra giá trị để xử lý logic.

Một số ví dụ:

// loop like onother language

let infor = [1, "abcd", false];
for (let iter of infor) {
 console.log(iter); // 1, "tung", false
}

// for...of and for...in with array

let fullName = ["Duong", "Khac", "Tung"];
for (let i in fullName) {
 console.log(i); // "0", "1", "2",
}

for (let i of fullName) {
 console.log(i); // "Duong", "Khac", "Tung"
}

Kết luận

Trên đây là nội dung một số kiến thức cơ bản nhất để bắt đầu học Typescript, rất mong nhận được sự ủng hộ và góp ý từ các bạn đọc để những bài viết tới được chất lượng hơn. Thank you very much!

Tài liệu tham khảo

https://www.typescriptlang.org/docs/home.html