Передача данных модели MVC на клиентский код TypeScript

При использовании MVC я иногда передаю данные модели сервера на клиентский JavaScript с помощью Razor, введенной в JavaScript, следующим образом:

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

Это устанавливает переменную JavaScript с именем myClientGuid в значение свойства модели на стороне сервера MyServerGuid. Когда клиент достигает клиента, код выглядит примерно так в браузере:

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

Это позволяет внешним файлам JavaScript использовать эту переменную.

Мой вопрос в TypeScript, так как весь код должен ссылаться через внешние файлы, что лучший способ передать серверные поля в код TypeScript? Внешние файлы кода не могут содержать код Razor. Должен ли я использовать тот же метод, что и выше, в представлении, смешивая JavaScript и TypeScript внутри проекта?

Ответ 1

Компилятор TypeScript просто должен знать, что существуют ваши серверные поля. Самый простой способ сделать это - использовать эмбиентные объявления (см. Раздел 10 спецификации). Например, если у вас был файл .ts, который должен был использовать myClientGuid, вы могли бы сделать

declare var myClientGuid: string;

вверху вашего основного файла .ts. Компилятор не будет генерировать код для этого объявления var, так что вы не будете clobber ничего. Теперь любые файлы, которые ссылаются на этот файл .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>