Typescript như đứa em đang dần mạnh mẽ lên với sự hưởng ứng của cộng đồng dev javascript. Và trong nodejs typescript cũng đang dần được lập trình viên ưu ái cho việc sử dụng nó.

Cài đặt chương trình nodejs sử dụng code typescript và express

2022-03-03 441 lượt xem
Cao Thị Ngọc

Khuyến cáo bài này không dành cho bạn nào chưa biết nodejs. Đọc khó hiểu vãi lúa ra. Và bạn nào pro cho mình xin bớt chút gạch đá :D

Xu hướng

Các dev code js chắc cũng đã từng nghe qua typescript rồi. Nó là 1 dự án mã nguồn mở được phát triển bởi microsoft và đang là trend tại thời điểm 2022. Và với việc viết code nodejs đôi khi bạn cũng muốn ràng buộc các vấn đề trong javascript để dự án bạn có khả năng mở rộng hơn. Và mình quyết định viết bài này để cùng các bạn viết vài đoạn code của nodejs sử dụng typescript và express làm api.

Khởi tạo project

khởi tạo một project Node.js mới với file package.json mặc định

npm init -y

Cài đặt các dependeccy

trong nội dung bài viết ít ỏi này mình có dùng express dotenv cors helmet kết hợp với typescript, @types/node Nên mình dụng lệnh sau: 

npm i express dotenv cors helmet
npm i --save-dev @types/node @types/express @types/dotenv @types/cors @types/helmet typescript 

Trong đó: 

  • Express: Một framework nhanh, gọn, nhẹ cho Node.js.
  • Dotenv: Dotenv là một module Zero-dependency, nó load các biến môi trường từ file .env vào process.env.
  • CORS: Một middleware Express. Các bạn có thể tham khảo ở đây.
  • Helmet: Một middleware Express, bảo mật các ứng dụng bằng cách setting các HTTP headers khác nhau, giúp giảm thiểu các attack vectors phổ biến.

Ngoài ra khi bạn sử dụng nodejs với typescript thì đôi khi sẽ gặp tình huống một package không có các loại build-in, bạn có thể cài đặt định nghĩa kiểu thông qua @types npm namespace - nơi lưu trữ các định nghĩa kiểu của TypeScript trong project DefiniteTyped. Khi các package được cài đặt, các types sẽ tự động được compiler của TypeScript include vào.

Bạn còn thiếu 1 thứ không quan trọng mấy là ts-node 😄 Cái này thì khi bạn muốn chạy nodejs thì chạy node index.js nhưung với typescript thì dùng lệnh khác là ts-node index.ts nên phải cài: 

npm i -D ts-node

Khởi tạo TypeScript với Node.js

Để giúp compiler của TypeScript hiểu cấu trúc project, cần tạo file tsconfig.json trong folder project bằng câu lệnh sau

npx tsc --init

Đó là tất cả những gì bạn cần để định configure project này với các giá trị mặc định. Tiếp theo là bạn nên cấu hình mọi code của chúng ta nằm trong thư mục src như file config đã được định nghĩa: 

# tạo folder src
mkdir src
# tạo file index.ts trong src
touch src/index.ts

Tiếp theo tạo biến môi trường: 

touch .env

nội dung: 

PORT=4000 

Tạo biến môi trường xong thường không push lên git nên sẵn tạo luôn file gitignore:

touch .gitignore 

Nội dung:

.env
node_modules

Cuối cùng file package.json sửa script như sau: 

Mình có thêm cái khúc watch-ts để mục đích là chạy terminal cái đó nó sẽ đứng lắng nghe sự thay đổi của folder src, chỉ cần có thay đổi là nó sẽ build code folder src thành folder dist với mã code js. Nếu không build được như mình nói bạn hãy vào file tsconfig.json sửa lại 2 thông số sau: 

Mình hay dùng yarn nên sẽ gọi yarn watch-ts. Nếu bạn dùng npm thì dùng npm watch-ts để lắng nghe code typescript sẽ build khi src thay đổi.

Xong! Còn lại là build code nodejs trong dist bằng nodemon thôi 😄 

Build code nodejs qua nodemon

npm i --save-dev nodemon
npm i -g nodemon

sau khi cài xong nodemon thì chúng ta update lại file package.json đoạn script như dưới: 

{
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "node dist/index.js",
    "server": "nodemon dist/index.js",
    "start-ts": "ts-node src/index.ts",
    "server-ts": "nodemon --exec ts-node src/index.ts",
    "watch": "tsc -w"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.21",
    "nodemon": "^2.0.15",
    "ts-node": "^10.6.0",
    "typescript": "^4.6.2"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "helmet": "^5.0.2"
  }
}

sau đó chạy 2 terminal với 2 lệnh: 

# lắng nghe thay đổi ts và build ra file js trong folder dist
npm watch # hoặc yarn watch
# khi folder dist mà được build thì nhờ nodemon chạy hot reload
npm server # hoặc yarn server 

Code file index.ts

/**
 * Required External Modules
 */
import * as dotenv from "dotenv";
import express from "express";
import cors from "cors";
import helmet from "helmet";

dotenv.config();

/**
 * App Variables
 */
const PORT: number = parseInt((process.env.PORT as string) || '3000', 10);

const app = express();
/**
 *  App Configuration
 */
app.use(helmet());
app.use(cors());
app.use(express.json());
/**
 * Server Activation
 */
const server = app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}`);
});

Xong! Chúc các bạn thành công 

những tag
bài viết trong chủ đề