javascript - 将 MVC 模型数据传递给客户端 TypeScript 代码

Question

在使用 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？

score 17 · Accepted Answer

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

declare var myClientGuid: string;

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

score 4 · Accepted Answer

另一种解决方案（避免全局变量）是将 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>

2 回答 2