Hướng dẫn Khởi tạo dự án Typescript với VSCode

Bài viết này, mình sẽ hướng dẫn chi tiết các bạn cách để khởi tạo một dự án TypeScript từ đầu với Visual Studio Code (VSCode).

1. Cài đặt Node.js, VSCode

1.1 Cài đặt Nodejs

Trước khi bắt đầu với Typescript thì bạn phải cài đặt Nodejs và npm - công cụ cần thiết để quản lý các gói (packages) và chạy các lệnh cần thiết trong dự án TypeScript.

Nếu như các bạn chưa biết cài đặt Nodejs thì có thể xem lại bài viết mình hướng dẫn tại đây - trong bài viết hướng dẫn cài đặt, phần cài đặt nvm là optional nhé, các bạn nên sử dụng phiên bản có (LTS) phía sau, vì đó là phiên bản chạy ổn định.

Sau khi cài đặt xong, bạn có thể chạy lệnh sau để kiểm tra version

node -v
npm -v

1.2 Cài đặt VSCode

Mình để đường link hướng dẫn cài đặt VSCode tại đây, các bạn cứ làm theo hướng dẫn nhé. Sau khi cài đặt thành công, bạn có thể tìm và cài đặt các tiện ích như: ESLint, Prettier, TypeScript,... trong tab Extensions của VSCode (Ctrl+Shift+X).

2. Cài đặt Typescript

Sau khi đã cài đặt Nodejs, npm, và VSCode, bước tiếp theo là cài đặt TypeScript. Bạn có thể cài đặt TypeScript toàn cục (global) trên máy tính của mình bằng npm với lệnh sau:

npm install -g typescript

Nếu bạn gặp lỗi permission denied thì bạn cần phải cấp quyền, với windows bạn mở terminal bằng quyền Administrator, với macOS bạn thêm sudo phía trước câu lệnh là ok.

Sau khi cài đặt xong, kiểm tra version bằng lệnh:

tsc -v

Nếu bạn thấy hiển thị phiên bản của TypeScript như hình trên, điều đó có nghĩa là bạn đã cài đặt thành công.

3. Khởi tạo dự án với Typescript

Tới đây chắc hẳn các bạn sẽ đặt ra câu hỏi: "Vậy không thích cài đặt Typescript toàn cục có được không?" Hoàn toàn được và không có vấn đề gì nhé.

• Bước 1: Tạo một thư mục để chứa dự án của bạn

mkdir typescript-project-demo
cd typescript-project-demo

• Bước 2: Khởi tạo file package.json

Chạy lệnh sau để khởi tạo file package.json - quản lý các dependencies và scripts của dự án:

npm init -y

File package.json sẽ được tạo trong thư mục dự án với các thiết lập default:

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

• Bước 3: Cấu hình TypeScript với tsconfig.json

tsconfig.json là tệp cấu hình chính của TypeScript, định nghĩa cách TypeScript biên dịch code của bạn thành JavaScript.

Chạy lệnh tsc --init để tạo file tsconfig.json. File tsconfig.json sẽ được tạo ra với các cấu hình mặc định. Bên dưới là đoạn config của mình

