Declare Sammy js setup using TypeScript

Question

I am just looking at the KnockOut.js tutorial, but replacing the JS code with TS. When adding SammyJS, I stuck to the following code. Can anyone tell me how the Sammy function code is in TS?

function WebmailViewModel() { // Data var self = this; self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; self.chosenFolderId = ko.observable(); self.chosenFolderData = ko.observable(); self.chosenMailData = ko.observable(); // Behaviours self.goToFolder = function(folder) { location.hash = folder }; self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id }; // Client-side routes Sammy(function() { this.get('#:folder', function() { self.chosenFolderId(this.params.folder); self.chosenMailData(null); $.get("/mail", { folder: this.params.folder }, self.chosenFolderData); }); this.get('#:folder/:mailId', function() { self.chosenFolderId(this.params.folder); self.chosenFolderData(null); $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData); }); this.get('', function() { this.app.runRoute('get', '#Inbox') }); }).run(); }; ko.applyBindings(new WebmailViewModel()); 

The following tutorial is here http://learn.knockoutjs.com/#/?tutorial=webmail

thanks

Answer 1

I'm not sure if this answers your question, but you can use the TypeScript definition file that Sammy describes here https://github.com/borisyankov/DefinitelyTyped/blob/master/sammyjs/sammyjs.d.ts For this you need will have enough sammy api to continue the tutorial.

Download the definition file and the link with a special comment similar to the one below.

 ///<reference path="sammyjs/sammyjs.d.ts" /> 

Answer 2

I know this is an old question, but it caused me enough pain to guarantee a recommendation for future visitors.

I rewrote the sample code above in TypeScript.

 /// <reference path="../Scripts/typings/jquery/jquery.d.ts" /> /// <reference path="../Scripts/typings/Sammy/Sammy.d.ts" /> import sammy = require("sammy"); class WebmailViewModel { // Data public folders: Array<string> = ['Inbox', 'Archive', 'Sent', 'Spam']; public chosenFolderId: KnockoutObservable<any> = ko.observable(); public chosenFolderData: KnockoutObservable<any> = ko.observable(); public chosenMailData: KnockoutObservable<any> = ko.observable(); // Behaviours public goToFolder = function (folder) { window.location.hash = folder }; public goToMail = function (mail) { window.location.hash = mail.folder + '/' + mail.id }; // Client-side routes public SammyApp: sammy.Application = Sammy().get('#:folder', context => { this.chosenFolderId(context.params.folder); this.chosenMailData(null); $.get("/mail", { folder: context.params.folder }, this.chosenFolderData); }).get('#:folder/:mailId', context => { this.chosenFolderId(context.params.folder); this.chosenFolderData(null); $.get("/mail", { mailId: context.params.mailId }, this.chosenMailData); }).get('', context => { context.app.runRoute('get', '#Inbox'); }).run(); }; 

Then at $ (document) .ready ()

 var viewModel = new WebmailViewModel; ko.applyBindings(viewModel); 

Many thanks to @Vladimir, whose answer to question 19395335 lead me to a solution.

Greetings.