Cách làm việc với TypeScript trong Visual Studio Code
TypeScript là một tập hợp JavaScript được đánh máy sẽ biên dịch thành JavaScript thuần túy. Hãy phân tích chính xác điều này nghĩa là gì:- đã gõ - Bạn có thể xác định kiểu dữ liệu biến, tham số và trả về.
- superset - TypeScript thêm một số tính năng bổ sung trên JavaScript. Tất cả JavaScript hợp lệ đều là TypeScript hợp lệ, nhưng không phải ngược lại.
- biên dịch sang JavaScript thuần túy - Trình duyệt không thể chạy TypeScript. Vì vậy, công cụ có sẵn sẽ đảm nhận việc biên dịch TypeScript của bạn sang JavaScript để trình duyệt hiểu.
Trong hướng dẫn này, bạn sẽ làm việc với TypeScript trong Visual Studio Code để khám phá những lợi ích của việc sử dụng chúng cùng nhau.
Yêu cầu
Đối với dự án này, bạn cần :
- Hiểu biết về JavaScript. Bạn có thể xem lại loạt bài Cách viết mã trong JavaScript để biết thêm thông tin.
- Node.js được cài đặt local mà bạn có thể thực hiện theo Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ .
- Đã download và cài đặt mã Visual Studio Code (VS Code).
Bước 1 - Cài đặt và biên dịch TypeScript
Bước đầu tiên để làm việc với TypeScript là cài đặt gói trên phạm vi global trên máy tính của bạn. Cài đặt gói typescript trên phạm vi global bằng cách chạy lệnh sau trong terminal của bạn:
- npm install -g typescript
Tiếp theo, chạy lệnh sau để tạo một folder dự án:
- mkdir typescript_test
Di chuyển vào folder mới tạo:
- cd typescript_test
Bây giờ, bạn cần tạo một file TypeScript mới. Để tham khảo, chúng kết thúc bằng loại phần mở rộng .ts .
Đến đây bạn có thể mở VS Code và tạo một file mới bằng cách nhấp vào Tệp và sau đó nhấp vào Tệp Mới . Sau đó, lưu nó bằng cách nhấp vào Tệp và sau đó Lưu dưới dạng… . Bạn có thể đặt tên cho app .ts file này là app .ts để làm theo hướng dẫn này. Tên file không quan trọng, nhưng đảm bảo phần mở rộng kiểu file là .ts .
Dòng đầu tiên của file này phải bắt đầu bằng export {}; để VS Code nhận ra nó là một module .
Tạo một hàm sẽ in họ và tên từ một đối tượng person :
export {}; function welcomePerson(person) { console.log(`Hey ${person.firstName} ${person.lastName}`); return `Hey ${person.firstName} ${person.lastName}`; } const james = { firstName: "James", lastName: "Quick" }; welcomePerson(james); Vấn đề với đoạn mã trên là không có giới hạn nào đối với những gì có thể được chuyển vào hàm welcomePerson . Trong TypeScript, bạn có thể tạo các giao diện xác định các thuộc tính mà một đối tượng nên có.
Trong đoạn mã dưới đây, có một giao diện cho một đối tượng Person với hai thuộc tính, firstName và lastName . Sau đó, hàm welcomePerson đã được sửa đổi để chỉ chấp nhận các đối tượng Person .
export {}; function welcomePerson(person: Person) { console.log(`Hey ${person.firstName} ${person.lastName}`); return `Hey ${person.firstName} ${person.lastName}`; } const james = { firstName: "James", lastName: "Quick" }; welcomePerson(james); interface Person { firstName: string; lastName: string; } Lợi ích của việc này sẽ trở nên rõ ràng nếu bạn cố gắng chuyển một chuỗi vào hàm welcomePerson .
Ví dụ, thay thế james :
welcomePerson(james); Với 'James' :
welcomePerson('James'); Vì ta đang làm việc với file TypeScript, VS Code sẽ ngay lập tức cung cấp cho bạn phản hồi để bạn biết rằng hàm mong đợi một đối tượng Person chứ không phải một chuỗi.
Output- Argument of type '"James"' is not assignable to parameter of type 'Person'.
Đến đây bạn đã có một file TypeScript đang hoạt động, bạn có thể biên dịch nó sang JavaScript. Để làm điều này, bạn cần gọi hàm và cho nó biết file nào cần biên dịch. Bạn có thể sử dụng terminal tích hợp trong VS Code để thực hiện việc này.
- tsc app.ts
Nếu bạn không sửa lỗi trước đó, bạn sẽ thấy kết quả lỗi:
Output- app.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.
Sửa lỗi bằng cách chuyển đối tượng Person vào một cách chính xác thay vì một chuỗi. Sau đó, biên dịch lại và bạn sẽ nhận được một file JavaScript hợp lệ.
Chạy ls trong terminal sẽ hiển thị các file trong đường dẫn hiện tại của ta :
ls Bạn sẽ thấy file ts root của bạn và cả file js mới:
Output- app.js
- app.ts
Bây giờ, hãy mở file app .js trong VS Code.
"use strict"; exports.__esModule = true; function welcomePerson(person) { console.log("Hey " + person.firstName + " " + person.lastName); return "Hey " + person.firstName + " " + person.lastName; } var james = { firstName: "James", lastName: "Quick" }; welcomePerson(james); Lưu ý các chuỗi ký tự mẫu , là một tính năng của ES6, đã được biên dịch để nối chuỗi đơn giản từ ES5. Ta sẽ quay lại vấn đề này trong thời gian ngắn.
Để xác minh điều này đã hoạt động, bây giờ bạn có thể chạy JavaScript trực tiếp bằng Node trong terminal của bạn :
- node app.js
Bạn sẽ thấy tên được in trên console :
Output- Hey James Quick
Bước 2 - Tạo file cấu hình TypeScript
Lúc này, bạn đã biên dịch trực tiếp một file . Điều này thật tuyệt, nhưng trong một dự án thế giới thực, bạn có thể cần tùy chỉnh cách tất cả các file được biên dịch. Ví dụ, bạn có thể cần chúng được biên dịch sang ES6 thay vì ES5. Để thực hiện việc này, bạn cần tạo file cấu hình TypeScript.
Để tạo file cấu hình TypeScript, bạn có thể chạy lệnh sau (tương tự như npm init ):
- tsc --init
Bạn sẽ nhận được kết quả này:
Output- message TS6071: Successfully created a tsconfig.json file.
Mở file tsconfig.json mới của bạn và bạn sẽ thấy nhiều tùy chọn khác nhau, hầu hết đều được comment .
Bạn có thể nhận thấy rằng có một cài đặt được gọi là "target" được đặt thành "es5" . Thay đổi cài đặt đó thành "es6" .
Với những thay đổi này được thực hiện đối với tsconfig.json , hãy chạy tsc trong terminal của bạn:
- tsc
Lưu ý: Không giống như trước đây, bạn không chỉ định file đầu vào. Tài liệu chính thức chỉ ra: "Khi các file đầu vào được chỉ định trên dòng lệnh, các file tsconfig.json sẽ bị bỏ qua."
Bây giờ, hãy mở file JavaScript mới được tạo:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function welcomePerson(person) { console.log(`Hey ${person.firstName} ${person.lastName}`); return `Hey ${person.firstName} ${person.lastName}`; } const james = { firstName: "James", lastName: "Quick" }; welcomePerson(james); Lưu ý chuỗi ký tự mẫu được để riêng, chứng tỏ rằng TypeScript của bạn đã được biên dịch thành công sang ES6.
Một điều khác bạn có thể thay đổi là nơi các file JavaScript của bạn được lưu trữ sau khi được tạo. Cài đặt này có thể được cụ thể hóa trong "outDir" .
Thử xóa "outDir" , rồi bắt đầu nhập lại. VS Code đang cung cấp cho bạn IntelliSense cho các thuộc tính mà bạn có thể đặt trong file cấu hình TypeScript.
Bạn có thể thay đổi "outDir" của bạn từ folder hiện tại thành folder dist như sau:
"outDir": "./dist" Sau khi biên dịch lại ( tsc ), hãy lưu ý file JavaScript kết quả của bạn thực sự nằm bên trong folder dist .
Bạn có thể sử dụng lệnh cd và ls trong terminal của bạn để khám phá nội dung của folder dist :
- cd dist
- ls
Bạn sẽ thấy file JavaScript đã biên dịch của bạn ở vị trí mới:
Output- app.js
Bước 3 - Khám phá TypeScript trong các khung công tác Front-End hiện đại
TypeScript ngày càng trở nên phổ biến hơn trong vài năm qua. Dưới đây là một vài ví dụ về cách nó được sử dụng trong các khuôn khổ front-end hiện đại.
CLI góc
Các dự án Angular CLI được cấu hình sẵn với TypeScript. Tất cả cấu hình, linting, v.v. được tích hợp sẵn theo mặc định. Tạo một dự án Angular CLI và xem xét xung quanh. Đây là một cách tốt để xem TypeScript trông như thế nào trong một ứng dụng thực.
Tạo ứng dụng React 2
Create React App không đi kèm với TypeScript theo mặc định, nhưng với version mới nhất, nó có thể được cấu hình theo cách đó. Nếu bạn muốn tìm hiểu cách sử dụng TypeScript với Create React App, hãy xem [Sử dụng Create React App v2 và TypeScript] ([https://www.digitalocean.com/community/tutorials/using-create-react- app-v2-and-stylescript ) bài viết.
Vue CLI 3
Các dự án Vue CLI có thể được cấu hình để sử dụng TypeScript khi tạo một dự án mới. Để biết thêm chi tiết, bạn có thể xem Vue Docs .
Kết luận
Trong hướng dẫn này, bạn đã khám phá cách sử dụng TypeScript với VS Code. TypeScript cho phép bạn tạo JavaScript chất lượng cao hơn có thể mang lại sự tự tin hơn khi vận chuyển đến nơi production . Như bạn có thể nói, VS Code được trang bị tốt để giúp bạn viết TypeScript, tạo cấu hình, v.v.
Các tin liên quan
