Hướng Dẫn Cài Đặt Node.js + TypeScript Để Triển Khai

Giới thiệu

Chào các bạn! Thời gian qua mình không đăng bài nào vì tập trung vào một dự án lớn. Tin tốt là dự án đã gần hoàn thành và mình sẽ sớm chia sẻ với các bạn. Mình rất cần ý kiến phản hồi từ các bạn, dù tốt hay xấu.

Khi bắt đầu một dự án với Node.js và TypeScript, mình thường quên một số thứ quan trọng như cấu hình tsconfig.json, các script trong package.json, và tại sao mình lại gặp hàng triệu lỗi Cannot find module hay Cannot use import statement. Thật sự mà nói, mình không nhớ rõ cách thiết lập và luôn có cảm giác thất vọng vì không thể nhớ mọi thứ.

Mục Lục

1. Khởi Tạo Dự Án
2. Cấu Hình tsconfig.json và package.json
3. Các Script Cần Thiết
4. Cài Đặt Thư Viện và Phụ Thuộc
5. Mẹo Triển Khai Trên Render
6. Kết Luận

1. Khởi Tạo Dự Án

Việc khởi tạo dự án rất đơn giản. Chúng ta sẽ làm như sau:

• Khởi tạo Node.js để tạo ra file package.json:

npm init -y

• Cài đặt TypeScript để tạo file tsconfig.json:

npx tsc --init

• Cấu trúc thư mục của dự án:

/project-root
  /src
    index.ts
  /dist
  package.json
  tsconfig.json
  .env
  .gitignore

Giải thích:

• src/: nơi chứa mã nguồn.
• dist/: nơi chứa mã JavaScript biên dịch.
• .env: chứa biến môi trường không được commit.
• .gitignore: nhớ bỏ qua node_modules, .env và dist/.

2. Cấu Hình tsconfig.json và package.json

Cấu hình TypeScript cơ bản:

{
  "extends": "@tsconfig/node22/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "target": "ES2022",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

Giải thích các tham số:

• extends: sử dụng cấu hình TypeScript tối ưu cho Node.js.
• outDir: nơi lưu trữ mã JavaScript biên dịch.
• rootDir: nơi chứa mã TypeScript.
• target: phiên bản JavaScript mục tiêu.
• module: kiểu module xuất ra (ESM hay CommonJS).
• strict: bật chế độ kiểm tra kiểu nghiêm ngặt.
• esModuleInterop: cho phép nhập khẩu mặc định hoạt động.
• skipLibCheck: bỏ qua kiểm tra kiểu cho node_modules.

Để Node.js nhận diện ESM, thêm dòng sau vào package.json:

"type": "module"

3. Các Script Cần Thiết

Trong package.json, các script sẽ như sau:

"scripts": {
  "dev": "concurrently \"tsc --watch\" \"nodemon\"",
  "build": "tsc",
  "start": "node dist/index.js"
}

Giải thích:

• dev: vừa biên dịch mã vừa khởi động server tự động khi có thay đổi.
• build: biên dịch mã một lần trước khi triển khai.
• start: khởi động ứng dụng bằng mã JavaScript đã biên dịch.

4. Cài Đặt Thư Viện và Phụ Thuộc

Cần cài đặt cả thư viện và định nghĩa kiểu cho TypeScript:

npm install express dotenv cors jsonwebtoken bcryptjs cookie-parser mongoose zod multer

Cài đặt định nghĩa kiểu:

npm install -D @types/express @types/node @types/cors @types/jsonwebtoken @types/cookie-parser @types/multer @tsconfig/node22 concurrently nodemon

Đừng quên thêm file nodemon.json:

{
  "watch": ["dist"],
  "ext": ".js",
  "exec": "node dist/index.js"
}

5. Mẹo Triển Khai Trên Render

Khi triển khai ứng dụng trên Render, hãy nhớ các bước sau:

• Đầu tiên, đẩy dự án lên git.
• Chọn dịch vụ web và kết nối với kho git của bạn.
• Cấu hình lệnh build: npm install && npm run build.
• Cấu hình lệnh start: npm start.
• Cấu hình biến môi trường trong Render trước khi triển khai.

6. Kết Luận

Hy vọng bài viết này sẽ giúp bạn cấu hình máy chủ để triển khai mà không gặp lỗi. Việc cài đặt Node.js cùng TypeScript có thể khó khăn lúc đầu nhưng khi chia nhỏ từng bước, bạn sẽ thấy dễ dàng hơn. Đừng quên kiểm tra xem có file index.ts trong thư mục src không trước khi triển khai nhé! Nếu bạn thấy bài viết này hữu ích, hãy để lại ý kiến của bạn trong phần bình luận. Cảm ơn bạn đã đọc và hẹn gặp lại trong bài viết tiếp theo!