Đi qua MVC Data Model để Client-side Mã nguyên cảo

Question

Khi sử dụng MVC, tôi đôi khi truyền dữ liệu mô hình của máy chủ để các client-side JavaScript bằng cách sử dụng Razor tiêm vào JavaScript, như sau:

<script type="text/javascript"> 
    var myClientGuid = '@Model.MyServerGuid'; 
</script> 

bộ này biến JavaScript có tên là myClientGuid với giá trị của thuộc tính mô hình phía máy chủ MyServerGuid. Khi đến khách hàng, mã trông giống như thế này bên trong trình duyệt:

<script type="text/javascript"> 
    var myClientGuid = 'EF0077AB-0482-4D91-90A7-75285F01CA6F'; 
</script> 

Điều này cho phép các tệp JavaScript bên ngoài sử dụng biến này.

Câu hỏi của tôi là, trong TypeScript, vì mã tất cả phải được tham chiếu qua tệp bên ngoài, cách tốt nhất để chuyển trường phía máy chủ sang mã TypeScript là gì? Các tệp mã bên ngoài không thể chứa mã Razor. Tôi có nên sử dụng kỹ thuật tương tự như trên, trong View, trộn JavaScript và Typescript trong dự án?

Answer 1

Trình biên dịch TypeScript chỉ cần biết rằng các trường phía máy chủ của bạn tồn tại. Cách dễ nhất để làm điều đó là sử dụng các khai báo môi trường xung quanh (xem phần 10 của đặc tả). Ví dụ: nếu bạn có tệp .ts cần sử dụng myClientGuid, bạn có thể làm

declare var myClientGuid: string; 

ở đầu tệp .ts chính của bạn. Trình biên dịch sẽ không tạo ra mã cho khai báo var này, vì vậy bạn sẽ không làm bất cứ điều gì. Bây giờ bất kỳ tệp nào tham chiếu tệp .ts sẽ biết rằng có một chuỗi myClientGuid có sẵn trong phạm vi toàn cục.

Answer 2

Một giải pháp khác (để tránh các biến toàn cục) là để bọc mã bản sao vào một chức năng mà sẽ đưa các lĩnh vực server-side cần thiết như các thông số:

Trong tập tin typescript:

function setupMyPage(myGuid:string) { 
    ... 
} 

Trong .cshtml :

<script src='@Url.Content("<path-to-typescript>")'></script> 
<script> 
    setupMyPage('@Model.MyServerGuid'); 
</script> 

Nếu bạn đang sử dụng RequireJS, bạn cũng có thể xuất chức năng setupMyPage làm mô-đun, để tránh thêm hàm vào toàn cục na mespace:

Trong tập tin typescript:

export = setupMyPage; 

Trong .cshtml:

<script> 
    require(['@Url.Content("<path-to-typescript>")'], function(setupMyPage) { 
     setupMyPage('@Model.MyServerGuid'); 
    }; 
</script>