---
title: "Cách Thiết Lập Dự Án Node Với Typescript"
description: "Node là một môi trường runtime cho phép viết JavaScript phía server. Nó đã được áp dụng rộng rãi kể từ khi phát hành năm 2011. Việc viết JavaScript phía server có thể gặp khó khăn khi codebase phát triển do tính chất động và kiểu dữ liệu yếu của ngôn ngữ JavaScript. Các nhà phát triển đến với JavaScript từ các ngôn ngữ khác thường phàn nàn về việc thiếu kiểu tĩnh mạnh, nhưng đây là lúc TypeScript xuất hiện để lấp đầy khoảng trống này. TypeScript là một siêu tập có kiểu (tuỳ chọn) của JavaScript, giúp xây dựng và quản lý các dự án JavaScript quy mô lớn. Nó có thể được coi như JavaScript với các tính năng bổ sung như kiểu tĩnh mạnh, biên dịch và lập trình hướng đối tượng. Dưới đây là một số lợi ích khi sử dụng TypeScript: 1. Kiểu tĩnh tuỳ chọn. 2. Suy luận kiểu. 3. Khả năng sử dụng Interface. Trong hướng dẫn này, bạn sẽ thiết lập một dự án Node với TypeScript. Bạn sẽ xây dựng một ứng dụng Express sử dụng TypeScript và chuyển đổi nó thành mã JavaScript."
url: https://cloudfly.vn/cach-thiet-lap-du-an-node-voi-typescript
image: https://media.cloudfly.vn/posts/cach-thiet-lap-du-an-node-voi-typescript.png
---

# Cách Thiết Lập Dự Án Node Với Typescript

![description image](https://media.cloudfly.vn/posts/cach-thiet-lap-du-an-node-voi-typescript.png)
## Yêu cầu trước

Trước khi bắt đầu hướng dẫn này, bạn cần cài đặt Node.js trên hệ thống của mình.  Để phù hợp với hệ điều hành.

Lưu ý: Các bước này áp dụng cho các phiên bản Ubuntu mới nhất: Ubuntu 24.04, Ubuntu 22.04 và Ubuntu 20.04. Nếu bạn đang dùng phiên bản Ubuntu <= 18.04, khuyến nghị nâng cấp lên phiên bản mới hơn vì Ubuntu không còn hỗ trợ các phiên bản cũ.

## Bước 1 — Khởi tạo Dự án

Để bắt đầu, tạo một thư mục mới tên là `node_project` và truy cập vào thư mục đó:

```bash
mkdir node_project
cd node_project
```

Sau đó, khởi tạo dự án npm:

```bash
npm init -y
```

Cờ `-y` cho phép `npm init` tự động chấp nhận mặc định. Bạn có thể chỉnh sửa thông tin này sau trong file `package.json`.

## Bước 2 — Cấu hình Trình Biên Dịch TypeScript

Bây giờ dự án npm đã được khởi tạo, bạn sẵn sàng cài đặt và cấu hình TypeScript.

Chạy lệnh sau trong thư mục dự án để cài đặt TypeScript:

```bash
npm install --save-dev typescript
```

Kết quả:
```
added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities
```

TypeScript sử dụng file `tsconfig.json` để cấu hình các tùy chọn trình biên dịch cho dự án. Tạo file `tsconfig.json` trong thư mục gốc dự án:

```bash
nano tsconfig.json
```

Sau đó dán đoạn JSON sau vào:

```json
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}
```

Giải thích một số key trong JSON trên:

- `module`: Chỉ định phương pháp tạo module. Node sử dụng `commonjs`.
- `target`: Chỉ định cấp độ ngôn ngữ đầu ra.
- `moduleResolution`: Giúp trình biên dịch hiểu được các import. Giá trị `node` mô phỏng cơ chế phân giải module của Node.
- `outDir`: Nơi lưu các file `.js` sau khi biên dịch. Hướng dẫn này xuất ra thư mục `dist`.

Để tìm hiểu thêm về các tùy chọn, tài liệu chính thức [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/compiler-options.html) giải thích chi tiết.

## Bước 3 — Tạo Server Express TypeScript Tối Giản

Tiếp theo, cài đặt framework [Express](https://expressjs.com/) và tạo server đơn giản:

```bash
npm install --save express@4.17.1
npm install --save-dev @types/express@4.17.1
```

Lệnh thứ hai cài đặt các _type_ cho Express hỗ trợ TypeScript. Types trong TypeScript là các file, thường có đuôi `.d.ts`, cung cấp thông tin kiểu cho API, ở đây là Express.

Gói này cần thiết vì TypeScript và Express là các gói riêng biệt. Nếu không có `@types/express`, TypeScript không thể biết kiểu của các class trong Express.

Tạo thư mục `src` trong thư mục gốc dự án:

```bash
mkdir src
```

Tạo file TypeScript `app.ts` trong đó:

```bash
nano src/app.ts
```

Mở `app.ts` bằng trình soạn thảo văn bản bạn chọn và dán đoạn code sau:

```typescript
import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`Express is listening at http://localhost:${port}`);
});
```

Đoạn mã trên tạo một server Node lắng nghe cổng `3000` cho các yêu cầu. Để chạy ứng dụng, bạn cần biên dịch sang JavaScript:

```bash
npx tsc
```

Lệnh này sử dụng file cấu hình đã tạo để biên dịch code và lưu kết quả. Ở đây, mã JavaScript được xuất vào thư mục `dist`.

Chạy file JavaScript:

```bash
node dist/app.js
```

Nếu chạy thành công, bạn sẽ thấy thông báo:

```bash
Express is listening at http://localhost:3000
```

Bây giờ, truy cập `http://localhost:3000` trên trình duyệt, bạn sẽ thấy thông báo:

