openplanning

Chạy ví dụ TypeScript đầu tiên của bạn trong Visual Studio Code

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Các cài đặt cần thiết

Để có thể tạo và chạy được các ứng dụng TypeScript trên Visual Studio Code hãy đảm bảo rằng các phần mềm dưới đây đã được cài đặt vào máy tính của bạn:

2- Tạo project

Trên máy tính của bạn tạo mới một thư mục trống để lưu trữ project. Chẳng hạn:
  • C:/TypeScript/myfirstproject
Tiếp theo, trên Visual Studio Code mở thư mục mà bạn vừa tạo ra ở bước trước.
  • File > Open Folder
Nhấn vào biểu tượng "New File" để tạo một file TypeScript mới.
typescript_ex1.ts

console.log("Hello World!");

function sayHello(name: String) {
    console.log(`Hello ${name}`);
}

sayHello("Tom");
Tiếp theo, chúng ta cần cấu hình để chạy được ví dụ trên.

3- Cấu hình Project

Trên Visual Studio Code mở cửa sổ Terminal:
  • View > Terminal
Trên cửa sổ Terminal, thực thi lệnh dưới đây để tạo file cấu hình cho project của bạn:

tsc --init
Sau khi thực thi lệnh trên, file tsconfig.json được tạo ra:
Nếu bạn nhận được một thông báo lỗi như dưới đây, hãy xem xét một trong các giải pháp khắc phục nó từ Stackoverflow:

tsc : File C:\Users\Windows10\AppData\Roaming\npm\tsc.ps1 cannot be
loaded because running scripts is disabled on this system. For more
information, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ tsc typescript_ex1.ts
+ ~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException  
    + FullyQualifiedErrorId : UnauthorizedAccess
Mở file tsconfig.json để thay đổi giá trị của một vài tham số.
Find line starting with.. Change to
"target": "es5" "target": "es6"
// "outDir": "./", "outDir": "./dist",
tsconfig.json

{
  "compilerOptions": {
    "target": "es6",              
     "outDir": "./dist",  
     // Other codes...
  }
}
Tiếp theo, trên cửa sổ Terminal của Visual Studio Code thực thi lệnh để biên dịch (compile) tất cả file typescript của bạn thành các file javascript.

tsc
Cuối cùng, chạy ví dụ.

node ./dist/typescript_ex1.js

Xem thêm các chuyên mục: