Thiết lập TypeScript với Visual Studio Code

Visual Studio Code (VSCode) là trình soạn thảo mã mạnh mẽ và phổ biến, cung cấp hỗ trợ tuyệt vời cho phát triển TypeScript. Hướng dẫn này sẽ hướng dẫn bạn từng bước để thiết lập TypeScript trong VSCode, đảm bảo bạn có mọi thứ cần thiết để bắt đầu viết mã hiệu quả.

Cài đặt Visual Studio Code

Nếu bạn chưa cài đặt Visual Studio Code, hãy làm theo các bước sau:

1. Truy cập trang web chính thức của VSCode.
2. Tải xuống trình cài đặt phù hợp với hệ điều hành của bạn.
3. Chạy trình cài đặt và làm theo hướng dẫn trên màn hình để hoàn tất quá trình cài đặt.

Cài đặt Node.js và npm

TypeScript được quản lý thông qua npm (Node Package Manager), yêu cầu Node.js. Để cài đặt Node.js và npm:

1. Truy cập trang web chính thức của Node.js.
2. Tải xuống và cài đặt phiên bản LTS của Node.js, bao gồm npm.
3. Xác minh cài đặt bằng cách mở terminal và chạy node -v và npm -v để kiểm tra phiên bản của Node.js và npm.

Cài đặt TypeScript

Sau khi cài đặt Node.js và npm, giờ bạn có thể cài đặt TypeScript toàn cục. Mở terminal và chạy lệnh sau:

npm install -g typescript

Lệnh này cài đặt TypeScript trên toàn cầu, cho phép bạn sử dụng lệnh tsc để biên dịch các tệp TypeScript từ bất kỳ đâu trên hệ thống của bạn.

Thiết lập một dự án TypeScript

Để bắt đầu một dự án TypeScript mới, hãy làm theo các bước sau:

1. Tạo một thư mục mới cho dự án của bạn và điều hướng vào đó:

mkdir my-typescript-project
cd my-typescript-project

1. Khởi tạo một dự án npm mới:

npm init -y

1. Cài đặt TypeScript làm phụ thuộc phát triển:

npm install --save-dev typescript

1. Tạo tệp cấu hình TypeScript:

npx tsc --init

Lệnh này tạo tệp tsconfig.json trong thư mục dự án của bạn, chứa các thiết lập cấu hình cho trình biên dịch TypeScript.

Cấu hình VSCode cho TypeScript

VSCode có hỗ trợ TypeScript tích hợp sẵn, nhưng bạn có thể nâng cao trải nghiệm phát triển của mình bằng cách cấu hình trình chỉnh sửa:

Mở dự án của bạn

Mở dự án TypeScript của bạn trong VSCode:

1. Khởi chạy VSCode.
2. Chọn Tệp > Mở thư mục... và chọn thư mục dự án của bạn.

Cài đặt tiện ích mở rộng TypeScript

Mặc dù VSCode cung cấp hỗ trợ TypeScript tuyệt vời ngay khi cài đặt, bạn vẫn có thể cài đặt thêm các tiện ích mở rộng để nâng cao chức năng:

• Tiện ích mở rộng TypeScript: Cung cấp hỗ trợ ngôn ngữ TypeScript và các tính năng như IntelliSense, điều hướng mã, v.v.
• Đẹp hơn: Một tiện ích mở rộng để định dạng mã, đảm bảo phong cách mã nhất quán.

Cấu hình trình biên dịch TypeScript

Mở tệp tsconfig.json để cấu hình cài đặt trình biên dịch TypeScript. Sau đây là một ví dụ về cấu hình:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Cấu hình này đặt phiên bản ECMAScript mục tiêu thành ES6, chỉ định định dạng mô-đun CommonJS, cho phép kiểm tra kiểu nghiêm ngặt và đặt thư mục đầu ra thành ./dist. Nó cũng bao gồm các bản đồ nguồn để gỡ lỗi dễ dàng hơn.

Viết và chạy mã TypeScript

Tạo một tệp TypeScript mới trong thư mục src:

mkdir src
touch src/index.ts

Thêm một số mã TypeScript vào index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

Để biên dịch mã TypeScript của bạn, hãy chạy:

npx tsc

Lệnh này biên dịch các tệp TypeScript của bạn và xuất các tệp JavaScript vào thư mục dist.

Để chạy mã JavaScript đã biên dịch, hãy sử dụng:

node dist/index.js

Phần kết luận

Thiết lập TypeScript với Visual Studio Code là một quá trình đơn giản bao gồm cài đặt các công cụ cần thiết, cấu hình dự án của bạn và sử dụng các tính năng mạnh mẽ của VSCode. Bằng cách làm theo hướng dẫn này, bạn sẽ có một môi trường phát triển TypeScript đầy đủ chức năng và sẵn sàng xây dựng các ứng dụng mạnh mẽ với TypeScript.