将 MVC 模型数据传递给客户端 TypeScript 代码答案

【问题标题】：Passing MVC Model Data to Client-side TypeScript Code将 MVC 模型数据传递给客户端 TypeScript 代码
【发布时间】：2012-09-30 03:11:32
【问题描述】：

在使用 MVC 时，我有时会通过将 Razor 注入到 JavaScript 中，将服务器的模型数据传递给客户端 JavaScript，如下所示：

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

这会将名为 myClientGuid 的 JavaScript 变量设置为服务器端模型属性 MyServerGuid 的值。当它到达客户端时，代码在浏览器中看起来像这样：

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

这允许外部 JavaScript 文件使用此变量。

我的问题是，在 TypeScript 中，由于所有代码必须通过外部文件引用，那么将服务器端字段传递给 TypeScript 代码的最佳方法是什么？外部代码文件不能包含 Razor 代码。我是否应该在视图中使用与上述相同的技术，在项目中混合 JavaScript 和 Typescript？

【问题讨论】：

【解决方案1】：

TypeScript 编译器只需要知道您的服务器端字段是否存在。最简单的方法是使用环境声明（参见规范的第 10 节）。例如，如果您有一个需要使用 myClientGuid 的 .ts 文件，您可以这样做

declare var myClientGuid: string;

在您的主 .ts 文件的顶部。编译器不会为这个 var 声明生成代码，所以你不会破坏任何东西。现在，任何引用该 .ts 文件的文件都将知道在全局范围内有一个 myClientGuid 字符串可用。

【讨论】：

【解决方案2】：

另一个解决方案（避免全局变量）是将 TypeScript 代码包装在一个函数中，该函数将所需的服务器端字段作为参数：

在 TypeScript 文件中：

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

在 .cshtml 中：

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

如果你使用RequireJS，你也可以将setupMyPage函数导出为一个模块，以避免将函数添加到全局命名空间：

在 TypeScript 文件中：

export = setupMyPage;

在 .cshtml 中：

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

【讨论】：