Passing MVC Model Data to Client-side TypeScript Code

Question

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:

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

This sets a JavaScript variable named myClientGuid to the value of the server-side model property MyServerGuid. When it reaches the client, the code looks something like this inside the browser:

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

This allows external JavaScript files to use this variable.

My question is, in TypeScript, since all code 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?

Brian Terlson · Accepted Answer · 2012-10-09 18:19:01Z

18

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

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.

answered Oct 9, 2012 at 18:19

Brian Terlson

9,7001 gold badge24 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stvn Over a year ago

Interesting. Any suggestions on how to do this is you don't want to add the variable directly to the window object to avoid pollution?

Maxim Gershkovich Over a year ago

Far out, I have been pulling my hair out trying to work out what the correct way to do this is and finally found something that makes some sense. Thank you! @stvn I would think that you could create a single global object that holds your config parameters and that mostly avoids poluting the global namespace too much as far as I am concerned.

Geir Sagberg · Accepted Answer · 2014-08-08 11:24:54Z

4

Another solution (to avoid global variables) is to wrap the TypeScript code in a function that takes the needed server-side fields as parameters:

In TypeScript file:

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

In .cshtml:

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

If you are using RequireJS, you can also export the setupMyPage function as a module, to avoid adding the function to global namespace:

In TypeScript file:

export = setupMyPage;

In .cshtml:

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

answered Aug 8, 2014 at 11:24

Geir Sagberg

9,8318 gold badges49 silver badges62 bronze badges

Collectives™ on Stack Overflow

Passing MVC Model Data to Client-side TypeScript Code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related