```bash
Hello World!
```

Mở file `dist/app.js` sẽ thấy phiên bản JavaScript được biên dịch từ TypeScript.

Bạn đã thiết lập dự án Node sử dụng TypeScript thành công. Tiếp theo, bạn sẽ cấu hình eslint để kiểm tra lỗi code TypeScript.

## Bước 4 — Cấu hình Kiểm tra Code Typescript với eslint

Bây giờ bạn có thể cấu hình eslint cho dự án. Đầu tiên, cài đặt `eslint`:

```bash
npm install --save-dev eslint
```

Chạy lệnh khởi tạo eslint để thiết lập tương tác:

```bash
npm init @eslint/config@latest
```

Trả lời các câu hỏi sau cho dự án:

- Bạn muốn sử dụng ESLint như thế nào?: Kiểm tra cú pháp và tìm lỗi
- Dự án sử dụng loại module nào?: JavaScript modules (import/export)
- Dự án sử dụng framework nào?: Không
- Dự án có sử dụng TypeScript không?: Có
- Mã của bạn chạy ở đâu?: Node
- Muốn cấu hình dưới định dạng nào?: JavaScript

Nhấn Yes để cài thêm thư viện eslint phụ trợ. Kết quả là file cấu hình sau sẽ được tạo:

```js
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
}
```

Chạy linter kiểm tra các file có đuôi `.ts`:

```bash
npx eslint . --ext .ts
```

Bạn đã thiết lập eslint để kiểm tra cú pháp TypeScript. Tiếp theo, bạn sẽ cập nhật cấu hình npm để thêm các script tiện lợi cho việc kiểm tra và chạy dự án.

## Bước 5 — Cập nhật File `package.json`

Bạn có thể định nghĩa các tác vụ thường chạy trong npm scripts. Các script này định nghĩa trong `package.json` và chạy bằng lệnh `npm run tên_script`.

Trong bước này, bạn thêm script `start` để biên dịch TypeScript và chạy ứng dụng JavaScript kết quả.

Bạn cũng thêm script `lint` để chạy eslint kiểm tra các file TypeScript.

Mở `package.json` và cập nhật như sau:

```json
{
  "name": "node_project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.3.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}
```

Trong đoạn trên, bạn đã cập nhật đường dẫn `main` đến file biên dịch và thêm các lệnh `start` và `lint`.

Lệnh `start` đầu tiên chạy `tsc` để biên dịch, sau đó chạy `node` để khởi động ứng dụng.

Lệnh `lint` giống như bước trước, không cần tiền tố `npx`.

## Kết luận

Trong hướng dẫn này, bạn đã tìm hiểu lý do vì sao TypeScript hữu ích trong viết mã JavaScript đáng tin cậy. Bạn cũng đã biết một số lợi ích khi làm việc với TypeScript.

Cuối cùng, bạn đã thiết lập dự án Node với framework Express, biên dịch và chạy dự án với TypeScript.