Bài viết này, mình sẽ hướng dẫn chi tiết các bạn cách để khởi tạo một dự án TypeScript từ đầu với Visual Studio Code (VSCode).
1. Cài đặt Node.js, VSCode
1.1 Cài đặt Nodejs
Trước khi bắt đầu với Typescript thì bạn phải cài đặt Nodejs và npm - công cụ cần thiết để quản lý các gói (packages) và chạy các lệnh cần thiết trong dự án TypeScript.
Nếu như các bạn chưa biết cài đặt Nodejs thì có thể xem lại bài viết mình hướng dẫn tại đây - trong bài viết hướng dẫn cài đặt, phần cài đặt nvm là optional nhé, các bạn nên sử dụng phiên bản có (LTS) phía sau, vì đó là phiên bản chạy ổn định.
Sau khi cài đặt xong, bạn có thể chạy lệnh sau để kiểm tra version
node -v
npm -v
1.2 Cài đặt VSCode
Mình để đường link hướng dẫn cài đặt VSCode tại đây, các bạn cứ làm theo hướng dẫn nhé. Sau khi cài đặt thành công, bạn có thể tìm và cài đặt các tiện ích như: ESLint, Prettier, TypeScript,... trong tab Extensions của VSCode (Ctrl+Shift+X).
2. Cài đặt Typescript
Sau khi đã cài đặt Nodejs, npm, và VSCode, bước tiếp theo là cài đặt TypeScript. Bạn có thể cài đặt TypeScript toàn cục (global) trên máy tính của mình bằng npm với lệnh sau:
npm install -g typescript
Nếu bạn gặp lỗi permission denied thì bạn cần phải cấp quyền, với windows bạn mở terminal bằng quyền Administrator, với macOS bạn thêm sudo phía trước câu lệnh là ok.
Sau khi cài đặt xong, kiểm tra version bằng lệnh:
tsc -v
Nếu bạn thấy hiển thị phiên bản của TypeScript như hình trên, điều đó có nghĩa là bạn đã cài đặt thành công.
3. Khởi tạo dự án với Typescript
Tới đây chắc hẳn các bạn sẽ đặt ra câu hỏi: "Vậy không thích cài đặt Typescript toàn cục có được không?" Hoàn toàn được và không có vấn đề gì nhé.
- Bước 1: Tạo một thư mục để chứa dự án của bạn
mkdir typescript-project-demo
cd typescript-project-demo
- Bước 2: Khởi tạo file
package.json
Chạy lệnh sau để khởi tạo file package.json
- quản lý các dependencies và scripts của dự án:
npm init -y
File package.json
sẽ được tạo trong thư mục dự án với các thiết lập default:
{
"name": "typescript-project-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- Bước 3: Cấu hình TypeScript với
tsconfig.json
tsconfig.json
là tệp cấu hình chính của TypeScript, định nghĩa cách TypeScript biên dịch code của bạn thành JavaScript.
Chạy lệnh tsc --init
để tạo file tsconfig.json. File tsconfig.json
sẽ được tạo ra với các cấu hình mặc định. Bên dưới là đoạn config của mình
{
"compilerOptions": {
"target": "es6", /* Chỉ định phiên bản JavaScript mà TypeScript sẽ biên dịch ra */
"module": "commonjs", /* Sử dụng module CommonJS */
"strict": true, /* Bật kiểm tra strict */
"esModuleInterop": true, /* Hỗ trợ import/export ES Modules */
"outDir": "./dist", /* Thư mục chứa các tệp JavaScript đã biên dịch */
"rootDir": "./src", /* Thư mục gốc chứa tệp TypeScript */
"skipLibCheck": true /* Bỏ qua kiểm tra các tệp khai báo thư viện */
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
- Bước 4: Tạo và chạy chương trình Typescript đầu tiên
Chạy lệnh mkdir src
để tạo folder src chứa các tệp Typescript của bạn.
Sau đó, bạn chạy lệnh touch src/index.ts
để tạo file index.ts
trong folder src
Bạn có thể không chạy lệnh mà thao tác thẳng trên VSCode nha
Mở file index.ts
vừa được tạo, bắt đầu với ngôn ngữ Typescript bằng đoạn mã đơn giản sau:
function hello(name: string): string {
return `Hello, ${name}!`;
}
console.log(hello("200Lab"));
- Bước 5: Biên dịch và chạy chương trình
Để biên dịch mã TypeScript thành JavaScript, chạy lệnh tsc
Lệnh này sẽ tạo ra thư mục dist
chứa tệp index.js
. Bạn có thể chạy file JavaScript đã biên dịch bằng lệnh:
node dist/index.js
Nếu bạn không muốn phải chạy các lệnh biên dịch và chạy mã TypeScript bằng tay, bạn có thể tự động hóa quy trình này bằng cách sử dụng script trong tệp package.json
. Điều này sẽ giúp bạn thực hiện các bước một cách nhanh chóng chỉ với một lệnh duy nhất.
4. Thiết lập script trong package.json
Mở tệp package.json
và thêm các script sau vào phần "scripts"
{
"name": "typescript-project-demo",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC"
}
"build"
: Chạy TypeScript compiler (tsc
) để biên dịch mã nguồn TypeScript từ thư mụcsrc
vào thư mụcdist
."start"
: Chạy mã JavaScript đã biên dịch bằng Node.js."dev"
: Chạy TypeScript compiler trong chế độ watch, tự động biên dịch mã khi có thay đổi.
5. Chạy Typescript trực tiếp không cần chờ biên dịch thành Javascript
Ngoài ra, bạn có thể sử dụng ts-node
- cách tiện lợi để chạy mã TypeScript trực tiếp mà không cần biên dịch thành mã JavaScript như trước đó mình đề cập.
ts-node
cung cấp khả năng chạy mã TypeScript trong môi trường Nodejs, giúp bạn phát triển nhanh chóng mà không phải chờ quá trình biên dịch diễn ra.
Đầu tiên, bạn chạy lênh sau để cài đặt ts-node
và typescript
nếu chưa cài đặt:
npm install ts-node typescript --save-dev
Cập nhật lại file package.json
{
"name": "typescript-project-demo",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"dev": "ts-node src/index.ts",
"build": "tsc",
"start:build": "node dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^10.9.2",
"typescript": "^5.5.4"
}
}
"dev"
: Chạy mã TypeScript trực tiếp bằng ts-node
"build"
: Biên dịch mã TypeScript thành mã JavaScript và lưu vào thư mục dist
.
"start:build"
: Chạy mã JavaScript đã biên dịch bằng Nodejs.
6. Tích hợp nodemon vào dự án Typescript
Nếu bạn chưa biết về nodemon
thì mình nói ngắn gọn thế này,nodemon
là công cụ giúp theo dõi các thay đổi trong mã nguồn và tự động khởi động lại ứng dụng Nodejs.
B1: Cài đặt nodemon
bằng câu lệnh:
npm install -D nodemon
B2: Cập nhật lại package.json
{
"name": "typescript-project-demo",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"dev": "nodemon --watch src --exec ts-node src/index.ts",
"build": "tsc",
"start:build": "node dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^3.1.4",
"ts-node": "^10.9.2",
"typescript": "^5.5.4"
}
}
B3: Chạy chương trình bằng lệnh npm run dev
Mặc dù bạn có thể sử dụng nodemon
mà không cần file cấu hình nodemon.json
, nhưng việc tạo file này sẽ giúp dự án của bạn trở nên rõ ràng và dễ quản lý hơn.
B1: Tạo file nodemon.json
thư mục gốc của dự án.
{
"watch": ["src"],
"ext": "ts",
"exec": "ts-node src/index.ts"
}
- watch: chỉ định thư mục cần theo dõi sự thay đổi. Như cấu hình trên
nodemon
sẽ theo dõi thư mụcsrc
- ext: định dạng các tệp cần theo dõi. Cấu hình trên chỉ theo dõi các tệp có phần mở rộng
.ts
(TypeScript) - exec: lệnh thực thi khi có thay đổi.
nodemon
sẽ chạyts-node src/index.ts
khi có thay đổi.
B2: Cập nhật lại file package.json
{
"name": "typescript-project-demo",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"dev": "nodemon",
"build": "tsc",
"start:build": "node dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^3.1.4",
"ts-node": "^10.9.2",
"typescript": "^5.5.4"
}
}
B3: Chạy lại chương trình với câu lệnh npm run dev
. Kết quả như phần trên nhé!
7. Kết luận
Qua bài viết này, hy vọng bạn đã có thể dễ dàng áp dụng khởi tạo dự án Typescript của riêng bạn.
Các bài viết liên quan:
Tran Thuy Vy
Mình sẽ không chết vì những điều mình không biết, nhưng sẽ chết vì những điều mình tưởng rằng mình biết
follow me :
Bài viết liên quan
Lập trình C cơ bản - Ứng dụng của ngôn ngữ C
May 02, 2024 • 17 min read
C++ là gì? Giới thiệu ngôn ngữ lập trình C++
Oct 07, 2023 • 35 min read
Java Core là gì? So sánh Java Core và Java
Oct 02, 2023 • 12 min read
Clean code là gì ? Nguyên tắc viết clean code trong Lập Trình
Sep 28, 2023 • 27 min read
Bài toán tháp Hà Nội và cách giải sử dụng Đệ Quy
Sep 28, 2023 • 13 min read
Prompt Engineering là gì? Tìm hiểu về Prompt Engineer
Sep 25, 2023 • 22 min read