Tạo một dự án TypeScript từ Scratch

TypeScript là một tập hợp siêu JavaScript được phát triển để xây dựng các ứng dụng quy mô lớn, an toàn hơn. Nó thêm tính năng nhập tĩnh tùy chọn vào ngôn ngữ, giúp phát hiện lỗi trước khi biên dịch dễ dàng hơn.

Ngôn ngữ này cũng giới thiệu một số tính năng không tồn tại trong JavaScript. Chúng bao gồm generics, lớp, giao diện, enums và decorator.

Tìm hiểu cách thiết lập dự án TypeScript đầu tiên của bạn từ đầu chỉ trong vài bước.

Bước 1: Cài đặt TypeScript

Trước khi sử dụng TypeScript trên hệ thống của bạn, bạn phải cài đặt trình biên dịch TypeScript trên toàn cầu.

Chạy lệnh sau để cài đặt TypeScript trên toàn cầu:

npm install -g typescript

Bước 2: Thiết lập dự án của bạn

Để thiết lập dự án TypeScript của bạn, hãy bắt đầu bằng cách tạo một thư mục dự án trống trong bất kỳ IDE nào bạn chọn.

Sau đó, tạo tệp của bạn bằng .ts phần mở rộng tệp. TypeScript không thể chạy trong bất kỳ môi trường nào. Do đó, nó phải được biên dịch thành JavaScript trước khi có thể chạy.

Để biên dịch các tệp TypeScript của bạn thành JavaScript, hãy điều hướng đến thư mục dự án trên thiết bị đầu cuối của bạn. Sau đó chạy tsc theo sau là tên tệp TypeScript của bạn.

Ví dụ:

tsc index.ts

Lệnh này sẽ tạo ra một index.js tệp bên trong cùng một thư mục của bạn index.ts tập tin cư trú.

Hành vi này có thể không mong muốn vì nó sẽ làm cho dự án của bạn khó quản lý với nhiều .js và .ts các tệp trong cùng một thư mục.

Bạn thay đổi hành vi mặc định này và sửa đổi hành vi của trình biên dịch TypeScript của bạn bằng cách sử dụng tsconfig.json tập tin.

Chạy lệnh sau trong thiết bị đầu cuối của bạn để tạo tsconfig.json tệp trong dự án của bạn:

tsc 

Điều này tạo ra một tệp chứa tất cả các cài đặt cấu hình cho trình biên dịch TypeScript của bạn.

Bạn sẽ chỉ trình bày những điều cơ bản cần thiết để bắt đầu dự án của mình tại đây, nhưng bạn có thể tìm hiểu thêm về nó trong tài liệu TypeScript tsconfig.

Bước 3: Thiết lập trình biên dịch TypeScript để có quy trình làm việc tốt hơn

Các tsconfig.json tệp chứa các tùy chọn cấu hình cho trình biên dịch TypeScript được chia thành bảy phần:

Hầu hết các thuộc tính bị tắt theo mặc định (chúng được nhận xét). Bạn có thể kích hoạt và sửa đổi chúng bằng cách bỏ nhận xét chúng.

Dưới đây là các bước bạn cần thực hiện để thay đổi vị trí của các tệp JavaScript đã tạo của mình:

1. Mở tsconfig.json và xác định vị trí phát ra tiết diện.
2. bên trong phát ra phần, bỏ bình luận outDir thuộc tính và chỉ định thư mục bạn muốn lưu trữ .ts các tập tin. Bây giờ bất cứ lúc nào bạn chạy tsccủa bạn .js các tệp sẽ nằm trong thư mục được chỉ định.

Đang chạy tsc tiếp theo là tên của tệp bạn muốn biên dịch không phải là tối ưu cho quy trình làm việc của bạn, đặc biệt là khi bạn cần biên dịch nhiều tệp.

Để giải quyết vấn đề này, trình biên dịch TypeScript cung cấp một thuộc tính cho phép nó biên dịch tất cả các tệp trong một thư mục trong một lệnh.

Làm theo các bước sau để thiết lập:

1. Mở tsconfig.json và xác định vị trí mô-đun tiết diện.
2. bên trong mô-đun phần, bỏ bình luận rootDir tài sản hoặc rootDirs (nếu bạn muốn trình biên dịch biên dịch nhiều .ts thư mục vào .js) và chỉ định (các) thư mục tệp.

Các cài đặt này sẽ làm cho quy trình làm việc của bạn tốt hơn và các tệp của bạn dễ bảo trì hơn.

Ưu điểm của TypeScript

Ưu điểm chính của TypeScript so với JavaScript là tính an toàn về kiểu chữ của nó. TypeScript giúp bạn có thể phát hiện các lỗi khó tìm một cách nhanh chóng. Tính năng này lý tưởng cho việc xây dựng các ứng dụng an toàn và quy mô lớn.