How to use the tabris.Action function in tabris

import {Action, NavigationView, contentView, device} from 'tabris';

// Create an action with an image and a selection handler

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0,
  background: '#e7e7e7'
}).appendTo(contentView);

new Action({
  title: 'Action',
  image: {
    src: device.platform === 'iOS' ? 'resources/share-black-24dp@3x.png' : 'resources/share-white-24dp@3x.png',
    scale: 3
  }
}).on('select', () => console.log('Action selected.'))
  .appendTo(navigationView);

import { Composite, Action, WidgetCollection, Button } from 'tabris';

const widget: Action = new Action();
widget.appendTo(new Composite());
widget.insertBefore(new Composite());
widget.insertAfter(new Composite());

/*Expected
(4,
not assignable to parameter
(5,
not assignable to parameter
(6,
not assignable to parameter
*/

let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView = new NavigationView();
const badlyTypedNavigationView2: NavigationView = new NavigationView();
const badlyTypedNavigationView3: NavigationView = new NavigationView();
const typedNavigationView: NavigationView = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
not assignable to parameter
(20,
not assignable to parameter
*/

function test_Action() {
  var widget: Action = new Action();
  widget.set("foo", 23);
  widget.set({
    image: {src: "http://example.org"},
    title: "foo",
    placementPriority: "high"
  });
  var self: Action = widget.on("event", function(widget: Action) {});
}

function showPopover() {
  const popover = new Popover({width: 300, height: 400, anchor: button})
    .on('close', () => console.log('Popover closed'))
    .open();
  const navigationView = new NavigationView({
    layoutData: {left: 0, right: 0, top: 0, bottom: 0},
    navigationAction: new Action({
      title: 'Close',
      image: {
        src: device.platform === 'iOS' ? 'resources/close-black-24dp@3x.png' : 'resources/close-white-24dp@3x.png',
        scale: 3
      }
    }).on('select', () => popover.close())
  }).appendTo(popover.contentView);
  const page = new Page({title: 'Popover'}).appendTo(navigationView);
  new TextView({centerX: 0, centerY: 0, text: 'Hello popover'}).appendTo(page);
}

createCheckBox('Custom navigation action', ({value: checked}) => {
  if (checked) {
    navigationView.navigationAction = new Action({
      title: 'Close',
      image: {
        src: device.platform === 'iOS' ? 'resources/close-black-24dp@3x.png' : 'resources/close-white-24dp@3x.png',
        scale: 3
      }
    }).on('select', () => console.log('navigationAction selected'));
  } else {
    navigationView.navigationAction = null;
  }
}, false);

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, height: 144,
  drawerActionVisible: true
}).appendTo(contentView);

const page = new Page({
  title: 'NavigationView',
  background: '#eeeeee'
}).appendTo(navigationView);

new TextView({
  centerX: 0, centerY: 0,
  text: 'Page content'
}).appendTo(page);

new Action({title: 'Search'}).appendTo(navigationView);
new Action({
  title: 'Share',
  image: {
    src: device.platform === 'iOS' ? 'resources/share-black-24dp@3x.png' : 'resources/share-white-24dp@3x.png',
    scale: 3
  }
}).appendTo(navigationView);

const controls = new ScrollView({
  left: 0, right: 0, top: 'prev()', bottom: 0,
  background: 'white',
  elevation: 12
}).appendTo(contentView);

createCheckBox('Show toolbar', ({value: checked}) => {
  navigationView.toolbarVisible = checked;

const ABOUT_ACTION_TITLE = 'About';

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0,
  drawerActionVisible: true
}).appendTo(contentView);

tabris.drawer.enabled = true;
tabris.drawer.append(
  new BooksPageSelector({
    left: 0, top: 16, right: 0, bottom: 0
  })
);

new Action({
  id: 'aboutAction',
  title: ABOUT_ACTION_TITLE,
  placementPriority: 'high',
  image:  {
    src: device.platform === 'iOS' ? 'images/about-black-24dp@3x.png' : 'images/about-white-24dp@3x.png',
    scale: 3
  }
}).on('select', () => new AboutPage().appendTo(navigationView))
  .appendTo(navigationView);

function createAction(title, image, placement) {
  new Action({
    title,
    placement,
    image: {src: image, scale: 3}
  }).appendTo(navigationView);
}

function navigationViewSnippet(parent) {
  dimen(parent, large);
  const navigationView = new NavigationView({
    left: 16, right: 16, top: 16, bottom: 16,
    drawerActionVisible: true,
    actionColor: device.platform === 'iOS' ? 'black' : 'white'
  }).appendTo(parent);
  new Page({title: 'Tabris.js'}).appendTo(navigationView);
  new Action({image: 'resources/search-black-24dp@3x.png'}).appendTo(navigationView);
}