{
  "compilerOptions": {
    "target": "es6", /* Chỉ định phiên bản JavaScript mà TypeScript sẽ biên dịch ra */
    "module": "commonjs", /* Sử dụng module CommonJS */
    "strict": true, /* Bật kiểm tra strict */
    "esModuleInterop": true, /* Hỗ trợ import/export ES Modules */
    "outDir": "./dist", /* Thư mục chứa các tệp JavaScript đã biên dịch */
    "rootDir": "./src", /* Thư mục gốc chứa tệp TypeScript */
    "skipLibCheck": true /* Bỏ qua kiểm tra các tệp khai báo thư viện */
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

• Bước 4: Tạo và chạy chương trình Typescript đầu tiên

Chạy lệnh mkdir src để tạo folder src chứa các tệp Typescript của bạn.

Sau đó, bạn chạy lệnh touch src/index.ts để tạo file index.ts trong folder src

Bạn có thể không chạy lệnh mà thao tác thẳng trên VSCode nha

Mở file index.ts vừa được tạo, bắt đầu với ngôn ngữ Typescript bằng đoạn mã đơn giản sau:

function hello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(hello("200Lab"));

• Bước 5: Biên dịch và chạy chương trình

Để biên dịch mã TypeScript thành JavaScript, chạy lệnh tsc

Lệnh này sẽ tạo ra thư mục dist chứa tệp index.js. Bạn có thể chạy file JavaScript đã biên dịch bằng lệnh:

node dist/index.js

Nếu bạn không muốn phải chạy các lệnh biên dịch và chạy mã TypeScript bằng tay, bạn có thể tự động hóa quy trình này bằng cách sử dụng script trong tệp package.json. Điều này sẽ giúp bạn thực hiện các bước một cách nhanh chóng chỉ với một lệnh duy nhất.

4. Thiết lập script trong package.json

Mở tệp package.json và thêm các script sau vào phần "scripts"

{
  "name": "typescript-project-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• "build": Chạy TypeScript compiler (tsc) để biên dịch mã nguồn TypeScript từ thư mục src vào thư mục dist.
• "start": Chạy mã JavaScript đã biên dịch bằng Node.js.
• "dev": Chạy TypeScript compiler trong chế độ watch, tự động biên dịch mã khi có thay đổi.

5. Chạy Typescript trực tiếp không cần chờ biên dịch thành Javascript

Ngoài ra, bạn có thể sử dụng ts-node - cách tiện lợi để chạy mã TypeScript trực tiếp mà không cần biên dịch thành mã JavaScript như trước đó mình đề cập.

ts-node cung cấp khả năng chạy mã TypeScript trong môi trường Nodejs, giúp bạn phát triển nhanh chóng mà không phải chờ quá trình biên dịch diễn ra.

Đầu tiên, bạn chạy lênh sau để cài đặt ts-node và typescript nếu chưa cài đặt:

npm install ts-node typescript --save-dev

Cập nhật lại file package.json

{
  "name": "typescript-project-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "dev": "ts-node src/index.ts",
    "build": "tsc",
    "start:build": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.5.4"
  }
}

"dev": Chạy mã TypeScript trực tiếp bằng ts-node

"build": Biên dịch mã TypeScript thành mã JavaScript và lưu vào thư mục dist.

"start:build": Chạy mã JavaScript đã biên dịch bằng Nodejs.

6. Tích hợp nodemon vào dự án Typescript

Nếu bạn chưa biết về nodemon thì mình nói ngắn gọn thế này,nodemon là công cụ giúp theo dõi các thay đổi trong mã nguồn và tự động khởi động lại ứng dụng Nodejs.

B1: Cài đặt nodemon bằng câu lệnh:

npm install -D nodemon

B2: Cập nhật lại package.json

{
  "name": "typescript-project-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "dev": "nodemon --watch src --exec ts-node src/index.ts",
    "build": "tsc",
    "start:build": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^3.1.4",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.4"
  }
}

B3: Chạy chương trình bằng lệnh npm run dev

Mặc dù bạn có thể sử dụng nodemon mà không cần file cấu hình nodemon.json, nhưng việc tạo file này sẽ giúp dự án của bạn trở nên rõ ràng và dễ quản lý hơn.

B1: Tạo file nodemon.json thư mục gốc của dự án.

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node src/index.ts"
}

• watch: chỉ định thư mục cần theo dõi sự thay đổi. Như cấu hình trên nodemon sẽ theo dõi thư mục src
• ext: định dạng các tệp cần theo dõi. Cấu hình trên chỉ theo dõi các tệp có phần mở rộng .ts (TypeScript)
• exec: lệnh thực thi khi có thay đổi. nodemon sẽ chạy ts-node src/index.ts khi có thay đổi.

B2: Cập nhật lại file package.json

{
  "name": "typescript-project-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "dev": "nodemon",
    "build": "tsc",
    "start:build": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^3.1.4",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.4"
  }
}

B3: Chạy lại chương trình với câu lệnh npm run dev. Kết quả như phần trên nhé!

7. Kết luận

Qua bài viết này, hy vọng bạn đã có thể dễ dàng áp dụng khởi tạo dự án Typescript của riêng bạn.

Các bài viết liên quan:

• ESLint là gì? Hướng dẫn cấu hình ESLint cho dự án Typescript
• Jest là gì? Hướng dẫn cấu hình Jest với Typescript
• Hướng dẫn Upload Images lên S3 sử dụng Typescript
• Thư viện Husky là gì? Đảm bảo chất lượng Code với Git Hooks và Husky