TypeScript đang trở thành một trong những ngôn ngữ lập trình phổ biến nhất cho các tổ chức hiện đại.
TypeScript là một siêu ký tự JavaScript được biên dịch và gõ (được xây dựng dựa trên JavaScript). Được phát triển và duy trì bởi Microsoft, ngôn ngữ được gõ tĩnh này hỗ trợ các khái niệm hướng đối tượng như tập hợp con của nó, JavaScript.
Ngôn ngữ lập trình nguồn mở này có nhiều mục đích sử dụng như phát triển ứng dụng web, ứng dụng quy mô lớn và ứng dụng di động. TypeScript có thể được sử dụng để phát triển front-end và back-end. Nó cũng có nhiều khung và thư viện khác nhau giúp đơn giản hóa việc phát triển và mở rộng các trường hợp sử dụng.
Tại sao nên sử dụng TypeScript với Node.js? Trong bài viết này, chúng ta sẽ thảo luận tại sao TypeScript được coi là “tốt hơn” so với JavaScript, cách cài đặt nó với Node.js, định cấu hình nó và tạo một chương trình nhỏ với TypeScript và Node.js.
TypeScript với Node.js: Lợi ích
- Nhập tĩnh tùy chọn: JavaScript được nhập động, có nghĩa là kiểu dữ liệu của biến được xác định trong thời gian chạy chứ không phải thời gian biên dịch. Mặt khác, TypeScript cung cấp kiểu gõ tĩnh tùy chọn, có nghĩa là khi một biến được khai báo, nó sẽ không thay đổi kiểu và sẽ chỉ nhận một số giá trị nhất định.
- Khả năng dự đoán: Khi bạn làm việc với TypeScript, bạn được đảm bảo rằng mọi thứ bạn xác định sẽ giữ nguyên. Ví dụ: nếu bạn khai báo một biến cụ thể là boolean, nó sẽ không bao giờ biến thành một chuỗi trong quá trình thực hiện. Là nhà phát triển, bạn được đảm bảo rằng các tính năng của bạn sẽ được giữ nguyên.
- Dễ dàng phát hiện lỗi sớm: TypeScript phát hiện sớm hầu hết các lỗi văn bản, do đó khả năng chúng được chuyển sang sản xuất là thấp. Điều này làm giảm thời gian các kỹ sư dành để kiểm tra mã ở các giai đoạn sau.
- Được hỗ trợ trong hầu hết các IDE: TypeScript hoạt động với hầu hết các môi trường phát triển tích hợp (IDE). Hầu hết các IDE này đều cung cấp tính năng hoàn thiện mã và tô sáng cú pháp. Bài viết này sẽ sử dụng Visual Studio Code, một sản phẩm khác của Microsoft.
- Tái cấu trúc mã dễ dàng: Bạn có thể cập nhật hoặc cấu trúc lại ứng dụng TypeScript của mình mà không thay đổi hành vi của nó. Sự hiện diện của các công cụ điều hướng và IDE hiểu mã của bạn giúp bạn dễ dàng cấu trúc lại cơ sở mã của mình một cách dễ dàng.
- Sử dụng các gói hiện có: Bạn không phải tạo mọi thứ từ đầu; bạn có thể sử dụng các gói NPM hiện có với TypeScript. Ngôn ngữ này cũng có một cộng đồng mạnh mẽ duy trì và tạo định nghĩa kiểu cho các gói phổ biến.
Cách sử dụng TypeScript với Node.js
Mặc dù TypeScript có những ưu điểm này nhưng các trình duyệt hiện đại không thể đọc mã của nó ở dạng thuần túy. Do đó, mã TypeScript trước tiên phải được dịch sang JavaScript để hoạt động trên trình duyệt. Mã kết quả sẽ có chức năng tương tự như mã TypeScript ban đầu, cộng thêm chức năng bổ sung không có trong JavaScript.
Điều kiện tiên quyết
- Node.js: Node là thời gian chạy đa nền tảng cho phép mã JavaScript chạy bên ngoài môi trường trình duyệt. Bạn có thể kiểm tra xem nút đã được cài đặt trên máy của mình chưa bằng lệnh này;
nút -v
Nếu không, bạn có thể tải xuống Node.js từ trang web chính thức. Chạy lại lệnh trên sau khi cài đặt để xác minh rằng nó đã được cấu hình đúng.
- Trình quản lý gói nút: Bạn có thể sử dụng NPM hoặc Sợi. Cái trước được cài đặt theo mặc định khi cài đặt Node.js. Đối với bài viết này, chúng tôi sẽ sử dụng NPM làm trình quản lý gói. Sử dụng lệnh này để kiểm tra phiên bản hiện tại của nó;
npm -v
Cài đặt TypeScript với Node.js
Bước chân 1: Cấu hình thư mục dự án
Chúng ta sẽ bắt đầu bằng cách tạo một thư mục dự án cho dự án TypeScript. Bạn có thể đặt cho thư mục này bất kỳ tên nào bạn muốn. Bạn có thể sử dụng các lệnh này để bắt đầu;
nút bản thảo mkdir
nút bản ghi cd
Bước chân 2: Khởi tạo dự án
Sử dụng npm để khởi tạo dự án bằng lệnh này;
npm init -y
Lệnh trên sẽ tạo một tệp pack.json. Cờ -y trong lệnh yêu cầu npm bao gồm các giá trị mặc định. Tệp được tạo sẽ có kết quả tương tự.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}Định cấu hình TypeScript với Node.js
Bước chân 1: Cài đặt trình biên dịch TypeScript
Bây giờ bạn có thể cài đặt trình biên dịch TypeScript trong dự án của mình. Chạy lệnh này;
cài đặt npm –save-dev bản thảo
Đầu ra trên dòng lệnh sẽ tương tự như thế này;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Lưu ý: Cách tiếp cận trên sẽ cài đặt TypeScript cục bộ trong thư mục của dự án bạn đang thực hiện. Bạn có thể cài đặt TypeScript trên toàn hệ thống của mình, do đó bạn không cần phải cài đặt nó mỗi khi làm việc trong một dự án. Sử dụng lệnh này để cài đặt TypeScript trên toàn cầu;
npm install -g typescript
Bạn có thể kiểm tra xem TypeScript đã được cài đặt chưa bằng lệnh này;
tsc -v
Bước chân 2: Thêm các loại Ambient Node.js cho TypeScript
TypeScript có nhiều loại khác nhau như Ẩn, Rõ ràng và Môi trường xung quanh. Các loại môi trường luôn được thêm vào phạm vi thực thi toàn cầu. Sử dụng lệnh này để thêm các loại môi trường;
cài đặt npm @types/node –save-dev
Bước chân 3: Tạo tệp tsconfig.json
Đây là tệp cấu hình chỉ định tất cả các tùy chọn biên dịch TypeScript. Chạy lệnh này có một số tùy chọn xây dựng được xác định trước;
npx tsc --init --rootDir src --outDir build \ --esModuleInterop --resolveJsonModule --lib es6 \ --module commonjs --allowJs true --noImplicitAny true
Điều này sẽ được hiển thị trên thiết bị đầu cuối;
Một tệp tsconfig.json sẽ được tạo có chứa một số giá trị và nhận xét mặc định.
tập tin tsconfig.json
Đây là những gì chúng tôi đã cấu hình:
- Thư mục gốc là nơi TypeScript sẽ tìm mã của chúng ta. Chúng tôi đã hướng nó đến thư mục /src nơi chúng tôi sẽ viết mã của mình.
- Thư mục outDir chỉ định nơi đặt mã đã biên dịch. Mã như vậy được cấu hình để lưu trữ trong thư mục build/.
Sử dụng TypeScript với Node.js
Bước chân 1: Tạo thư mục src và tệp index.ts
Bây giờ chúng ta có thiết lập cơ bản. Bây giờ chúng ta có thể tạo một ứng dụng TypeScript đơn giản và biên dịch nó. Phần mở rộng tệp TypeScript là .ts. Chạy các lệnh này trong thư mục mà chúng tôi đã tạo ở các bước trước;
mkdir src
nhấn vào src/index.ts
Bước chân 2: Thêm mã vào tệp TypeScript (index.ts)
Bạn có thể bắt đầu với những điều đơn giản như;
console.log('Hello world!')Bước chân 3: Biên dịch mã TypeScript thành mã JavaScript
Chạy lệnh này;
npx tsc
Bạn có thể kiểm tra thư mục bản dựng (build/index.js) và bạn sẽ thấy tệp index.js được tạo với đầu ra này;
TypeScript đã được biên dịch thành mã JavaScript.
Bước chân 4: Chạy mã JavaScript đã biên dịch
Lưu ý rằng mã TypeScript không thể chạy trên trình duyệt. Bằng cách này, chúng ta sẽ chạy mã trong index.js trong thư mục bản dựng. Chạy lệnh này;
node build/index.js
Đây sẽ là lối thoát;
Bước chân 5: Định cấu hình TypeScript để tự động biên dịch sang JavaScript
Việc biên dịch mã TypeScript theo cách thủ công mỗi khi bạn thay đổi tệp TypeScript có thể gây lãng phí thời gian. Bạn có thể cài đặt ts-node (chạy mã TypeScript trực tiếp mà không cần chờ biên dịch) và nodemon (kiểm tra mã của bạn để biết các thay đổi và tự động khởi động lại máy chủ).
Chạy lệnh này;
npm install --save-dev ts-node nodemon
Sau đó, bạn có thể truy cập tệp pack.json của mình và thêm tập lệnh này;
"scripts": {
"start": "ts-node ./src/index.ts"
}Chúng ta có thể sử dụng khối mã mới cho mục đích trình diễn;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))Xóa tệp index.js (/build/index.js) và chạy npm start.
Kết quả của bạn sẽ tương tự như thế này;
Tổng 3 con số
Định cấu hình Linting TypeScript với eslint
Bước chân 1: Cài đặt eslint
Linting có thể hữu ích nếu bạn muốn giữ mã của mình nhất quán và phát hiện lỗi trước khi chạy. Cài đặt eslint bằng lệnh này;
npm install --save-dev eslint
Bước chân 2: Khởi tạo eslint
Bạn có thể khởi tạo eslint bằng lệnh này;
npx eslint --init
Quá trình khởi tạo sẽ đưa bạn qua một số bước. Sử dụng ảnh chụp màn hình bên dưới để hướng dẫn bạn thực hiện;
Sau khi quá trình hoàn tất, bạn sẽ thấy một tệp có tên .eslintrc.js có nội dung tương tự như sau;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}Bước chân 3: Bắt đầu eslint
Chạy lệnh này để kiểm tra và xóa tất cả các tệp .ts;
npx eslint . --ext .ts
Bước chân 4: Cập nhật tệp pack.json
Thêm tập lệnh tìm lỗi mã nguồn vào tệp này để tự động tìm lỗi mã nguồn.
"scripts": {
"lint": "eslint . --ext .ts",
},TypeScript với Node.js: cách thực hành tốt nhất
- Cập nhật TypeScript: Các nhà phát triển TypeScript luôn phát hành các phiên bản mới. Đảm bảo bạn đã cài đặt phiên bản mới nhất trên thư mục máy tính/dự án của mình và tận dụng các tính năng mới cũng như sửa lỗi.
- Bật chế độ nghiêm ngặt: Có thể phát hiện các lỗi lập trình phổ biến tại thời điểm biên dịch bằng cách bật chế độ nghiêm ngặt trong tệp tsconfig.json. Điều này sẽ giảm thời gian gỡ lỗi dẫn đến năng suất cao hơn.
- Bật kiểm tra null nghiêm ngặt: Bạn có thể phát hiện tất cả các lỗi null và không xác định tại thời điểm biên dịch bằng cách bật kiểm tra null nghiêm ngặt trong tệp tsconfig.json.
- Sử dụng trình soạn thảo mã hỗ trợ TypeScript: Có rất nhiều trình soạn thảo mã hiện có. Bạn nên chọn các trình soạn thảo mã như VS Code, Sublime Text hoặc Atom hỗ trợ TypeScript thông qua plugin.
- Sử dụng các loại và giao diện: Với các loại và giao diện, bạn có thể xác định các loại tùy chỉnh mà bạn có thể sử dụng lại trong suốt dự án của mình. Cách tiếp cận này sẽ làm cho mã của bạn trở nên mô-đun hơn và dễ bảo trì hơn.
Bản tóm tắt
Bây giờ bạn đã có cấu trúc cơ bản của một ứng dụng được xây dựng bằng TypeScript trong Node.js. Bây giờ bạn có thể sử dụng các gói Node.js thông thường, nhưng bạn vẫn có thể viết mã của mình bằng TypeScript và tận hưởng tất cả các tính năng bổ sung đi kèm với TypeScript.
Nếu bạn chưa quen với TypeScript, hãy đảm bảo bạn hiểu sự khác biệt giữa TypeScript và JavaScript.
