Ad Code

Chúc bạn một ngày tốt lành!

Đang cập nhật tin mới trực tiếp...

6/recent/ticker-posts

“Hello, World!” trong TypeScript

Chào các bạn, bài trước mình đã hướng dẫn về cài đặt TypeScript, bây giờ hãy viết ứng dụng đầu tiên bằng ngôn ngữ này. Chúng ta bắt đầu thôi!


Code hiển thị 'Hello World' trong node.js

  1. Đầu tiên hãy tạo một thư mục để lưu code, ví dụ thư mục là: helloworld
  2. Chạy Visual Studio Code và mở thư mục đó .
  3. Tạo một tệp TypeScript gọi là app.ts với phần mở rộng (đuôi) của file là .ts
  4. Thêm code bên dưới vào tệp app.ts

let message: string = 'Hello, World!';

console.log(message);

Mở Terminal trong Visual Studio Code bằng shortcut hoặc theo menu Terminal > New Terminal

Gõ lệnh bên dưới để biên dịch tệp app.ts:

tsc app.ts

Nếu bạn làm đúng, bạn sẽ thấy một file gọi là app.js được sinh ra bởi TypeScript Compiler (node.js module)

Chạy tệp app.js

Để chạy tệp app.js trong node.js, bạn hãy sử dụng lệnh sau:

node app.js

Và kết quả đầu ra là:

Hello, World!

BONUS Code TypeScript hiển thị 'Hello World' trong Web Browsers

Đầu tiên, bạn tạo một tệp mới gọi là index.html và include file app.js như bên dưới:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript: Hello, World!</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>


Cập nhật code của tệp mã app.ts như bên dưới:

let message: string = 'Hello, World!';
// create a new heading 1 element
let heading = document.createElement('h1');
heading.textContent = message;
// add the heading the document
document.body.appendChild(heading);


Biện dịch tệp TypeScript tên là app.ts với Command sau:

tsc app.ts

Mở Live Server từ VS code bằng cách click chuột phải vào file index.html và select với Open with Live Server

Và đây là kết quả


Để thực hiện các thay đổi, bạn cần chỉnh sửa tệp app.ts. 

Ví dụ:

let message: string = 'Hello, TypeScript!';

let heading = document.createElement('h1');

heading.textContent = message;

document.body.appendChild(heading);

Và biên dịch tệp app.ts:

tsc app.ts

Đầu ra khi chạy trên LiveServer

Hello, TypeScript!

TypeScript Compiler sẽ sinh ra một file mới là app.js và Live Server sẽ tự động nạp tệp đó trên trình duyệt web.

Chú ý: Tệp app.js là file đầu ra của file app.ts. Do đó, bạn không bao giờ được trực tiếp thay đổi code trong tệp này, nếu không bạn sẽ mất các thay đổi sau khi biên dịch lại tệp app.ts.

Đăng nhận xét

0 Nhận xét