TypeScript - Thiết lập Môi trường

Xin chào, ngôi sao lập trình tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting này vào thế giới của TypeScript. Là một ai đó đã dạy lập trình trong nhiều năm, tôi có thể告诉 bạn rằng việc thiết lập môi trường phát triển của bạn giống như chuẩn bị bếp trước khi nấu một bữa ăn ngon. Nó có thể không phải là phần thú vị nhất, nhưng nó rất quan trọng cho một trải nghiệm mượt mà và thú vị. Vậy, hãy gấp áo và bắt đầu nào!

TypeScript - Environment Setup

Thiết lập Môi trường Cục bộ

Trước khi chúng ta lặn vào chi tiết của TypeScript, chúng ta cần thiết lập môi trường cục bộ. Hãy tưởng tượng này như là tạo ra không gian lập trình của bạn - một góc ấm cúng nơi bạn sẽ dành rất nhiều thời gian để tạo ra những chương trình tuyệt vời.

Cài đặt Node.js

Trước tiên, chúng ta cần cài đặt Node.js. "Nhưng đợi đã," bạn có thể hỏi, "Tôi tưởng chúng ta đang học TypeScript?" Đúng vậy, bạn hoàn toàn đúng! Tuy nhiên, Node.js giống như người hàng xóm thân thiện mà TypeScript dựa vào cho nhiều thứ, bao gồm cả việc chạy bộ 编译器 TypeScript của chúng ta.

Hãy làm theo các bước sau để cài đặt Node.js:

  1. Truy cập trang web chính thức của Node.js (https://nodejs.org/).
  2. Tải xuống phiên bản được khuyến nghị cho đa số người dùng.
  3. Chạy trình cài đặt và làm theo các hướng dẫn.
  4. Sau khi cài đặt, mở terminal hoặc command prompt.
  5. node -v và nhấn Enter để xác minh cài đặt.

Nếu bạn thấy số phiên bản, chúc mừng! Bạn đã cài đặt Node.js thành công. Nếu không, đừng lo lắng - chúng ta đều đã từng ở đó. Kiểm tra lại các bước cài đặt hoặc tìm kiếm sự giúp đỡ.

Bây giờ chúng ta đã có Node.js, hãy cài đặt TypeScript:

  1. Mở terminal hoặc command prompt.
  2. Gõ lệnh sau và nhấn Enter:
npm install -g typescript

Lệnh này告诉 npm (Node Package Manager) cài đặt TypeScript trên toàn hệ thống của bạn. Sau khi hoàn tất, bạn có thể xác minh cài đặt bằng cách gõ:

tsc -v

Nếu bạn thấy số phiên bản, bạn đã sẵn sàng!

Hỗ trợ IDE

Bây giờ chúng ta đã cài đặt các công cụ cốt lõi, đã đến lúc chọn không gian làm việc của chúng ta - Môi trường Phát triển Tích hợp (IDE). Hãy tưởng tượng IDE như là cây kéo đa năng của bạn cho việc lập trình. Đây là nơi bạn sẽ viết, gỡ lỗi và chạy mã TypeScript của mình.

Visual Studio Code

Đây là lựa chọn cá nhân yêu thích của tôi (và cũng là lựa chọn tôi khuyến nghị cho tất cả học sinh của mình) là Visual Studio Code (VS Code). Nó miễn phí, mạnh mẽ và có hỗ trợ xuất sắc cho TypeScript ngay từ khi cài đặt.

Để thiết lập VS Code:

  1. Truy cập trang web VS Code (https://code.visualstudio.com/).
  2. Tải xuống và cài đặt phiên bản cho hệ điều hành của bạn.
  3. Sau khi cài đặt, mở VS Code.

VS Code có hỗ trợ TypeScript tích hợp sẵn, nhưng hãy chắc chắn rằng nó đang sử dụng phiên bản đã cài đặt của chúng ta:

  1. Tạo một tệp mới và lưu nó với phần mở rộng .ts (ví dụ: hello.ts).
  2. Gõ mã sau:
let message: string = "Hello, TypeScript!";
console.log(message);
  1. Nhấn Ctrl + Shift + B (hoặc Cmd + Shift + B trên Mac) để mở menu Build Task.
  2. Chọn "tsc: build - tsconfig.json".
  3. Nếu được yêu cầu tạo tệp tsconfig.json, chọn "Yes".

Điều này sẽ tạo một tệp tsconfig.json trong thư mục dự án của bạn,告知 TypeScript cách biên dịch mã của bạn. Bạn có thể tùy chỉnh tệp này sau này khi bạn quen thuộc hơn với TypeScript.

Brackets

Mặc dù VS Code là lựa chọn hàng đầu của tôi, một số học sinh của tôi thích Brackets, đặc biệt là những người đến từ nền tảng thiết kế web. Brackets nhẹ và tập trung vào các công nghệ web.

Để thiết lập Brackets cho TypeScript:

  1. Tải xuống và cài đặt Brackets từ trang web chính thức (http://brackets.io/).
  2. Mở Brackets và đi tới File > Extension Manager.
  3. Tìm kiếm "TypeScript" và cài đặt_extension "Brackets TypeScript".
  4. Khởi động lại Brackets sau khi cài đặt.

Bây giờ bạn có thể tạo các tệp .ts và bắt đầu lập trình bằng TypeScript!

Các Phương pháp và Công cụ Hữu ích

Dưới đây là bảng các phương pháp và công cụ hữu ích mà bạn sẽ gặp khi bắt đầu hành trình TypeScript của mình:

Phương pháp/Công cụ Mô tả Ví dụ
tsc Lệnh biên dịch TypeScript tsc hello.ts biên dịch hello.ts thành hello.js
tsc --watch Giám sát thay đổi tệp và tự động biên dịch tsc --watch hello.ts
npm init Khởi tạo dự án Node.js mới Chạy npm init trong thư mục dự án
tsconfig.json Tệp cấu hình cho biên dịch TypeScript Xác định các tùy chọn biên dịch và cài đặt dự án
console.log() In kết quả ra console console.log("Hello, World!");
node Chạy các tệp JavaScript node hello.js chạy tệp JS đã biên dịch

Lưu ý, những điều này chỉ là cơ bản. Khi bạn tiến hóa, bạn sẽ khám phá nhiều công cụ và phương pháp thú vị hơn!

Kết thúc

Uf! Chúng ta đã bao quát rất nhiều nội dung hôm nay, từ việc cài đặt Node.js đến việc thiết lập IDE. Nó có thể cảm thấy hơi áp lực ban đầu, nhưng tin tôi đi, với sự gyak, tất cả sẽ trở thành bản năng thứ hai.

Tôi nhớ khi tôi lần đầu tiên bắt đầu lập trình, tôi đã dành hàng giờ chỉ để thiết lập môi trường của mình một cách chính xác. Bây giờ, nó tự nhiên như việc pha cà phê buổi sáng (mà, để nói实话, là một phần quan trọng của bất kỳ buổi lập trình nào!).

Trong bài học tiếp theo, chúng ta sẽ viết chương trình TypeScript đầu tiên và khám phá một số tính năng độc đáo của ngôn ngữ này. Đến那时, chúc bạn lập trình vui vẻ và may mắn với các dấu phẩy than!

Credits: Image by storyset