JavaScript do typeScriptu
Ahoj.
Mám knihovnu Knockout JS.
Zkouším si příklad viewModelu přepsat do objektového typescriptu.
Ukázka je tady: knockoutjs.com
Text z inputu se přesune do DIVU:
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
A následující kód - 100% (funkční) přepisuji do typescriptu:
// Here's my data model
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.pureComputed(function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
Můj Typescript vypadá takto:
class InputContent {
public first: any;
public last: any;
public fullString: any;
constructor( firstName: string, lastName: string) {
this.first = firstName;
this.last = lastName;
ko.observable(this.first);
ko.observable(this.last);
};
returnSavedData(): any {
//firstName = this.firstName;
this.fullString = ko.pureComputed(function () {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return " " + ko.observable("lastName"); // toto je trošku blbost, ale chápete....
}, this);
}
}Nenapadá někoho jak to zprovoznit?
Případně, není zadání nesmyslné?
Knockaut přece očekává, jako viewModel funkci. Nikoliv objekt.
To se snažím obejít tím, že vytvořím objekt, který má funkci, a tu se mu snažím "podstrčit" => tedy něco jako ukazatel na funkci z instancovaného objektu.
Jde to? Nejde to? Kde mám chybu 
Mělo by fungovat tohle:
A doporučoval bych, aby sis z Githubu stáhnul typové definice pro Knockout a používal je místo "any".
Stačilo opravit překlep (fullString => fullName) a už to jede dle tebe.
Vůbec jsem netušil, že v TS jde zapsat něco takového:
To jsou klasické lambda výrazy z .NET, nebo co to teda je?
Nedařilo se mi rozlousknout, jak do té anonymní fce předat ty proměnné.
Pořád mi to předtím hlásilo not defined.
Existuje nějaký slušný tutorial pro typescript?
Ideálně v cz, ale není podmínkou.
Jinak díky moc.
To nebyl překlep, přepsal jsem to podle původního JS.
Zápis "() => { }" je ekvivaletní "function () { }".
Tutorial pro TS je přímo na jeho stránkách.
Hm...
To mě zajímá.
Tvrzení: Zápis "() => { }" je ekvivaletní "function () { }".
Na zkoušku, řádek
Jsem nahradil takto:
Překladač neprotestoval, syntakticky taky OK, ale ten druhý případ nejede na klientovi.
Netušíš proč? Já bych tipoval, že vně funkce nejsou this.firstName() definované.
Nebo se pletu.
Chybí ti tam return.
Jo. Teď už to funguje, právě.
Jenže předtím tam return nebyl a stejně to funguje i bez něho.
Proč tam musejí být tyto uvozovky: ` ?
Zkoušel jsem to s nimi i bez nich " či ' či \"
V čem jsou výsadní ty ` ?
Předpokládám, že při jejich použití se projde řetězec na proměnné, podobně, jako
v PHP při užití "
Je to tak?
Omlouvám se za tapetování, ale tohle mi vrtá hlavou, když si to zkouším.
Tyto dva zápisy jsou ekvivalentní:
Pokud je ale uvnitř složených závorek pouze return, jde to ještě zjednodušit na:
Použití `` jsi pochopil vcelku správně. V nich se vyhodnocují výrazy uvnitř ${};
TS se vždy překládá na JS, a často je zajímavé se podívat, jakým způsobem je to provedeno. Tím často pochopíš i k čemu je to dobré. Třeba zde.
Děkuji!
Jdu se projet, budu nad tím přemýšlet.