XEM BÀI VIẾT THEO TỪ KHÓA
ai angular aspnetcore backend chat ckeditor cqrs csharp dart eclipse erd flutter frontend giai-thuat hibernate java javaweb jsp jwt laravel md5 mongodb nosql oop opencv oracle pattern project python restful security servlet spring sql typescript webapi webservice website
CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

Cài đặt-Tạo-Cấu hình và chạy TypeScript Project với Visual Studio Code

Đăng lúc: 05:57 PM - 26/04/2023 bởi Charles Chung - 1268

TypeScript là một ngôn ngữ lập trình hướng đối tượng, mã nguồn mở, được Microsoft phát triển. Nó là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các ứng dụng lớn và phức tạp. Nó kế thừa nhiều khái niệm từ Java và C#, TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type. Nó còn được bổ sung thêm lớp hướng đối tượng mà điều này không có ở Javascript. Trong bài viết này tôi sẽ hướng dẫn các bạn cài đặt môi trường, cấu hình dự án TypeScript sử dụng Visual Studio Code.

A. Cài Visual Studio Code và TypeScript trên Windows

1. Download visual studio code tại đây:https://code.visualstudio.com/download

2. Download NodeJS tại https://nodejs.org

3. Mở cửa sổ Command Prompt và cài TypeScript bằng lệnh sau:

npm install -global typescript

4. Kiểm tra TypeScript đã cài chưa bằng lệnh

tsc --version

B. Tạo Project TypeScript

1. Tạo thư mục có tên bkapProject để chứa source code

2. Trong thư mục bkapProject tạo 2 thư mục con src và build

3. Mở thư mục bkapProject trong Visual Code

4. Tạo tệp tin tsconfig.json với nội dung như hình dưới

tsconfig

5. Trong thư mục src tạo tệp tin app.ts và code như hình dưới

6. Mở cửa sổ Command Prompt chuyển đến thư mục bkapProject và gõ lệnh sau

tsc -p tsconfig.json --watch

tsc

lệnh này có tác dụng biên dịch code typescript theo cấu hình trong file tsconfig.json, mỗi khi thay đổi code trong visual code, nó sẽ tự động biên dịch lại.

tsc running

7. Quay lại visual code mở thư mục build và quan sát kết quả biên dịch từ typescript sang javascript

typescript to javascript

8. Trong thư mục bkapProject tạo tệp tin index.html để kiểm thử kết quả tệp js xem sao nhé.

index.html

9. Chạy tệp index.html trên trình duyệt chrome và mở console window kiểm tra kết quả nhé

Chúc các bạn thành công! mọi thắc mắc xin kích vào đây

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