javascript - Hvordan lage et grunnleggende TypeScript-prosjekt ved å bruke jQuery, RequireJS og KnockoutJS

Jeg har lett etter en enkel veiledning for å lage det mest grunnleggende eksempelet på et Visual Studio 2012 TypeScript-prosjekt som bruker RequireJS, jQuery og KnockoutJS. Det finnes flere eksempler tilgjengelig, men for meg var noen mer kompliserte enn jeg ønsket, så jeg bestemte meg for å lage en veiledning og har publisert den her for offentlig vurdering. Jeg har svart på mitt eget spørsmål som en Q&A-lignende kunnskapsdelingsøvelse.

For de som ikke er kjent, her er en rask oversikt over de inkluderte komponentene...

TypeScript - En Visual Studio-utvidelse som tillater skripting for å lage en .TS-fil via et språk som er en superset av JavaScript. Dette gir muligheten til å definere en datatyp assosiert med metoder og variabler - noe som ellers mangler i JavaScript. Ved å gjøre dette kan kompileringstidskontroller sikre riktig bruk i et forsøk på å redusere kjøringstidskonflikter. Når Visual Studio-prosjektet bygges, vil Visual Studio-utvidelsen kompilere skriptet til faktisk JavaScript. Som sådan kommer denne utvidelsen med sin egen kompilator - tsc.exe. Det forventes at de resulterende JavaScript-filene blir distribuert til produksjon, ikke kildekode .ts-filene.

jQuery - et JavaScript-rammeverk for navigasjon og manipulering av HTML-dokumenter, hendelseshåndtering, animasjon og Ajax-interaksjon.

RequireJS - Avhengighetslaster. Noen ganger kan JavaScript-referanser bli kaotiske. Dette forsøker å hjelpe med disse problemene. Mitt eksempel viser at selv om mange JavaScript-filer er i bruk, refererer HTML kun til én - rot-JavaScript-filen som laster de andre.

KnockoutJS - UI-binding, som benytter MVVM-mønsteret. HTML-visninger refererer til variabler og metoder i en view-modell. View-modellen er et JavaScript-objekt (JavaScript-filen er sannsynligvis resultatet av å kompilere en .ts-fil - se TypeScript ovenfor).

DefinitelyTyped - Det er også inkludert to DefinitelyTyped NuGet-pakker. Fordi TypeScript forsøker å verifisere bruk av datatyper, utfører det en sjekk for å sikre at det er kjent med alle referanser. JavaScript er litt mer løst enn det. For å tilfredsstille TypeScript (når man refererer til eksterne JavaScript-objekter) trenger vi en måte å beskrive (for TypeScript) objektene vi forventer å bli brukt. Disse DefinitelyTyped-skriptene gir denne definisjonen. De gir ingen funksjonalitet, bare klarhet for TypeScript-kompilatoren slik at den kan utføre disse sjekkene.

I eksemplet nedenfor vil du se

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

Slik vil TypeScript-kompilatoren inkludere requirejs DefinitelyTyped-definisjonsfilen. Organisasjonen som lager disse DefinitelyTyped-skriptene har laget en stor samling. Her refererer vi bare til to - KnockoutJS og RequireJS (vel, fordi det er omfanget av denne veiledningen)

Svar #1

Ansvarsfraskrivelse

Denne veiledningen vil vise "a" måte å bygge et grunnleggende nettsted ved hjelp av TypeScript, jQuery, KnockoutJS og RequireJS. Det finnes mange andre måter å gjøre det på.

Komme i gang

Installer Visual Studio-utvidelse

Installer Visual Studio 2012-utvidelse - TypeScript for Microsoft Visual Studio 2012 PowerTool 1.0.1.0 http://visualstudiogallery.msdn.microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1

Opprett nytt Visual Studio-prosjekt

  • Start Visual Studio 2012.
  • Velg menyelementet "Fil"->"Ny"->"Prosjekt..."
  • Naviger til "Templates"->"Other Languages"->"TypeScript" (dette oppretter faktisk en prosjektfil med filtypen .csproj - rart)
  • Velg prosjekttype "HTML-applikasjon med TypeScript"

Opprydding

Fjern filene app.css, app.ts fra prosjektet

Legg til komponenter

Ved å bruke NuGet, legg til...

  • RequireJS (jeg valgte versjon 2.1.15 for denne veiledningen)
  • KnockoutJS (Jeg valgte versjon 3.2.0 for denne veiledningen)
  • jQuery (jeg valgte versjon 2.1.1 for denne veiledningen)
  • requirejs.TypeScript.DefinitelyTyped (Jeg valgte versjon 0.2.0 av
    Jason Jarrett for denne veiledningen. Det installerte en TypeScript-def-fil av Josh Baldwin - versjon 2.1.8)
  • knockout.TypeScript.DefinitelyTyped (Jeg valgte versjon 0.5.7 av
    Jason Jarrett for denne veiledningen)

Sett opp prosjektmapper

Opprett prosjektmapper i prosjektets rot

  • Søknad
  • Modeller
  • ViewModels

Lag en grunnleggende TypeScript-modell

