Làm thế nào để thiết lập một dự án node với các loại chỉ định

Node là một môi trường thời gian chạy giúp bạn có thể viết JavaScript phía server . Nó đã được chấp nhận rộng rãi kể từ khi được phát hành vào năm 2011. Viết JavaScript phía server có thể là một thách thức khi cơ sở mã phát triển do bản chất của ngôn ngữ JavaScript; động và đánh máy yếu .

---

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 nó thiếu tính năng gõ tĩnh mạnh mẽ, nhưng đây là lúc TypeScript xuất hiện để thu hẹp khoảng cách này.

TypeScript là một siêu tập JavaScript được đánh máy (tùy chọn) có thể giúp xây dựng và quản lý các dự án JavaScript quy mô lớn. Nó có thể được coi là JavaScript với các tính năng bổ sung như nhập tĩnh mạnh mẽ, biên dịch và lập trình hướng đối tượng.

Lưu ý: Về mặt kỹ thuật, TypeScript là một tập hợp siêu JavaScript, nghĩa là tất cả mã JavaScript đều là mã TypeScript hợp lệ.

Dưới đây là một số lợi ích của việc sử dụng TypeScript:

1. Nhập tĩnh tùy chọn.
2. Loại suy luận.
3. Khả năng sử dụng Giao diện.

Trong hướng dẫn này, bạn sẽ cài đặt một dự án Node với TypeScript. Bạn sẽ xây dựng một ứng dụng Express bằng TypeScript và chuyển nó thành mã JavaScript gọn gàng và tin cậy .

Yêu cầu

Trước khi bắt đầu hướng dẫn này, bạn cần cài đặt Node.js trên máy của bạn . Bạn có thể thực hiện điều này 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ộ cho hệ điều hành của bạn.

Bước 1 - Khởi tạo dự án npm

Để bắt đầu, hãy tạo một folder mới có tên node_project và chuyển vào folder đó.

mkdir node_project 
cd node_project 

Tiếp theo, khởi tạo nó dưới dạng một dự án npm:

npm init 

Sau khi chạy npm init , bạn cần cung cấp cho npm thông tin về dự án của bạn . Nếu bạn muốn để npm giả định các mặc định hợp lý, thì bạn có thể thêm cờ y để bỏ qua dấu nhắc để biết thêm thông tin:

npm init -y 

Bây giờ không gian dự án của bạn đã được cài đặt , bạn đã sẵn sàng để chuyển sang cài đặt các phụ thuộc cần thiết.

Bước 2 - Cài đặt phụ thuộc

Với một dự án npm trần được khởi tạo, bước tiếp theo là cài đặt các phụ thuộc được yêu cầu để chạy TypeScript .

Chạy các lệnh sau từ folder dự án của bạn để cài đặt các phần phụ thuộc:

npm install -D typescript@3.3.3 
npm install -D tslint@5.12.1 

Cờ -D là phím tắt cho: --save-dev . Bạn có thể tìm hiểu thêm về cờ này trong tài liệu npmjs .

Bây giờ, đã đến lúc cài đặt Express framework:

npm install -S express@4.16.4 
npm install -D @types/express@4.16.1 

Lệnh thứ hai cài đặt các loại Express để hỗ trợ TypeScript. Các loại trong TypeScript là các file , thường có phần mở rộng là .d.ts . Các file được sử dụng để cung cấp thông tin loại về một API, trong trường hợp này là khung Express.

Gói này là bắt buộc vì TypeScript và Express là các gói độc lập. Nếu không có gói @types/express , không có cách nào để TypeScript biết về các loại lớp Express.

Bước 3 - Cấu hình TypeScript

Trong phần này, bạn sẽ cài đặt TypeScript và cấu hình linting cho TypeScript. TypeScript sử dụng một file có tên tsconfig.json để cấu hình các tùy chọn trình biên dịch cho một dự án. Tạo file tsconfig.json trong folder root của folder dự án và paste vào đoạn mã sau:

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

Hãy xem qua một số khóa trong đoạn mã JSON ở trên:

• module : Chỉ định phương pháp tạo mã module . Node sử dụng commonjs .
• target : Chỉ định mức ngôn ngữ kết quả .
• moduleResolution : Điều này giúp trình biên dịch tìm ra những gì một nhập đề cập đến. Giá trị node bắt chước cơ chế giải quyết module Node.
• outDir : Đây là vị trí xuất ra các file .js sau khi chuyển đổi. Trong hướng dẫn này, bạn sẽ lưu nó dưới dạng dist .

Một giải pháp thay thế cho việc tạo và tsconfig.json file tsconfig.json theo cách thủ công là chạy lệnh sau:

tsc --init 

Lệnh này sẽ tạo một file tsconfig.json độc đáo.

Để tìm hiểu thêm về các tùy chọn giá trị chính có sẵn, tài liệu TypeScript chính thức cung cấp giải thích về mọi tùy chọn.

Đến đây bạn có thể cấu hình TypeScript linting cho dự án. Trong một terminal đang chạy trong folder root của folder dự án của bạn, mà hướng dẫn này đã cài đặt là node_project , hãy chạy lệnh sau để tạo file tslint.json :

./node_modules/.bin/tslint --init 

Mở file tslint.json mới được tạo và thêm luật no-console phù hợp:

{   "defaultSeverity": "error",   "extends": ["tslint:recommended"],   "jsRules": {},   "rules": {     "no-console": false   },   "rulesDirectory": [] } 

Theo mặc định, trình liên kết TypeScript ngăn chặn việc sử dụng gỡ lỗi bằng cách sử dụng các câu lệnh console , do đó cần phải thông báo rõ ràng cho trình liên kết để thu hồi luật no-console mặc định.

Bước 4 - Cập nhật file package.json

Tại thời điểm này trong hướng dẫn, bạn có thể chạy các chức năng trong terminal riêng lẻ hoặc tạo một tập lệnh npm để chạy chúng.

Trong bước này, bạn sẽ tạo một tập lệnh start để biên dịch và truyền mã TypeScript, sau đó chạy ứng dụng .js kết quả.

Mở file package.json và cập nhật nó cho phù hợp:

{   "name": "node-with-ts",   "version": "1.0.0",   "description": "",   "main": "dist/app.js",   "scripts": {     "start": "tsc && node dist/app.js",     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC",   "devDependencies": {     "@types/express": "^4.16.1",     "tslint": "^5.12.1",     "typescript": "^3.3.3"   },   "dependencies": {     "express": "^4.16.4"   } } 

Trong đoạn mã trên, bạn đã cập nhật đường dẫn main và thêm lệnh start vào phần tập lệnh . Khi nhìn vào lệnh start , bạn sẽ thấy rằng đầu tiên lệnh tsc được chạy, sau đó là lệnh node . Điều này sẽ biên dịch và sau đó chạy kết quả được tạo với node .

Lệnh tsc yêu cầu TypeScript biên dịch ứng dụng và đặt kết quả .js tạo trong folder outDir được chỉ định vì nó được đặt trong file tsconfig.json .

Bước 5 - Tạo và chạy một server Express cơ bản

Bây giờ TypeScript và linter của nó đã được cấu hình, đã đến lúc xây dựng một Node Express Server.

Đầu tiên, tạo một folder src trong folder root của folder dự án của bạn:

mkdir src 

Sau đó, tạo một file có tên app.ts trong đó:

touch src/app.ts 

Đến đây, cấu trúc folder sẽ giống như sau:

├── node_modules/ ├── src/   ├── app.ts ├── package-lock.json ├── package.json ├── tsconfig.json ├── tslint.json 

Mở file app.ts bằng editor bạn chọn và paste vào đoạn mã sau:

import express from 'express';  const app = express(); const port = 3000; app.get('/', (req, res) => {   res.send('The sedulous hyena ate the antelope!'); }); app.listen(port, err => {   if (err) {     return console.error(err);   }   return console.log(`server is listening on ${port}`); }); 

Đoạn mã trên tạo Node Server lắng nghe các yêu cầu trên cổng 3000 . Chạy ứng dụng bằng lệnh sau:

npm start 

Nếu nó chạy thành công, một thông báo sẽ được ghi vào terminal :

Output
server is listening on 3000 

Bây giờ, bạn có thể truy cập http://localhost:3000 trong trình duyệt của bạn và bạn sẽ thấy thông báo:

Output
The sedulous hyena ate the antelope! 

Mở file dist/app.js và bạn sẽ tìm thấy version chuyển đổi của mã TypeScript:

"use strict";  var __importDefault = (this && this.__importDefault) || function (mod) {     return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); const express_1 = __importDefault(require("express")); const app = express_1.default(); const port = 3000; app.get('/', (req, res) => {     res.send('The sedulous hyena ate the antelope!'); }); app.listen(port, err => {     if (err) {         return console.error(err);     }     return console.log(`server is listening on ${port}`); });  //# sourceMappingURL=app.js.map 

Đến đây, bạn đã cài đặt thành công dự án Node của bạn để sử dụng TypeScript.

Kết luận

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

Cuối cùng, bạn cài đặt một dự án Node bằng cách sử dụng khung Express, nhưng đã biên dịch và chạy dự án bằng TypeScript.

---

---

Các tin liên quan