GeeWee

//SquareBlock.jsx

import React from 'react';
import PropTypes from 'prop-types';

import './SquareBlock.css';

/**
 * Building block for Tetrominoes and the grid of the Well, occupying a 1x1
 * square block. The only configurable property square blocks have is their

GeeWee

const SquareBlock : React.SFC = ({ color }) => ( <div className="square-block" style={{ backgroundColor: color }} /> );

GeeWee

// This is what SFC resolves to.
// Notice the same generic type P as before, that defaults to the empty // object
interface StatelessComponent<P = {}> {
   // This is the function signature. We'll explore this further below the snippet
   (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
   // These properties don't matter much, but worth noting here is that propTypes is marked as a property, and that is why we were able to add it earlier.
   propTypes?: ValidationMap<P>;
   contextTypes?: ValidationMap<any>;
   defaultProps?: Partial<P>;
   displayName?: string;

GeeWee

const SquareBlock : React.SFC<any> = ({ color }) => ( <div className="square-block" style={{ backgroundColor: color }} /> );

GeeWee

import React from 'react';

import './SquareBlock.css';

interface Props {
   color: string;
}

/**

GeeWee

//tetromino.jsx
import React from 'react';
import PropTypes from 'prop-types';
import SquareBlock from './SquareBlock';

import './Tetromino.css';

class Tetromino extends React.Component {
 /**
  * A Tetromino is a geometric shape composed of four squares, connected

GeeWee

Tetromino.propTypes = {
 color: PropTypes.string.isRequired,
 grid: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired
};

GeeWee

class Tetromino extends React.Component<Props> {
   static propTypes = {
       color: PropTypes.string.isRequired,
       grid: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired
   };
   //..Other stuff here
}

GeeWee

interface Props {
   color: string,
   grid: number[][]
}

class Tetromino extends React.Component<Props> {
   /**
    * A Tetromino is a geometric shape composed of four squares, connected
    * orthogonally. Read more at http://en.wikipedia.org/wiki/Tetromino
    */

GeeWee

// This is the const enum. Notice the const in front.
const enum FRUITS {
   APPLE = 'APPLE',
   PEAR = 'PEAR',
}

if (someString === FRUITS.APPLE){
   console.log("This is an apple!"
}