ASP.NET Core và TypeScript

1029

1. CÀI ĐẶT

1.1. Cài đặt ASP.NET Core và TypeScript

Việc đầu tiên chúng ta cần cài ASP.NET CoreVisual Studio 2015. Nếu phiên bản Visual Studio của bạn chưa được cài TypeScript thì bạn có thể cài thủ công(cái này hướng dẫn sau).

1.2. Tạo ứng dụng demo

Trên thanh menu của Visual Studio các bạn thực hiện theo các bước sau:

  • Bước 1: Chọn File
  • Bước 2: Chọn New Project (Ctrl + Shift + N)
  • Bước 3: Chọn Visual C#
  • Bước 4: Chọn ASP.NET Web Application

Screen Shot 2016-08-09 at 4.36.25 PM

  • Bước 5: Chọn ASP.NET 5 Empty

Hãy bỏ check ““Host in the cloud” khi chúng ta chỉ chạy trên local(máy tính của chúng ta)

Screen Shot 2016-08-09 at 4.36.51 PM

Sau đó nhấn “OK” và chạy thử, hãy chắc chắn rằng nó chạy ngon lành nhé :))

1.3. Cài đặt server

Trong file project.json chúng ta thêm một khác “dependencies”:

Kết quả sẽ giống như thế này

Thay thế nội dung của Configure trong file Startup.cs thành:

2. THÊM TYPESCRIPT

Bước tiếp theo chúng ta thêm folder cho TypeScript.

4e5e795232a47e56fc28f7f9a442c64d917c92d9

Chúng ta vẫn gọi nó là scripts

Screen Shot 2016-08-09 at 4.38.16 PM

2.1. Thêm code TypeScript

Chuột phải vào thư mục scripts và nhấn New Item. Sau đó chọn TypeScript File (nó có thể trong phần .Net core) và điền vào ô Nameapp.ts. Cuối cùng nhấn Add.

Screen Shot 2016-08-09 at 4.38.34 PM

2.2. Code ví dụ

Gõ đoạn code sau vào app.ts.

2.3. Cài đặt để build

2.3.1. Cấu hình trình biên dịch của TypeScript

Chuột phải vào thư mục scripts và nhấn New Item. Sau đó chọn TypeScript Configuration File và sử dụng tên mặc định tsconfig.json.

64336974f588e6dc90ae8005c0d5e2cd9454e0c0

Thay thế nội dung của file tsconfig.json như sau:

2.3.2. Cài đặt NPM

Bây giờ chúng ta cần cài đặt NPM để có thể tải các gói thư viện JavaScripts. Chuột phải vào project và nhấn New Item. Sau đó chọn NPM Configuration File và sử dụng tên mặc định package.json. Bên trong devDependencies thêm gulpdel.

2.3.3. Cài đặt gulp

Cuối cùng, thêm mới một file JavaScript đặt tên gulpfile.js với nội dung:

Dòng đầu tiên nói cho Visual Studio biết chạy task default sau khi build xong. Nó cũng sẽ chạy task clean khi bạn yêu cầu Visual Studio xóa build.

Bây giờ chuột phải vào gulpfile.js và nhấn Task Runner Explorer.

69bbf042882440625678105247aedbc684a99d08

2.4. Viết một trang HTML

Thêm mới một New Item đặt tên index.html trong thư mục wwwroot.

2.5. Chạy thử

Giờ thì chạy thử project, xem thành quả ra sao nào :)))

0981998474bc6679021fd8da2530d6c59402b0a6

Như vậy, chúng ta đã cùng nhau xây dựng một ứng dụng ASP.NET Core với TypeScript nho nhỏ. Hẹn gặp lại các bạn ở loạt bài tiếp theo nhé 🙂

Techtalk via viblo

CHIA SẺ