Với mình thì typescript giống như một sự tiến hoá ngược. Ngày xưa, hồi đầu javascript mới ra đời, với kiểu khai bảo biến var abc, các lập trình viên lúc đó đều nói nó là một cuộc cách mạng so với java, và cho rằng java đã lỗi thời và sớm bị sụp đổ. Tuy nhiên không hiểu vì một lý do nào đó đến thời điểm hiện tại rất nhiều lập trình viện đang thần tượng Typescript và nói rằng nó là một cuộc cách mạng của javascript khi đã có thể quy định kiểu một cách rõ ràng giống như Java, thế giới của lập trình viên thật thú vị đúng không? Trong bài này Dũng sẽ cùng các bạn tìm hiểu về typescript nhé.

Khởi tạo dự án

  1. Chúng ta sẽ cùng nhau khởi tạo một dự án có tên typescript-example.
  2. Cd vào dự án typescript-example.
  3. Gõ lệnh: npm init -y
  4. Gõ lệnh: npm install typescript --save-dev
  5. Gõ lệnh: npx tsc --init
    Lúc này chúng ta sẽ thấy thư mục dự án sẽ có các tập tin sau:

Và mã nguồn của tập tin package.json sẽ là:

{
  "name": "typescript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.5.2"
  }
}

Viết mã và biên dịch

Sau khi cài đặt xong dự án chúng ta có thể thêm một tập tin src/index.ts vào thư mục dự án với mã nguồn như sau:

interface Person {
    firstName: string;
    lastName: string;
}

class Greeter {
    private greeting: string;

    constructor(greeting: string) {
        this.greeting = greeting;
    }

    public greet(person: Person): string {
        return `${this.greeting}, ${person.firstName} ${person.lastName}!`;
    }
}

const person: Person = {
    firstName: "Tech",
    lastName: "Master"
};

const greeter = new Greeter("Hello");
console.log(greeter.greet(person));

Tiếp theo hãy biên dịch nó bằng lệnh: npx tsc. Sẽ có một tập tin main.js được sinh ra với mã nguồn thế này:

"use strict";
class Greeter {
    constructor(greeting) {
        this.greeting = greeting;
    }
    greet(person) {
        return `${this.greeting}, ${person.firstName} ${person.lastName}!`;
    }
}
const person = {
    firstName: "Tech",
    lastName: "Master"
};
const greeter = new Greeter("Hello");
console.log(greeter.greet(person));

Bạn có thể thấy rằng trong typescript chúng ta đã khai báo interface Person, tuy nhiên khi biên dịch ra mã javascript thì nó không còn tồn tại nữa.
Vì javascript không có kiểu nên ngay cả khi đoạn mã typescript được biên dịch thành thế này cũng không sao:

const person = {
    firstName: "Tech",
    lastName: "Master"
};
const greeter = {
    greeting: "Hello"
};
greeter.greet = function(person) {
    return `${this.greeting}, ${person.firstName} ${person.lastName}!`;
}
console.log(greeter.greet(person));

Chúng ta có thể chạy tập tin src/main.js đã được biên dịch bằng lệnh node src/main.jsvà kết quả chúng ta nhận được sẽ là:

Hello, Tech Master!

Bổ sung lệnh chạy

Để có thể chạy chương trình một cách dễ dàng hơn, chúng ta có thể sửa đổi cấu hình như sau.

  1. Trong tập tin tsconfig.json chúng ta set “outDir”: “./dist”.
  2. Chúng ta sẽ cập nhật tập tin package.json thành như sau:
{
  "name": "typescript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/main.js",
    "execute": "yarn build & yarn start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.5.2"
  }
}

Bây giờ chúng ta có thể chạy lệnh yarn execute và kết quả chúng ta vẫn sẽ nhận được tương tự như chạy các lệnh rời rạc.

Tổng kết

Như vậy chúng ta đã cùng nhau cài đặt và biên dịch và chạy một chương trình typescript đơn giản.

Cám ơn bạn đã quan tâm đến bài viết|video này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

  1. Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
  2. Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
  3. Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a