6 phút để đọc
Có thể bạn đã từng tiếp xúc với TypeScript thông qua một dự án khởi tạo sẵn hoặc công cụ như Angular CLI. Nhưng trong hướng dẫn này, chúng ta sẽ cùng tìm hiểu cách tạo project TypeScript từ đầu, không cần dự án mẫu hỗ trợ. Bạn cũng sẽ khám phá cách thức hoạt động của quá trình biên dịch trong TypeScript và cách tích hợp linter vào dự án.
Mục lục
- Bắt đầu dự án TypeScript
- Biên dịch dự án TypeScript
- Sử dụng Google TypeScript Style để lint và viết code
Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn sẽ cần:
- Phiên bản mới nhất của Node đã được cài đặt trên máy. Tham khảo hướng dẫn cài đặt trong bài Cách cài đặt Node.js và tạo môi trường phát triển cục bộ.
- Làm quen với
npm.npmđi kèm với Node. Nếu bạn muốn tìm hiểu thêm về cách làm việc với npm, hãy xem hướng dẫn trong bài Cách sử dụng module Node.js với npm và package.json.
Các bước này áp dụng cho những phiên bản Ubuntu mới nhất: Ubuntu 24.04, Ubuntu 22.04, và Ubuntu 20.04. Nếu bạn đang sử dụng Ubuntu phiên bản <= 18.04, bạn nên nâng cấp lên phiên bản mới hơn vì Ubuntu đã ngừng hỗ trợ các phiên bản cũ. Bộ hướng dẫn này sẽ giúp bạn nâng cấp phiên bản Ubuntu.
Bước 1: Bắt đầu dự án TypeScript
Để bắt đầu dự án TypeScript, bạn cần tạo một thư mục cho dự án:
mkdir typescript-project
Bây giờ chuyển vào thư mục dự án:
cd typescript-project
Sau khi đã tạo thư mục dự án, bạn có thể cài đặt TypeScript:
npm i typescript --save-dev
Lưu ý quan trọng, phải thêm cờ --save-dev vì nó sẽ lưu TypeScript dưới dạng một phụ thuộc development, nghĩa là TypeScript là yêu cầu bắt buộc trong quá trình phát triển dự án.
Sau khi cài đặt TypeScript, bạn có thể khởi tạo dự án TypeScript bằng lệnh sau:
npx tsc --init
npm tích hợp sẵn một công cụ tên là npx, cho phép bạn chạy trực tiếp các gói thực thi mà không cần cài đặt chúng toàn cục.
Trong trường hợp này, lệnh tsc được sử dụng vì nó chính là trình biên dịch TypeScript mặc định. Khi bạn viết code bằng TypeScript, tsc sẽ biên dịch code sang JavaScript.
Cờ --init trong lệnh trên sẽ khởi tạo dự án bằng cách tạo ra tệp tsconfig.json trong thư mục typescript-project. Đây là tệp cấu hình quan trọng giúp bạn kiểm soát chi tiết cách TypeScript và trình biên dịch tsc hoạt động. Bạn có thể thêm, xóa hoặc tùy chỉnh các thiết lập trong tệp này để phù hợp nhất với yêu cầu của dự án.
Mở tsconfig.json trong trình soạn thảo để xem cấu hình mặc định:
nano tsconfig.json
Sẽ có nhiều tùy chọn, phần lớn được ghi chú lại như sau:
typescript-project/tsconfig.json
{
"compilerOptions": {
/* Visit <https://aka.ms/tsconfig.json> to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}
Bạn có thể tùy chỉnh cấu hình TypeScript thông qua tệp tsconfig.json.
Ví dụ, bạn có thể bỏ ghi chú tùy chọn outDir và đặt nó thành "./build", khi đó tất cả các tệp TypeScript đã biên dịch sẽ được lưu trong thư mục này.
Sau khi chuẩn bị xong TypeScript và tệp tsconfig.json, bạn có thể bắt đầu viết code cho ứng dụng TypeScript và tiến hành biên dịch.
Lưu ý, Bước 3 dưới đây sẽ thay thế nhiều cấu hình của bạn bằng các thiết lập mặc định hợp lý, nhờ đó bạn có thể bắt tay ngay vào dự án .
Bước 2: Biên dịch dự án TypeScript
Bây giờ bạn có thể bắt đầu viết code cho dự án TypeScript. Mở một tệp mới tên là index.ts trong trình soạn thảo. Viết đoạn code TypeScript sau vào index.ts:
typescript-project/index.ts
const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}
Sau khi viết xong đoạn code TypeScript này, chúng ta bắt đầu biên dịch dự án. Chạy tsc từ thư mục dự án:
npx tsc
Nếu đã cấu hình trong tệp tsconfig.json, bạn sẽ thấy tệp JavaScript index.js đã biên dịch cùng với tệp sourcemap index.js.map được thêm vào thư mục build.
Mở index.js và bạn sẽ thấy đoạn code JavaScript đã biên dịch:
typescript-project/build/index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;
Sẽ khá bất tiện nếu phải chạy lại trình biên dịch TypeScript sau mỗi lần chỉnh sửa code nên bạn hãy bật chế độ theo dõi (watch mode) để code được tự động biên dịch lại khi có thay đổi.
Bạn có thể kích hoạt chế độ watch bằng lệnh sau:
npx tsc -w
Bạn đã tìm hiểu cách trình biên dịch TypeScript hoạt động và hiện có thể biên dịch thành công các tệp TypeScript. Tiếp theo là phần nâng cấp dự án TypeScript bằng cách tích hợp một công cụ linter vào quy trình làm việc.
Bước 3: Sử dụng Google TypeScript Style để lint và chỉnh sửa code
Sử dụng linter khi lập trình giúp bạn dễ dàng phát hiện sự thiếu nhất quán, lỗi cú pháp và những phần còn thiếu trong code. Đồng thời, một style guide không chỉ đảm bảo code được viết gọn gàng, thống nhất mà còn cho phép bạn tận dụng thêm các công cụ để thực thi các quy chuẩn đó. Một công cụ phổ biến là eslint, vốn tích hợp tốt với nhiều IDE để hỗ trợ trong quá trình phát triển.
Khi dự án đã được thiết lập, bạn có thể khai thác các công cụ trong hệ sinh thái TypeScript để tránh việc phải tự tay cấu hình linting và chỉnh sửa tệp tsconfig.json. Một trong số đó là Google TypeScript Style, hay GTS, bộ công cụ kết hợp style guide, linter và trình chỉnh sửa code tự động trong một gói duy nhất. Với GTS, bạn có thể nhanh chóng khởi tạo dự án TypeScript mới, tập trung vào phần thiết kế thay vì mất thời gian vào các chi tiết tổ chức nhỏ lẻ. GTS cũng mang đến các cấu hình mặc định hợp lý, giúp bạn gần như không cần tùy chỉnh thêm.
Bắt đầu bằng cách cài đặt GTS:
npm i gts --save-dev
Tiếp theo, khởi tạo GTS bằng lệnh sau:
npx gts init
Lệnh trên sẽ tạo mọi thứ cần thiết để bắt đầu làm việc với TypeScript, bao gồm tệp tsconfig.json và thiết lập linting (tự động tạo mới tệp package.json nếu bạn chưa có).
Khi chạy npx gts init, GTS cũng sẽ thêm các script tiện ích vào package.json. Ví dụ, bây giờ bạn có thể chạy:
npm run compileđể biên dịch dự án TypeScript.npm run checkđể kiểm tra lỗi linting.
Lưu ý, bạn nên cài đặt TypeScript trước khi cài GTS để đảm bảo sử dụng phiên bản mới nhất trong quá trình phát triển. Vì GTS thường phát triển chậm hơn TypeScript, nên có thể nó sẽ gợi ý hạ cấp TypeScript trong dev dependencies. Nếu cần giữ lại các tính năng mới, bạn có thể cấu hình để GTS không ghi đè phiên bản này.
Ngoài ra, do eslint TypeScript linter chỉ hỗ trợ một dải phiên bản TypeScript nhất định, nên những bản mới hơn có thể nằm ngoài phạm vi đó. Khi gặp trường hợp này, eslint sẽ cảnh báo, nhưng dự án thường vẫn chạy ổn định. Nếu phát sinh lỗi, bạn có thể hạ cấp TypeScript bằng cách chỉ định phiên bản khi cài đặt, ví dụ: npm i typescript@4.4.2 --save-dev.
GTS hiện đã được cài đặt và tích hợp hoàn chỉnh vào dự án TypeScript. Sử dụng GTS trong các dự án tương lai sẽ giúp bạn nhanh chóng khởi tạo với đầy đủ cấu hình cần thiết.
Vì GTS áp dụng cách tiếp cận mặc định không cần cấu hình, nó sẽ sử dụng bộ quy tắc linting và fixing riêng. Các quy tắc này được rút ra từ những giải pháp tốt nhất, tuy nhiên nếu bạn muốn điều chỉnh thì có thể mở rộng cấu hình mặc định của eslint. Để thực hiện, hãy tạo một tệp .eslintrc trong thư mục dự án và kế thừa các quy tắc style từ GTS, cho phép bạn bổ sung hoặc thay đổi các quy tắc style mà GTS đã cung cấp:
---
extends:
- './node_modules/gts'
Kết luận
Trong hướng dẫn này, bạn đã tự tay khởi tạo một dự án TypeScript với cấu hình tùy chỉnh và tích hợp Google TypeScript Style vào dự án. Nhờ GTS, việc bắt đầu một dự án mới trở nên đơn giản, nhanh gọn mà không cần tốn thời gian thiết lập thủ công hay cài đặt thêm linter.
Ở bước tiếp theo, bạn có thể khám phá cách làm việc hiệu quả với TypeScript trong Visual Studio Code, hoặc nâng cao kỹ năng bằng cách tìm hiểu cách kết hợp TypeScript với React.
