- Việt Nam
English
Việt NamEnglish
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. Bạn có thể làm điều này bằng cách theo hướng dẫn Cách Cài Đặt Node.js và Tạo Môi Trường Phát Triển Cục Bộ 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ộ sưu tập hướng dẫn này sẽ giúp bạn nâng cấp phiên bản Ubuntu.
Để 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 đó:
mkdir node_project
cd node_project
Sau đó, khởi tạo dự án npm:
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â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:
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:
nano tsconfig.json
Sau đó dán đoạn JSON sau vào:
{
"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 giải thích chi tiết.
Tiếp theo, cài đặt framework Express và tạo server đơn giản:
npm install --save [email protected]
npm install --save-dev @types/[email protected]
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:
mkdir src
Tạo file TypeScript app.ts trong đó:
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:
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:
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:
node dist/app.js
Nếu chạy thành công, bạn sẽ thấy thông báo:
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:
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ây giờ bạn có thể cấu hình eslint cho dự án. Đầu tiên, cài đặt eslint:
npm install --save-dev eslint
Chạy lệnh khởi tạo eslint để thiết lập tương tác:
npm init @eslint/config@latest
Trả lời các câu hỏi sau cho dự án:
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:
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:
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.
package.jsonBạ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:
{
"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.
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.