react

   1 var path = require('path');
   2 
   3 module.exports = {
   4   entry: {main:'./greeter.js'},
   5   resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
   6   output: {
   7     filename: 'bundle.js',
   8     path: path.resolve(__dirname, 'dist')
   9   }
  10 };

   1 {
   2     "compilerOptions": {
   3         "module": "es2015",
   4         "target": "es5",
   5         "noImplicitAny": true,
   6         "removeComments": true,
   7         "preserveConstEnums": true,
   8         "sourceMap": true,
   9         "moduleResolution": "node",
  10         "allowSyntheticDefaultImports": true,
  11         "jsx": "react"
  12     }
  13 }

   1 function getText() {
   2     return "text";
   3 }
   4 
   5 interface Person {
   6     firstName: string;
   7     lastName: string;
   8 }
   9 
  10 function greeterPerson(p: Person) {
  11     return "Hello GP, " + p.firstName + ' ' + p.lastName + ' ' + getText();
  12 }
  13 
  14 function greeter(person: string) {
  15     return "Hello, " + person;
  16 }
  17 
  18 interface HumanInterface {
  19     name: string;
  20     getName(): void;
  21 }
  22 
  23 class Human implements HumanInterface {
  24     name: string;
  25 
  26     constructor(name: string) {
  27         this.name = name;
  28     }
  29 
  30     getName() {
  31         return "My name is " + this.name;
  32     }
  33 }
  34 
  35 class PubSub {
  36     callbacks: Function[];
  37 
  38     constructor() {
  39         this.callbacks = [];
  40     }
  41 
  42     addListener(fn: Function): void {
  43         this.callbacks.push(fn);
  44     }
  45 
  46     notify(message: string): void {
  47         this.callbacks.forEach((fn) => {
  48             fn(message);
  49         });
  50     }
  51 }
  52 let pubSub = new PubSub();
  53 
  54 export { greeter, greeterPerson, Human, HumanInterface, Person, getText, PubSub, pubSub }

   1 {
   2   "name": "test",
   3   "private": true,
   4   "version": "0.0.0",
   5   "devDependencies": {
   6     "@types/react": "15.0.35",
   7     "@types/react-dom": "15.5.1",
   8     "@types/webpack-env": "1.13.0",
   9     "react": "15.6.1",
  10     "react-dom": "15.6.1",
  11     "typescript": "2.4.1",
  12     "webpack": "2.5.1"
  13   }
  14 }

   1 import React, { ReactChild } from 'react';
   2 import { Persn, greeterPerson, Human, HumanInterface } from './lib';
   3 import NameHolder from './NameHolder';
   4 import { pubSub } from './lib';
   5 
   6 interface MyState {
   7     currDate: string;
   8     greetings: string;
   9     human: HumanInterface;
  10 }
  11 
  12 function createMyState(currDate: string, greetings: string, human: HumanInterface): MyState {
  13     return { currDate: currDate, greetings: greetings, human: human };
  14 }
  15 
  16 interface MyProps {
  17     prop: string;
  18 }
  19 
  20 export default class App extends React.Component<MyProps, MyState> {
  21     text: string;
  22     timerID: number;
  23 
  24     constructor(props: MyProps) {
  25         super(props);
  26         this.text = this.props.prop;
  27         this.state = createMyState("waiting for date", "waiting for greetings", null); // init with MyState format          
  28     }
  29 
  30     public static createHuman(name: string): HumanInterface {
  31         return new Human(name);
  32     }
  33 
  34     public tickHandler() {
  35         let cd = new Date().toString();
  36         let greetings = greeterPerson({ firstName: "first", lastName: "last" });
  37         let human: HumanInterface = App.createHuman("JohnDoe");
  38         this.setState(createMyState(cd, greetings, human));
  39     }
  40 
  41     componentDidMount() {
  42         // called after the 1st render !
  43         console.log("First render");
  44         this.timerID = setInterval(this.tickHandler.bind(this), 1000);
  45     }
  46 
  47     componentWillUnmount() {
  48         // component will be destroyed
  49         console.log("Will be destroyed soon");
  50         clearInterval(this.timerID);
  51     }
  52 
  53     public render() {
  54         // do not call set state in render !
  55         return (
  56             <div>
  57                 <p>Hello World!!! -- {this.text} -- {this.state.greetings}</p>
  58                 <p>Human {this.state.human != null ? this.state.human.getName() : ""} {this.state.currDate} </p>
  59 
  60                 <p> <NameHolder attr="holding..." />  </p>
  61                 <p> <NameHolder attr={this.state.currDate} /> </p>
  62 
  63                 <div onClick={() => { this.clickHandler(); }} > {this.props.children} </div>
  64             </div>
  65         );
  66     }
  67 
  68     public clickHandler() {
  69         console.log("clicked. # children " + React.Children.count(this.props.children));
  70 
  71         React.Children.forEach(this.props.children, (argx: any) => {
  72 
  73             if (argx.hasOwnProperty("props")) {
  74                 console.log("props property found");
  75                 pubSub.notify("message from outer space !");
  76             }
  77 
  78             console.log(JSON.stringify(argx));
  79         });
  80     }
  81 }

   1 import React from 'react';
   2 import ReactDOM from 'react-dom';
   3 import {getText} from "./lib";
   4 import App from './App'; // uses App.tsx
   5 import NameHolder from './NameHolder'; 
   6 
   7 console.log("Entry point");
   8 let appContainer =  document.getElementById('app') ;
   9 let markup = <App prop="Other text inside the page"> <NameHolder attr="NameHolder child inside App "/> </App>;
  10 ReactDOM.render( markup , appContainer);

   1 import React from 'react';
   2 import { pubSub } from './lib';
   3 
   4 // Component properties (XML attributes)
   5 interface NameHolderProperties {
   6     attr: string;
   7 }
   8 
   9 interface NameHolderState {
  10     attr: string;
  11 }
  12 
  13 // properties and state 
  14 export default class NameHolder extends React.Component<NameHolderProperties, NameHolderState> {
  15     constructor(props: NameHolderProperties) {
  16         super(props); // populates the this.props         
  17         this.state = { attr: this.props.attr };
  18 
  19         pubSub.addListener(this.onMessage);
  20     }
  21 
  22     public render() {
  23         return <span>!!!{this.state.attr}!!!</span>;
  24     }
  25 
  26     public onMessage(message: string): void {
  27         console.log(this.state.attr + " receiVed " + message);
  28     }
  29 }

   1 import { Container, Service } from 'typedi';
   2 
   3 @Service()
   4 class ExampleInjectedService {
   5   printMessage() {
   6     console.log('I am alive!');
   7   }
   8 }
   9 
  10 @Service()
  11 class ExampleService {
  12   constructor(
  13     // because we annotated ExampleInjectedService with the @Service()
  14     // decorator TypeDI will automatically inject an instance of
  15     // ExampleInjectedService here when the ExampleService class is requested
  16     // from TypeDI.
  17     private injectedService: ExampleInjectedService
  18   ) {}
  19 }
  20 
  21 const serviceInstance = Container.get(ExampleService);
  22 // we request an instance of ExampleService from TypeDI
  23 
  24 serviceInstance.injectedService.printMessage();
  25 // logs "I am alive!" to the console
  26