Să începem prin crearea unui nou dosar. O vom numi proj. Cu toate acestea, acesta poate da orice nume necesar.
Proiectul nostru va avea următoarea structură:
Fișierele TypeScript vor fi localizate în folderul src. Procesați compilatorul de tip TextScript și plasați rezultatul în construcție.
Să creați această structură:
Mai întâi, asigurați-vă că setările TypeScript și Tipings sunt setate global.
Trebuie să obținem chiar biblioteca Knockout, precum și ceva numit RequireJS. RequireJS este o bibliotecă care vă permite să încărcați modulele asincron în timpul rulării.
Există trei modalități prin care puteți face acest lucru:
- Încărcați manual fișierele și plasați-le.
- Descărcați fișiere prin intermediul managerului de pachete, de exemplu, Bower. și postați-le.
- Utilizați sistemul de difuzare a conținutului (CDN) pentru a plasa fișierele.
Nu vom complica și nu vom alege prima opțiune, dar în documentația Knockout există o descriere detaliată a utilizării CDN. și alte biblioteci precum RequireJS pot fi găsite pe cdnjs.
Creați folderul extern în rădăcina proiectului nostru.
Acum încărcați Knockout și RequireJS în acest dosar. Cele mai recente și cele mai mici versiuni ale acestor fișiere ar trebui să se potrivească.
Pentru a face acest lucru, creați un fișier tsconfig.json. o listă de fișiere de intrare și toate setările de compilare. Pur și simplu a crea un nou fișier numit tsconfig.json în directorul rădăcină al proiectului, și inserați următorul cod:
Aici este inclus fișierul typing / index.d.ts. care a fost creat de către Tipings. Acest fișier include automat toate dependințele instalate.
Puteți afla mai multe despre fișierele tsconfig.json aici.
Să scriem primul nostru cod pe TypeScript folosind Knockout. Mai întâi, creați un fișier numit Hello.ts în directorul src.
Apoi, în același director src, creați fișierul requ-config.ts.
Acest fișier va spune RequireJS unde să caute Knockout când îl importăm ca în fișierul hello.ts. Toate paginile pe care le creați trebuie să includă acest fișier imediat după RequireJS, dar înainte de a importa altceva. Pentru a înțelege mai bine structura acestui fișier și cum să configurați RequireJS, citiți documentația.
Pentru a afișa HelloViewModel. aveți nevoie de o viziune. Creați în rădăcina proiectului un index.html cu următorul conținut:
Rețineți că există trei etichete de script aici. Mai întâi, includem biblioteca RequireJS în sine. Apoi atribuim căile dependențelor externe în fișierul requ-config.js. așa că RequJS știa unde să caute dependențe. În cele din urmă, suntem solicitați cu o listă de module încărcabile.
Acum deschideți index.html în browser-ul dvs. preferat și totul ar trebui să fie gata! Ar trebui să vedeți o pagină cu textul "Hello from TypeScript and Knockout!". Mai jos vor fi două câmpuri de intrare. Dacă schimbați conținutul și traduceți focalizarea, mesajul original se va schimba.
Suport pentru traducerea documentației:
Articole similare
Trimiteți-le prietenilor: