0

I just started using Famo.us and wanted to use it as an opportunity to learn typescript at the same time to leverage on its awesomeness. So I did the following

  1. Used yo famous to create the Famo.us project as per the documentation
  2. I was not sure how to include typescript so I created a typeScriptHTML project, copies the .csproj file over and manually edited it. I tried using the NVTS and specified that it should create it from an existing folder but I always got an error saying that the file path was too long. It checked and some of the modules have very long path. Couldn't even delete them and the system was saying the same thing. In the end I discarded the idea and used the typescript html application. It generated no errors.
  3. I added a file app.ts, wrote some sample code in it and it generated the js file as expected.
  4. Now I wanted to translate main.js to main.ts and I'm stuck with the following issues

    i. var Engine = require('famous/core/Engine'); gives the error could not find symbol 'require'.

    ii. import Engine = require('famous/core/Engine') gives the error: Unable to resolve external module "famous/core/Engine". Changing the path to "../lib/famous/core/Engine" gives a similar error with a different file name.

    iii. Created a file Famous.d.ts but I don't think I'm getting it I'm not doing something right declare module "famous/core/Engine" { class Engine{ public createContext(): Engine } export = Engine }

In the end, my confusion is how to I translate the sample code to typescript:

 /*globals define*/
define(function(require, exports, module) {
    'use strict';
    ///first
    var Engine = require('famous/core/Engine');
    var DeviceView = require('./DeviceView');

    var mainContext = Engine.createContext();
    var device;

    createDevice();

    function createDevice() {
        var deviceOptions = {
            type: 'iphone',
            height: window.innerHeight - 100
        };
        device = new DeviceView(deviceOptions);
        mainContext.add(device);
    }
});

Any assistance appreciated.

ritcoder
  • 3,274
  • 10
  • 42
  • 62

1 Answers1

2

It turned out to be a lot easier than I thought. One way was to declare the class and export it as a module

declare class Engine{
    ...
}
export module 'famous/core/Engine'{ export = Engine; }

Manage to get a tiny definition of famous running using this.

ritcoder
  • 3,274
  • 10
  • 42
  • 62