Legg til TypeScript-fil i prosjektmappen "Models"

  • Høyreklikk på mappen "Models" i Solution Explorer
  • velg kontekstmenyelementet "Legg til"->"Nytt element..."
  • I venstre rute, marker "Visual C#"
  • I høyre rute, marker "TypeScript-fil"
  • I tekstboksen for filnavn, skriv inn "myTestModel.ts" Klikk på knappen "Legg til"

Rediger filen "myTestModel.ts"

class myTestModel {
    public fieldZ: string;
    public fieldY: string;
    public fieldX: number;
}
export=myTestModel;

Opprett en TypeScript visningsmodell

Legg til TypeScript-fil i prosjektmappen "ViewModels"

  • Høyreklikk på mappen "ViewModels" i Solution Explorer
  • velg kontekstmenyelementet "Legg til"->"Nytt element..."
  • I venstre rute, marker "Visual C#"
  • I høyre rute, marker "TypeScript-fil"
  • I filnavnboksen skriver du inn "myViewModel.ts"
  • Klikk på knappen «Legg til»

Endre filen myViewModel.ts...

/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />

import myTestModel = require("Models/myTestModel");
import ko = require("knockout");

class myViewModel {
    public myString: KnockoutObservable<string>;
    public myNumber: KnockoutObservable<number>;
    public myComplexObject: KnockoutObservable<myTestModel>;

    constructor() {
        this.myString = ko.observable("some test data");
        this.myNumber = ko.observable(987);

        var tempComplexObject = new myTestModel;
        tempComplexObject.fieldZ = "some bogus test data";
        tempComplexObject.fieldY = "another bogus test data";
        tempComplexObject.fieldX = 123;

        this.myComplexObject = ko.observable(tempComplexObject);
    }

    myButton_Click() {
        alert("I was clicked");
    }
}
export=myViewModel;

Legg til konfigurasjon

Legg til RequireJS-konfigurasjonsfil

  • Høyreklikk prosjektmappen "Application" i Løsningutforskeren
  • velg kontekstmenyvalg «Legg til»->«Nytt element...»
  • I venstre rute, marker "Visual C#"
  • I høyre rute, marker "TypeScript-fil"
  • I filnavn-tekstboksen skriver du inn "require-config.ts"
  • Klikk på knappen «Legg til»

Endre filen "require-config.ts"

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

require.config({
    baseUrl: "",
    paths: {
        "jQuery": "Scripts/jquery-2.1.1",
        "knockout": "Scripts/knockout-3.2.0.debug",
        "myViewModel": "ViewModels/myViewModel"
    },
    shim: {
        "jQuery": {
            exports: "$"
        }
    },
});

require(["jQuery"], function ($) {
    $(document).ready(function () {
        require(["knockout", "myViewModel"], (knockout, myViewModel) => {
            var viewModel = new myViewModel;
            knockout.applyBindings(viewModel);
        });
    });
});

Endre eksisterende fil index.html

Trenger å tilpasse visningen med visningsmodellen.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <script data-main="Application/require-config" src="Scripts/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>

        <div id="myStringTest" data-bind="text: myString"></div>
        <input id="myStringTest2" data-bind="value: myString" />
        <input id="myNumberTest" data-bind="value: myNumber" />
        <input id="myComplexObjectTest" data-bind="value: myComplexObject().fieldZ" />
        <button id="myMethodTest" data-bind="click: myButton_Click" >click me</button>
    </body>
</html>

Kjør det

OK - på tide å prøve. Komplett, sett noen breakpoint i .ts-filene, og trykk F5.

Konklusjon:

Som du kan se, er det ikke mye kode i eksemplet. Hvis du kjører eksemplet og klikker på knappen, vil du finne at knappen på index.html er bundet til en metode i myViewModel.ts kalt myButton_Click. Også tekstboksen myStringTest2 og myNumberTest er bundet til variabler definert i visningsmodellen.

Filene require-config.ts inneholder listen over avhengigheter som er koblet sammen. Linjen "knockout.applyBindings(viewModel)" knytter instansen av myViewModel til HTML-visningen.

Legg merke til hvordan TypeScript tillater at variabler kan deklareres med en datatyper?

Jeg håper denne introduksjonen hjelper. Bare det å legge de forskjellige delene på bordet hjalp meg å visualisere hvordan disse komponentene fungerer sammen. KnockoutJS har noen kule plug-ins - som knockout-mapping - som gjør det mulig for data hentet fra en webtjeneste å bli direkte bundet til visningsmodellen uten mellomliggende transformasjon eller oversettelse. I tillegg kan knockoutjs støtte templating - antagelig slik at master-sider kan implementeres.

For fullstendighetens skyld vil jeg legge til en prosjektmappe kalt Views, og holde min html der. Jeg tror det er mer tradisjonelt for MVC/MVVM-utvikling. URL-en som har .html plager meg fortsatt. Jeg liker MVC-stil rutehåndtering (ingen filendelser), men dette er også ganske kult - spesielt siden det ikke er noe mer enn HTML og JavaScript - virkelig plattformuavhengig. Bortsett fra webtjenestekall (ikke inkludert i eksemplet) er det ingen postbacks, og klient-side prosessering er rask.

Vennligst føl deg fri til å kommentere...

Relaterte artikler