TypeScript Support

[lanther]

We need to document how to use TypeScript with React-Twist, along with a sample application.

The main complexity comes from the following language features:

• JSX variable declarations (e.g. <repeat> and <using>).
• Auto-imports, and auto-extending decorators (e.g. @Component).

Right now, TypeScript does not have a plugin model, but this will possibly change (see microsoft/TypeScript#16607).

In the meantime, we'd need to document how to use Twist with TypeScript.

JSX Variable Declarations

1. Use <repeat collection={ this.items } as={ item }> rather than <repeat for={ item in this.items }>

2. When you use as={ varname } to define a variable, you need to add a declaration to the top of the containing function. e.g.:

render() {
     let x;
     return <repeat collection={ this.items } as={ item }>{ item.name }</using>
}

The downside is that you lose the type inference that item belongs to this.items - hopefully we'll be able to extend TypeScript in future to let it know about this properly.

Auto-Imports

You will need to manually import decorators, and manually extend the base class for components that do this for you. i.e.:

@Component({ events: ['accept'] })
class MyComponent {
}

becomes:

import { Component, BaseComponent } from '@twist/react';

@Component({ events: ['accept'] })
class MyComponent extends BaseComponent {
}

Type Declarations

On the plus side, TypeScript supports interfaces for intrinsic elements (see https://www.typescriptlang.org/docs/handbook/jsx.html), so we can provide some typing for <if>, <repeat> etc.

Ideally this would support generics, but I don't think the spirit of the following is possible (would be nice if there's a way to encode this though!):

declare namespace JSX {
  interface IntrinsicElements {
    repeat: { collection: Array<T>, as: T }
  }
}

We'd also need to define TypeScript interfaces for the core Twist classes (Component, Store, SignalDispatcher etc etc).