converting to typescript

[devdoomari]

I'm really impressed by react-pixi library, and I'd love to port it to typescript for better usage.

What's your opinion for converting react-pixi to typescript?

ps: it won't affect the build except there'll be extra typescript-definition files (d.ts) for typescript users.

[Izzimach]

I was just looking to add some type checking with flow. Would typescript just involve adding a .ts file? Is this generated or maintained? Could it be done by adding JSDOC style annotations in comments?

[devdoomari]

it would be somewhat more than changing file extensions (such as downloading type-definition files for pixi.js and reactjs), but it'll be more useful on the long run, especially with good IDE-level editors like VS code.

Also, you can just add a d.ts file for typescript (and keep the js file as-is).
Here's what I've been using for react-pixi: (this would be react-pixi.d.ts file)

declare module 'react-pixi' {
  import {
    Component,
    ComponentClass,
    CSSProperties,
    SFC,
    ComponentFactory,
    ClassType,
  } from 'react';
  import * as React from 'react';
  import { render, unmountComponentAtNode } from 'react-dom';
  import {
    Point,
  } from 'pixi.js';

  type StagePropsType = {
    width: number, height: number,
    style?: CSSProperties, backgroundColor?: number,
    transparent?: boolean,
  };
  class Stage extends Component<StagePropsType, void> {}

  type TilingSpritePropsType = {
    image: string, width: number, height: number,
  };
  class TilingSprite extends Component<TilingSpritePropsType, void> {}

  type TextPropsType = {
    text: string,
    x: number, y: number,
    style: CSSProperties,
    anchor: Point,
  };
  class Text extends Component<TextPropsType, void> {}

  type DisplayObjectContainerPropsType = {
    x: number, y: number,
  }
  const DisplayObjectContainer: SFC<DisplayObjectContainerPropsType>;
  class CustomPixiComponentClass<CustomProps, PixiComponent>
      extends React.Component<CustomProps, void> {
    displayObject: PixiComponent;
  }
  interface CustomPixiComponentClassFactory<CustomProps, PixiComponent>
    extends ComponentFactory<CustomProps, CustomPixiComponentClass<CustomProps, PixiComponent>> {
  }
  function CustomPIXIComponent<CustomProps, PixiComponent>(args: {
    customDisplayObject(props: CustomProps): PixiComponent,
    customDidAttach?(displayObject: PixiComponent): void,
    customApplyProps(displayObject: PixiComponent, oldProps: CustomProps, newProps: CustomProps): void,
    customWillDetach?(displayObject: PixiComponent): void,
  }): CustomPixiComponentClassFactory<CustomProps, PixiComponent>

  export = {
    Stage,

    TilingSprite,

    DisplayObjectContainer,
    CustomPixiComponentClass,
    CustomPIXIComponent,

    render,
    unmountComponentAtNode,
  }
}

This isn't 100% correct (and may miss-out some features), but covers most use cases for me.

I'll send in a pull request soon

[Izzimach]

Yeah please send a pull request. Should this get bundled into the package put onto npmjs as well? Do I need to add something to package.json to point to it?