Cách thiết lập một dự án TypeScript mới
Bạn có thể đã làm việc với TypeScript trước đây khi sử dụng một dự án khởi động hoặc một công cụ như Angular CLI. Trong hướng dẫn này, bạn sẽ học cách cài đặt một dự án TypeScript mà không cần sự trợ giúp của người khởi nghiệp. Bạn cũng sẽ học cách biên dịch hoạt động trong TypeScript và cách sử dụng linter với dự án TypeScript của bạn.Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần những thứ sau:
- Phiên bản mới nhất của Node được cài đặt 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 local .
- Làm quen với
npm.npmđi kèm với Node. Để tìm hiểu thêm về cách làm việc vớinpm, hãy xem Hướng dẫn Cách sử dụng Mô-đun Node.js vớinpmvàpackage.json.
Bước 1 - Khởi động Dự án TypeScript
Để bắt đầu dự án TypeScript, bạn cần tạo một folder cho dự án của bạn :
- mkdir typescript-project
Bây giờ thay đổi vào folder dự án của bạn:
- cd typescript-project
Với folder dự án của bạn được cài đặt , bạn có thể cài đặt TypeScript:
- npm i typescript --save-dev
Điều quan trọng là phải bao gồm cờ --save-dev vì nó lưu TypeScript dưới dạng phụ thuộc phát triển. Điều này nghĩa là TypeScript hoàn toàn cần thiết để phát triển dự án của bạn.
Với TypeScript được cài đặt, bạn có thể khởi tạo dự án TypeScript của bạn bằng cách sử dụng lệnh sau:
- npx tsc --init
npm cũng bao gồm một công cụ được gọi là npx , sẽ chạy các gói thực thi. npx cho phép ta chạy các gói mà không cần phải cài đặt chúng trên phạm vi global . Bạn có thể tìm hiểu thêm về cách hoạt động của npx và khi nào sử dụng nó tại đây .
Lệnh tsc được sử dụng ở đây vì nó là trình biên dịch TypeScript được tích hợp sẵn. Khi bạn viết mã trong TypeScript, việc chạy tsc sẽ chuyển đổi hoặc biên dịch mã của bạn thành JavaScript.
Sử dụng cờ --init trong lệnh trên sẽ khởi tạo dự án của bạn bằng cách tạo file tsconfig.json trong folder dự án tsconfig.json typescript-project của bạn. tsconfig.json này sẽ cho phép bạn cấu hình thêm và tùy chỉnh cách TypeScript và trình biên dịch tsc tương tác. Bạn có thể xóa, thêm và thay đổi cấu hình trong file này để đáp ứng tốt nhất nhu cầu của bạn .
Mở tsconfig.json trong trình soạn thảo mã mà bạn chọn và bạn sẽ thấy các cấu hình mặc định sau:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true } } Nhiều cấu hình mặc định sẽ được comment . Các cấu hình trên đặt version JavaScript mà TypeScript của bạn sẽ được biên dịch thành và hệ thống module dự kiến cho chương trình đã biên dịch của bạn. Việc đặt "strict" thành true đảm bảo một loạt các luật kiểm tra kiểu sẽ được bật. Điều này nghĩa là chương trình TypeScript của bạn sẽ có ít lỗi hơn.
Bạn có thể tùy chỉnh cấu hình TypeScript của bạn . Trong file tsconfig.json , hãy thêm các cặp key-value sau:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "outDir": "dist", "sourceMap": true } } Cho "outDir" giá trị của "dist" sẽ tạo ra một folder hoặc folder được gọi là dist . Khi bạn chạy npx tsc để biên dịch file npx tsc của bạn , file JavaScript đã biên dịch sẽ được đặt trong file dist .
Sơ đồ nguồn cũng sẽ được tạo khi bạn biên dịch file TypeScript của bạn . Bản đồ nguồn là một file ánh xạ file JavaScript được biên dịch mới sang file TypeScript root . Khi có lỗi trong mã của bạn hoặc nếu có những thay đổi cần được thực hiện, cách tốt nhất là gỡ lỗi mã nguồn root thay vì mã đã biên dịch. Đây là lý do tại sao bản đồ nguồn hữu ích. Đặt "sourceMap" thành true sẽ cho phép bạn nhanh chóng giải quyết các lỗi trong file TypeScript root .
Với TypeScript đã được cài đặt và file tsconfig.json của bạn tại chỗ, giờ đây bạn có thể chuyển sang mã hóa ứng dụng TypeScript của bạn và biên dịch nó.
Bước 2 - Biên dịch Dự án TypeScript
Trước khi bạn có thể bắt đầu viết mã dự án TypeScript của bạn , hãy tạo một folder trong typescript-project src gọi là src . Bên trong folder src , tạo file index.ts .
Mở index.ts trong trình soạn thảo mã của bạn. Viết mã index.ts sau trong index.ts :
const world = 'world'; export function hello(word: string = world): string { return `Hello ${world}! `; } Với mã index.ts này, index.ts đã sẵn sàng được biên dịch:
- npx tsc index.ts
Bạn sẽ nhận thấy rằng index.js JavaScript index.js đã biên dịch và file bản đồ nguồn index.js.map đều đã được thêm vào folder dist .
Mở index.js và bạn sẽ thấy mã JavaScript được biên dịch sau:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var world = 'world'; function hello(word) { if (word === void 0) { word = world; } return "Hello " + world + "! "; } exports.hello = hello; //# sourceMappingURL=index.js.map Chạy trình biên dịch TypeScript mỗi khi bạn thực hiện thay đổi có thể rất tẻ nhạt. Để khắc phục điều này, bạn có thể đặt trình biên dịch ở chế độ xem. Đặt trình biên dịch thành chế độ xem nghĩa là file TypeScript của bạn sẽ được biên dịch lại mỗi khi áp dụng các thay đổi .
Bạn có thể kích hoạt chế độ xem bằng lệnh sau:
- npx tsc -w
Bạn đã biết cách thức hoạt động của trình biên dịch TypeScript và bây giờ bạn có thể biên dịch thành công các file TypeScript của bạn . Bạn có thể đưa các dự án TypeScript của bạn lên cấp độ tiếp theo bằng cách giới thiệu một linter vào quy trình làm việc của bạn.
Bước 3 - Cấu hình TSLint cho Dự án TypeScript
Sử dụng linter khi viết mã sẽ giúp bạn nhanh chóng tìm ra sự không nhất quán, lỗi cú pháp và thiếu sót trong mã của bạn . Trình liên kết thực tế cho TypeScript là TSLint .
Cảnh báo: TSLint hiện không được dùng nữa. Cách tốt nhất là sử dụng ESLint để thay thế. Đọc bài viết này để tìm hiểu cách thực hiện điều đó: Cách Lint và Định dạng Mã bằng ESLint trong Visual Studio Code .
Để cài đặt TSLint, hãy chạy lệnh sau:
- npm i tslint --save-dev
TSLint hiện đã được cài đặt. Để cấu hình TSLint và tùy chỉnh cách nó hoạt động với dự án của bạn, hãy chạy lệnh sau để khởi tạo TSLint:
- npx tslint --init
Khởi tạo TSLint sẽ tạo file tslint.json . Tất cả các cấu hình TSLint được giữ trong tslint.json . Mở tslint.json trong trình soạn thảo mã của bạn. Bạn sẽ thấy các cấu hình mặc định sau:
{ "defaultSeverity": "error", "extends": [ "tslint:recommended" ], "jsRules": {}, "rules": {}, "rulesDirectory": [] } Linters gạch chân lỗi trong mã của bạn. Để hành vi này được bật trong trình soạn thảo mã của bạn, bạn cần cài đặt tiện ích mở rộng TSLint.
Lưu ý: Lưu ý TSLint không được dùng nữa. Cài đặt TSLint trong trình soạn thảo mã của bạn có thể không hoạt động.
Quay lại index.ts trong trình soạn thảo mã của bạn. Bạn sẽ nhận thấy gạch chân ở hai nơi: dấu ngoặc kép phải là dấu ngoặc kép và file phải kết thúc bằng một dòng mới. Cả hai thông báo được gắn cờ này không phải là lỗi. Chúng là các tùy chọn phong cách mà TSLint cấu hình cho bạn. Với tslint.json tại chỗ, bạn có thể thay đổi các cấu hình này.
Để thay đổi các tùy chọn phong cách này, bạn sẽ làm việc với cặp key-value "rules" trong tslint.json :
{ "defaultSeverity": "error", "extends": [ "tslint:recommended" ], "jsRules": {}, "rules": {}, "rulesDirectory": [] } Bạn có thể không muốn thêm một dòng ở cuối mỗi file . Bạn có thể thay đổi điều này bằng luật "eofline" . Đặt giá trị của "eofline" thành false sẽ xóa gạch chân TSLint:
"rules": { "eofline": false }, Bạn không phải đặt thủ công mọi luật mà bạn muốn thêm hoặc tùy chỉnh. Có những cấu hình nổi tiếng mà bạn có thể áp dụng và tích hợp vào TSLint. Hướng dẫn kiểu Airbnb là một trong những bộ cấu hình được nhiều nhà phát triển tin tưởng và sử dụng.
Để sử dụng hướng dẫn kiểu Airbnb, trước tiên bạn cần cài đặt nó:
- npm install tslint-config-airbnb
Với hướng dẫn kiểu Airbnb được cài đặt, bạn cần đảm bảo cấu hình TSLint của bạn trong tslint.json phản ánh điều này. Khóa "extends" cần trỏ đến tslint-config-airbnb mới được cài đặt:
{ "defaultSeverity": "error", "extends": "tslint-config-airbnb", "jsRules": {}, "rules": { "eofline": false }, "rulesDirectory": [] } Với hướng dẫn kiểu Airbnb được đưa ra và được tích hợp vào tslint.json , TSLint sẽ không còn đưa ra thông báo lỗi khi sử dụng các dấu ngoặc kép. Google cũng có một hướng dẫn kiểu TypeScript được sử dụng rộng rãi được gọi là gts , có nhiều tính năng hữu ích hơn.
Bước 4 - Sử dụng gts
Bạn biết cấu hình TypeScript và linting hoạt động như thế nào. Với kiến thức mức thấp này, bạn có thể sử dụng các công cụ khác để tránh phải cài đặt linting và cấu hình trong file tsconfig.json . Google TypeScript Style là một trong những công cụ như vậy. Google TypeScript Style, được gọi là gts, là một hướng dẫn tạo kiểu, bộ nối và trình sửa mã tự động, tất cả trong một. Sử dụng gts sẽ giúp bạn nhanh chóng khởi động một dự án TypeScript mới và tránh bị trùng lặp . gts cũng cung cấp cấu hình mặc định phù hợp. Điều này nghĩa là bạn sẽ không phải tùy chỉnh cấu hình nhiều.
Để kiểm tra gts, hãy bắt đầu bằng cách tạo một folder dự án mới. Khi folder dự án của bạn đã ở đúng vị trí, hãy khởi tạo gts bằng lệnh sau:
- npx gts init
Lệnh trên sẽ tạo ra mọi thứ bạn cần để bắt đầu với TypeScript, bao gồm file tsconfig.json và cài đặt linting. Tệp package.json cũng sẽ được tạo nếu bạn chưa có.
Chạy npx gts init cũng sẽ thêm các tập lệnh npm hữu ích vào file package.json của bạn. Ví dụ: bây giờ bạn có thể chạy npm run compile để biên dịch dự án TypeScript của bạn. Để kiểm tra lỗi in linting, bây giờ bạn có thể npm run check .
Lưu ý: Lưu ý TSLint không được dùng nữa. Kiểm tra tài liệu gts để tìm hiểu cách tích hợp gts với ESLint linter.
Để sử dụng TSLint với dự án TypeScript của bạn, bạn vẫn cần cài đặt TSLint và chạy npx tslint --init để tạo file cấu hình tslint.json . Trong bước trước, ta đã mở rộng TSLint để sử dụng hướng dẫn kiểu Airbnb. Bạn cần làm tương tự cho gts:
{ "defaultSeverity": "error", "extends": [ "./node_modules/gts/tslint.json" ], "jsRules": {}, "rules": {}, "rulesDirectory": [] } Bây giờ TSLint sẽ tuân theo các luật linting do gts đặt ra.
gts hiện đã được cài đặt và tích hợp đúng cách vào dự án TypeScript của bạn. Sử dụng gts trong các dự án trong tương lai sẽ cho phép bạn nhanh chóng cài đặt các dự án TypeScript mới với các cấu hình cần thiết tại chỗ.
Kết luận
Trong hướng dẫn này, bạn đã bắt đầu một dự án TypeScript với các cấu hình tùy chỉnh. Bạn cũng đã tích hợp Google TypeScript Styleguide vào dự án TypeScript của bạn . Sử dụng gts sẽ giúp bạn nhanh chóng bắt đầu và chạy với một dự án TypeScript mới. Với gts, bạn sẽ không cần cài đặt cấu hình theo cách thủ công hoặc tích hợp linter vào quy trình làm việc của bạn .
Là một bước bổ sung, bạn có thể quan tâm đến việc tìm hiểu cách làm việc với TypeScript trong Visual Studio Code .
Bạn cũng có thể xem bài viết này để biết cách sử dụng TypeScript với React .
Các tin liên quan
