# typescript & react
[Example Todo Project](https://github.com/tastejs/todomvc/blob/gh-pages/examples/typescript-react/js/app.tsx)

# define state & prop interfaces
```
interface IAppProps {
  day : number;
  totalDays: number;
  title? : String;
}

interface IAppState {
  currentDay: number;
}

interface IHeaderProps {
  title? : String;
  displayDay: number;
}
```

# class def
```
export class App extends React.Component<IAppProps, IAppState>{
    public state : IAppState;

    constructor(props : IAppProps) {
        super(props);

        this.state = {
            selectedDay: 0
        };
    }
    
    public render(){
      return <div>{this.state.selectedDay}</div>
    }
}
```

# default props
```
export class Header extends React.Component<IHeaderProps, {}>{

    public static defaultProps: IHeaderProps = {
        totalDays: null,
        day: null,
        title: 'Welcome to our van adventure'
    };

    constructor(props : IHeaderProps) {
        super(props);
    }
    
    public render(){
      return <div>{this.state.selectedDay}</div>
    }
}
```

# Typescript data mapper pattern
http://cloudmark.github.io/Json-Mapping/