将 MVC 模型数据传递给客户端 TypeScript 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12805938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing MVC Model Data to Client-side TypeScript Code
提问by ChessWhiz
When using MVC, I sometimes pass the server's model data to the client-side JavaScript by using Razor injected into the JavaScript, as follows:
在使用MVC的时候，我有时会使用Razor注入JavaScript的方式将服务端的模型数据传递给客户端JavaScript，如下：
<script type="text/javascript">
var myClientGuid = '@Model.MyServerGuid';
</script>
This sets a JavaScript variable named myClientGuidto the value of the server-side model property MyServerGuid. When it reaches the client, the code looks something like this inside the browser:
这将一个 JavaScript 变量设置为myClientGuid服务器端模型属性的值MyServerGuid。当它到达客户端时，代码在浏览器中看起来像这样：
<script type="text/javascript">
var myClientGuid = 'EF0077AB-0482-4D91-90A7-75285F01CA6F';
</script>
This allows external JavaScript files to use this variable.
这允许外部 JavaScript 文件使用此变量。
My question is, in TypeScript, since allcode must be referenced via external files, what is the best way to pass server-side fields to TypeScript code? External code files cannot contain Razor code. Should I use the same technique as above, in the View, mixing JavaScript and Typescript within the project?
我的问题是，在 TypeScript 中，由于 所有代码都必须通过外部文件引用，将服务器端字段传递给 TypeScript 代码的最佳方法是什么？外部代码文件不能包含 Razor 代码。我是否应该使用与上述相同的技术，在视图中，在项目中混合 JavaScript 和 Typescript？
回答by Brian Terlson
The TypeScript compiler just needs to know that your server-side fields exist. The easiest way to do that is to use ambient declarations (see section 10 of the spec). For example, if you had a .ts file that needed to use myClientGuid, you could do
TypeScript 编译器只需要知道您的服务器端字段存在。最简单的方法是使用环境声明（参见规范的第 10 节）。例如，如果您有一个需要使用 myClientGuid 的 .ts 文件，您可以这样做
declare var myClientGuid: string;
at the top of your main .ts file. The compiler will not generate code for this var declaration, so you won't clobber anything. Now any files that reference that .ts file will know that there is a myClientGuid string available in global scope.
在主 .ts 文件的顶部。编译器不会为这个 var 声明生成代码，所以你不会破坏任何东西。现在，任何引用该 .ts 文件的文件都会知道在全局范围内有一个 myClientGuid 字符串可用。
回答by Geir Sagberg
Another solution (to avoid global variables) is to wrap the TypeScript code in a function that takes the needed server-side fields as parameters:
另一种解决方案（避免全局变量）是将 TypeScript 代码包装在一个函数中，该函数将所需的服务器端字段作为参数：
In TypeScript file:
在打字稿文件中：
function setupMyPage(myGuid:string) {
...
}
In .cshtml:
在 .cshtml 中：
<script src='@Url.Content("<path-to-typescript>")'></script>
<script>
setupMyPage('@Model.MyServerGuid');
</script>
If you are using RequireJS, you can also export the setupMyPagefunction as a module, to avoid adding the function to global namespace:
如果您使用 RequireJS，您还可以将setupMyPage函数导出为模块，以避免将函数添加到全局命名空间：
In TypeScript file:
在打字稿文件中：
export = setupMyPage;
In .cshtml:
在 .cshtml 中：
<script>
require(['@Url.Content("<path-to-typescript>")'], function(setupMyPage) {
setupMyPage('@Model.MyServerGuid');
};
</script>
