Bài 3: Cài đặt và chạy chương trình đầu tiên

Lý thuyết từ các bài trước chắc hẳn cũng làm anh em thấy bớt hứng thú với TypeScript rồi nhỉ :)). Trong bài viết này chúng ta sẽ cùng nhau đi cài đặt môi trường để sử dụng TypeScript và chạy chương trình đầu tiên “Hello world” nhé.

Lưu ý tẹo: Bài viết có những chỗ sử dụng một số từ ngữ tiếng Anh có thể làm cho nhiều anh em ngứa mắt hoặc bứt rứt, tuy nhiên đều là các từ phổ biến và cũng đã được chú thích bên cạnh để anh em hiểu nên anh em yên tâm nhé ^^.

1.Chuẩn bị cài đặt

• Visual Studio Code (vscode)

• • Là một IDE hỗ trợ gõ mã TypeScript

• TypeScript compiler (tsc)

• • Là một module Node.js, hỗ trợ biên dịch mã TypeScript sang JavaScript

• Node.js

• • Là môi trường hỗ trợ thực thi mã JavaScript

1.1 IDEs (Integrated Development Environment)

Một số IDEs có thể được sử dụng để gõ mã TypeScript, anh em cũng nên chọn IDE phù hợp nhé, lưu ý một số IDE có bắt trả phí. Ở đây, khuyến khích anh em sử dụng Visual Studio Code (vscode). Dưới đây là một số IDEs mà anh em có thể tham khảo, thông tin này chỉ là bổ sung “nhẹ” nên sẽ ghi chú lại bằng tiếng Anh cho anh em 👌.

• Visual Studio
• • • Visual Studio 2015 includes TypeScript.
    • Visual Studio 2013 Update 2 or later includes TypeScript, or you can download TypeScript for earlier versions.

• Visual Studio Code

• • • Visual Studio Code (vscode) provides contextual autocomplete as well as refactoring and debugging tools for TypeScript. vscode is itself implemented in TypeScript. Available for Mac OS X, Windows and Linux.

• WebStorm

• • • WebStorm 2016.2 comes with TypeScript and a built-in compiler. [WebStorm is not free]

• IntelliJ IDEA

• • • IntelliJ IDEA 2016.2 has support for TypeScript and a compiler via a plugin maintained by the JetBrains team. [IntelliJ is not free]

• Atom & atom-typescript

• • • Atom supports TypeScript with the atom-typescript package.

• Sublime Text

• • Sublime Text supports TypeScript with the TypeScript package.

1.2 Cài đặt VS Code

• Truy cập VS Code download page
• Tải xuống phiên bản VS Code mới nhất phù hợp với hệ điều hành (Windows, macOS hoặc Linux)
• Tiến hành cài đặt package đã được tải về
• Mở VS Code

Ra được màn hình như trên là vượt qua được vòng gửi xe rồi nhé anh em 😆.

1.3 Cài đặt Node.js

• Truy cập node.js download page
• Tải phiên bản node.js phù hợp với hệ điều hành (Windows, macOS hoặc Linux)
• Tiến hành cài đặt package đã tải về
• Kiểm tra version:
  • node -v

1.4 Cài đặt TypeScript compiler (tsc)

• Mở terminal trên macOS và Linux hoặc command line (cmd) trên Windows và gõ lệnh:
  • npm install -g typescript
• Kiểm tra version
  • tsc –v

2. Chương trình đầu tiên

• Tạo folder để lưu trữ source code. Ví dụ: mkdir lession-1
• Sử dụng VS Code mở folder vừa tạo
• Tạo 1 file helloworld.ts (.ts là extension của file)
• Gõ nội dung sau vào file helloworld.ts:

const message: string = “Hello world”;
console.log(message);

Phần này liên quan đến thực hành nên anh em lưu ý người thật việc thật nhé, mở IDEs và gõ luôn vô, 👌vào việc:

• Mở Terminal trong VS Code bằng keyboard shortcut: Ctrl+Shift+` hoặc theo menu Terminal > New Terminal

• Gõ command (lệnh) bên dưới để compile (biên dịch) file helloworld.ts:
  • tsc helloworld.ts

• Sau khi gõ lệnh trên sẽ thấy file helloworld.js được sinh ra
• Để chạy file helloworld.js trong node.js, sử dụng lệnh sau:
  • node helloworld.js
  • Output: Hello world

Bản chất thì mã TypeScript sẽ được chuyển đổi sang mã JavaScript và được thực thi bởi câu lệnh: node tên_file.js. Để xem cách mà chúng chuyển đổi ra sao anh em có thể đối chiếu mã TypeScript mà mình vừa code với mã JavaScript được generate (tạo) ra nhé. Như vậy với cách thao tác này anh em đã hình dung ra hai bước để chạy mã TypeScript đó là:

• Lệnh tsc để biên dịch mã TypeScript sang JavaScript 
• Lệnh node để thực thi mã JavaScript

Ngoài ra thì anh em cũng có thể sử dụng ts-node để thực thi trực tiếp mã TypeScript nhé. Cũng chỉ bớt đi 1 bước thao tác không generate ra mã JavaScript nữa thôi 😅.

3. Running Typescript sử dụng ts-node

• ts-node là một npm package, nó biến TypeScript thành JavaScript và cho phép chạy trực tiếp TypeScript trên Node.js mà không cần biên dịch trước (precompilation) bằng tsc.
  • Locally:
    • npm install -D typescript 
    • npm install -D ts-node
  • Globally:
    • npm install -g typescript 
    • npm install -g ts-node

• Để thực thi, gõ lệnh:

ts-node file-name.ts

Ví dụ: 

Gõ lệnh: ts-node hello-world.ts
Output  : Hello world

4. TypeScript REPL trong Node.js

• REPL là Read Eval Print Loop (Đọc – Đánh giá – In – Lặp)
• REPL là môi trường máy tính như Windows Console hoặc Unix/Linux Shell, tại đây người dùng có thể nhập các lệnh và hệ thống sẽ trả về kết quả đầu ra tương ứng.

Ví dụ REPL trong Node.js:

• Đối với TypeScript REPL trong Node.js chúng ta có thể sử dụng tsun package
• Cài đặt tsun:
  • npm install -g tsun
• Sử dụng các lệnh tsun chạy trong terminal hoặc command prompt (cmd)

Ví dụ: