TYPESCRIPT 2.X CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 02: Cài đặt TypeScript

TypeScript được phát triển bởi Microsoft nên họ đã tích hợp plug-ins vào bộ Visual Studio 2015, vì vậy bạn có thể sử dụng phần mềm này để code. Tuy nhiên đa số các bạn đang xem ở blog mình không sử dụng phần mềm Visual Studio nên mình sẽ chọn một giải pháp khác như sau: Chúng ta sẽ cài đặt NodeJS npm và cài đặt thủ công thông qua các lệnh command line.

1. Các bước cài đặt TypeScript

Để cài đặt và sử dụng TypeScipt thì bạn sẽ thực hiện các bước sau:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Bước 1: Cài đặt NodeJS npm

Bạn hãy đọc và làm theo bài cài đặt NodeJS trên local nhé, bài này mình đã hướng dẫn cài đặt rất chi tiết.

Bước 2: Cài đặt Git Bash

Git Bash là một phần mềm có chức năng tương tự như Window Command Line, nghĩa là bạn sẽ gõ những dòng lệnh command line ở trong phần mềm này thay vì sử dụng cái có sẵn của Window. Bạn hay xem bài cài đặt Git Bash nhé.

Bước 3: Kiểm tra cài đặt

Sau khi thực hiện hai bước trên thì mình sẽ kiểm tra xem bạn đã cài đặt thành công hay chưa. Bạn click chuột phải trên màn hình Desktop và chọn Git Bash Here.

git bash here png

Sau đó một cửa sổ hiện ra và bạn gõ lệnh như sau:

npm -v

Nếu kết quả in ra version của npm như trong hình sau thì bạn đã thực hiện thành công 2 bước trên.

kiem tra version npm png

Bước 4: Cài đặt TypeScript

Bạn nhập dòng lệnh sau vào cửa sổ command line của Git Bash và chờ nó cài đặt thành công.

npm install -g typescript  

Lưu ý: Nếu bạn sử dụng một editor có hỗ trợ biên dịch TypeScript thì không cần thực hiện bước này.

2. Biên dịch TypeScript

Phần đuôi mở rộng của TypeScript sẽ là .ts, vì vậy khi tạo một file mới thì bạn cần phải đặt tên tên là name.ts chứ không phải là name.js.

Để biên dịch TypeScript sang Javascript thì bạn mở cửa sổ Git Base và cd đến thư mục chứa file typescript rồi gõ lệnh sau:

tcs helloWord.ts

Trong đó helloWord.ts là tên của file TypeScript. Sau khi biên dịch sẽ có một file có tên là helloWord.js nằm cùng cấp với file Customer.ts, file này sẽ là file chứa mã Javascript sau khi biên dịch.

Ví dụ: Bạn tạo một file tên là customer.ts với đường dẫn như sau D:/typescript/customer.ts. Tiếp theo bạn nhập nội dung sau vào file này:

class Customer {  
    Name : string;  
    constructor (firstName: string, lastName: string)  
    {  
        this.Name = firstName + "  " + lastName;  
    }  
    GetName()  
    {  
        return "Hello, " + this.Name;  
    }  
}  
let cust = new Customer("Jimi","Scott");  

Sau đó bạn chạy hai lệnh sau để thực hiện biên dịch file Customer.ts.

  • Lệnh 1: cd đến thư mục chứa file Customer.ts
    cd D:/typescript
  • Lệnh 2: Thực hiện biên dịch file Customer.ts
    tsc Customer.ts

Cả hai lệnh này sẽ có giao diện như sau:

bien dich typescript png

Tiếp theo bạn vào thư mục D:/typescript thì sẽ thấy xuất hiện thêm một file Custome.js với nội dung như sau:

var Customer = (function () {
    function Customer(firstName, lastName) {
        this.Name = firstName + "  " + lastName;
    }
    Customer.prototype.GetName = function () {
        return "Hello, " + this.Name;
    };
    return Customer;
}());
var cust = new Customer("Jimi", "Scott");

Như vậy là ta đã biên dịch thành công và sau này khi sử dụng thì ta sẽ sử dụng file Customer.js này.

3. Chọn phần mềm code TypeScript

Có khá nhiều phần mềm kèm plugin hỗ trợ code TypeScript như Sublime Text, Netbeans, Visual Studio 2015, .. Riêng mình thì thích mỗi Netbeans nên mình sẽ chọn phần mềm này. Để sử dụng TypeScript trên Netbeans thì bạn cần cài đặt thêm plugin TypeScript Editor nhé.

4. Lời kết

Qua bài này bạn đã biết cách cài đặt TypeScript trên Local để học rồi đấy, bài này khá quan trọng nên bạn cần phải thực hiện đúng theo từng bước mà mình đã trình bày ở trên, nếu có vấn đề trong việc cài đặt thì cứ để lại bình luận nhé. Chúc các bạn học tốt.

Cùng chuyên mục:

Bài 06: Vòng lặp trong TypeScript

Bài 06: Vòng lặp trong TypeScript

Vòng lặp rất quan trọng trong các ngôn ngữ lập trình và trong TypeScipt cũng…

Bài 05: Lệnh If Else và Switch Case trong TypeScript

Bài 05: Lệnh If Else và Switch Case trong TypeScript

Trong bài này chúng ta sẽ học cách sử dụng lệnh if else và lênh…

Bài 04: Khai báo biến trong TypeScript

Bài 04: Khai báo biến trong TypeScript

Ngoài từ khóa var ra TypeScript hỗ trợ thêm hai cách khai báo biến đó…

Bài 03: TypeScript Basic Types

Bài 03: TypeScript Basic Types

Khi học bất kì một ngôn ngữ nào chúng ta cũng thao tác với các…

Bài 01: TypeScript là gì? TypeScript và Javascript

Bài 01: TypeScript là gì? TypeScript và Javascript

Nếu bạn đã từng muốn học Angular2 thì người ta sẽ khuyên bạn là nên…

Top