javascript - Videregivelse af MVC-modeldata til klient-side TypeScript-kode

Når jeg bruger MVC, sender jeg nogle gange serverens modeldata til klient-side JavaScript ved at bruge Razor injiceret i JavaScript, som følger:

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

Dette sætter en JavaScript-variabel ved navn myClientGuid til værdien af server-side model-egenskaben MyServerGuid. Når det når klienten, ser koden nogenlunde sådan ud inde i browseren:

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

Dette gør det muligt for eksterne JavaScript-filer at bruge denne variabel.

Mit spørgsmål er, i TypeScript, siden al kode skal refereres via eksterne filer, hvad er den bedste måde at videregive server-side felter til TypeScript-kode? Eksterne kodefiler kan ikke indeholde Razor-kode. Skal jeg bruge den samme teknik som ovenfor, i View, og blande JavaScript og TypeScript inden for projektet?

Svar #1

TypeScript-kompilatoren skal bare vide, at dine server-side felter eksisterer. Den nemmeste måde at gøre det på er at bruge ambient-deklarationer (se afsnit 10 i specifikationen). For eksempel, hvis du havde en .ts-fil, der skulle bruge myClientGuid, kunne du gøre

declare var myClientGuid: string;

øverst i din hoved-.ts-fil. Kompilatoren vil ikke generere kode for denne var-deklaration, så du vil ikke overskrive noget. Nu vil enhver fil, der refererer til den .ts-fil, vide, at der er en myClientGuid-streng tilgængelig i globalt scope.

Svar #2

En anden løsning (for at undgå globale variabler) er at pakke TypeScript-koden ind i en funktion, der tager de nødvendige server-side felter som parametre:

I TypeScript-fil:

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

I .cshtml:

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

Hvis du bruger RequireJS, kan du også eksportere setupMyPage-funktionen som et modul for at undgå at tilføje funktionen til det globale navnrum:

I TypeScript-fil:

export = setupMyPage;

I .cshtml:

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

Relaterede artikler