Dynamic Duo cho Web Dev
TypeScript đang mở đường 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, được nhập chính xác (được xây dựng dựa trên ngôn ngữ JavaScript). Ngôn ngữ nhập tĩnh này do Microsoft phát triển và duy trì, 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 trường hợp sử dụng, chẳng hạn như tạo web, ứng dụng quy mô lớn và di động. TypeScript có thể được sử dụng để phát triển giao diện người dùng và phụ trợ. Nó cũng có nhiều khung và thư viện khác nhau giúp đơn giản hóa quá trình phát triển và mở rộng các trường hợp sử dụng của nó.
Tại sao nên sử dụng TypeScript với Node.js? Bài viết này sẽ thảo luận về lý do tại sao TypeScript được coi là “tốt hơn” so với JavaScript, cách cài đặt nó bằng Node.js, định cấu hình và tạo một chương trình nhỏ bằng 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, 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 trong thời gian biên dịch. Mặt khác, TypeScript cung cấp kiểu gõ tĩnh tùy chọn, nghĩa là khi bạn khai báo một biến, biến đó sẽ không thay đổi kiểu của nó và sẽ chỉ nhận một số giá trị nhất định.
- Khả năng dự đoán: Khi xử lý TypeScript, có sự đảm bảo rằng mọi thứ bạn xác định sẽ không thay đổi. Chẳng hạn, nếu bạn khai báo một biến nhất định là Boolean, thì nó không bao giờ có thể thay đổi 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 chức năng của mình 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 loại, vì vậy khả năng chuyển sang sản xuất của chúng là thấp. Điều này làm giảm thời gian các kỹ sư dành để kiểm tra mã trong các giai đoạn sau.
- Được hỗ trợ trên 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 cung cấp tính năng hoàn thiện mã và đánh dấu 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.
- Dễ cấu trúc lại mã: 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ã 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 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 đơn giản. Do đó, mã TypeScript trước tiên phải được phiên mã thành mã JavaScript để chạy trên trình duyệt. Mã kết quả sẽ có chức năng giống như mã TypeScript ban đầu và các chức năng bổ sung không có sẵn trong JavaScript.
điều kiện tiên quyết
- Node.js: Node là môi trường thời gian chạy đa nền tảng cho phép chạy mã JavaScript 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 để kiểm tra xem nó đã được cấu hình tốt chưa.
- 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 bạn cài đặt Node.js. Chúng tôi sẽ sử dụng NPM làm trình quản lý gói trong bài viết này. 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 1: Thiết lập thư mục dự án
Chúng tôi 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 theo ý thích của bạn. Bạn có thể sử dụng các lệnh này để bắt đầu;
nút bản thảo mkdir
cd typescript-nút
Bước 2: Khởi tạo dự án
Sử dụng npm để khởi tạo dự án của bạ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ó đầu ra 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 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 cho dự án của mình. Chạy lệnh này;
cài đặt npm –save-dev Typescript
Đầu ra trên dòng lệnh của bạn sẽ giống 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ộ trên thư mục dự án mà bạn đang làm việc. Bạn có thể cài đặt TypeScript trên toàn cầu trên hệ thống của mình, vì vậy bạn không phải cài đặt nó mỗi khi làm việc trên 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 2: Thêm các loại Ambient Node.js cho TypeScript
TypeScript có các loại khác nhau, chẳng hạn như Tiềm ẩn, Rõ ràng và Môi trường xung quanh. Các loại môi trường xung quanh luôn được thêm vào phạm vi thực thi chung. Sử dụng lệnh này để thêm các loại môi trường xung quanh;
cài đặt npm @types/node –save-dev
Bước 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 đi kèm với một số tùy chọn biên dịch được xác định;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Điều này sẽ được xuất ra trên thiết bị đầu cuối;
Tệp tsconfig.json chứa một số giá trị mặc định và nhận xét sẽ được tạo.
tập tin tsconfig.json
Đây là những gì chúng tôi đã cấu hình:
- RootDir 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 xác định nơi đặt mã đã biên dịch. Mã như vậy được định cấu hình để lưu trữ trong thư mục build/.
Sử dụng TypeScript với Node.js
Bước 1: Tạo thư mục src và tệp index.ts
Bây giờ chúng ta có cấu hình 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 cho tệp TypeScript là .ts. Chạy các lệnh này trong khi ở trong thư mục mà chúng ta đã tạo ở các bước trước;
mkdir src
chạm vào src/index.ts
Bước 2: Thêm mã vào tệp TypeScript (index.ts)
Bạn có thể bắt đầu với một cái gì đó đơn giản như;
console.log('Hello world!')
Bước 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 rằng một 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 4: Chạy mã JavaScript đã biên dịch
Hãy nhớ rằng mã TypeScript không thể chạy trên trình duyệt. Do đó, chúng tôi 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à đầu ra;
Bước 5: Định cấu hình TypeScript để tự động biên dịch thành mã JavaScript
Biên dịch mã TypeScript theo cách thủ công bất cứ khi nào bạn thay đổi các tệp TypeScript của mình có thể lãng phí thời gian. Bạn có thể cài đặt ts-node (chạy trực tiếp mã TypeScript mà không cần chờ biên dịch) và gật đầu (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 và thêm tập lệnh này;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Chúng tôi có thể sử dụng một 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.
Đầu ra của bạn sẽ tương tự như cái này;
tổng của 3 số
Định cấu hình TypeScript Linting với eslint
Bước 1: Cài đặt eslint
Linting có thể hữu ích nếu bạn muốn duy trì tính nhất quán của mã và bắt lỗi trước thời gian chạy. Cài đặt eslint bằng lệnh này;
npm install --save-dev eslint
Bước 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 sau đây để hướng dẫn bạn thực hiện;
Khi quá trình kết thúc, bạn sẽ thấy một tệp có tên .eslintrc.js với nội dung tương tự như thế này;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Bước 3: Chạy eslint
Chạy lệnh này để kiểm tra và lint tất cả các tệp có phần mở rộng .ts;
npx eslint . --ext .ts
Bước 4: Cập nhật pack.json
Thêm một tập lệnh lint vào tệp này để tạo lint tự động.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript với Node.js: Các phương pháp hay nhất
- Luôn 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/dự án của mình và hưởng lợi từ các tính năng mới cũng như bản sửa lỗi.
- Bật chế độ nghiêm ngặt: Bạn 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 khi bật chế độ nghiêm ngặt trên tệp tsconfig.json. Điều này sẽ giảm thời gian gỡ lỗi của bạn, 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à lỗi 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 trên tệp tsconfig.json.
- Sử dụng trình chỉnh sửa mã hỗ trợ TypeScript: Có rất nhiều trình chỉnh sửa mã. Một phương pháp hay là chọn các trình chỉnh sửa 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 toàn bộ dự án của mình. Cách tiếp cận như vậy sẽ làm cho mã của bạn trở nên mô đun hơn và dễ bảo trì hơn.
kết thúc
Bây giờ bạn đã có cấu trúc cơ bản của một ứng dụng được tạo bằng TypeScript trên Node.js. Giờ đây, bạn có thể sử dụng các gói Node.js thông thường nhưng 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 mới bắt đầu sử dụng TypeScript, hãy đảm bảo rằng bạn hiểu sự khác biệt giữa TypeScript và JavaScript.
