[example] Use all available typings thus far and able to launch server.

Author: alloy

example/README.md

@@ -3,36 +3,36 @@
 ## Installation
 
 ```
-npm install
+yarn install
 ```
 
 ## Running
 
 Set up generated files:
 
 ```
-npm run update-schema
-npm run build
+yarn update-schema
+yarn build
 ```
 
 Start a local server:
 
 ```
-npm start
+yarn start
 ```
 
 ## Developing
 
-Any changes you make to files in the `js/` directory will cause the server to
+Any changes you make to files in the `ts/` directory will cause the server to
 automatically rebuild the app and refresh your browser.
 
 If at any time you make changes to `data/schema.js`, stop the server,
 regenerate `data/schema.graphql`, and restart the server:
 
 ```
-npm run update-schema
-npm run build
-npm start
+yarn update-schema
+yarn build
+yarn start
 ```
 
 ## License

example/package.json

@@ -4,10 +4,11 @@
     "start": "babel-node ./server.js",
     "build": "relay-compiler --src ./ts/ --schema ./data/schema.graphql --language typescript",
     "update-schema": "babel-node ./scripts/updateSchema.js",
-    "lint": "eslint ./js"
+    "lint": "eslint ./js",
+    "type-check": "tsc --noEmit --pretty"
   },
   "resolutions": {
-    "relay-compiler-language-typescript": "file:../relay-compiler-language-typescript-1.0.0-alpha.1.tgz",
+    "relay-compiler-language-typescript": "file:../relay-compiler-language-typescript-1.0.0-alpha.2.tgz",
     "relay-compiler": "file:../../relay/dist/relay-compiler/relay-compiler-1.4.1-plugin.3.tgz",
     "relay-runtime": "file:../../relay/dist/relay-runtime/relay-runtime-1.4.1-plugin.3.tgz",
     "babel-plugin-relay": "file:../../relay/dist/babel-plugin-relay/babel-plugin-relay-1.4.1-plugin.3.tgz",
@@ -39,15 +40,21 @@
     "whatwg-fetch": "2.0.3"
   },
   "devDependencies": {
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.0.34",
+    "@types/react-dom": "^16.0.3",
+    "@types/react-relay": "^1.3.1",
+    "@types/relay-runtime": "^1.3.1",
     "babel-cli": "^6.26.0",
     "babel-eslint": "6.1.2",
     "eslint": "3.19.0",
     "eslint-config-fbjs": "1.1.1",
     "eslint-plugin-babel": "3.3.0",
     "eslint-plugin-flowtype": "2.15.0",
     "eslint-plugin-react": "5.2.2",
+    "fork-ts-checker-webpack-plugin": "^0.3.0",
     "relay-compiler": "file:../../relay/dist/relay-compiler/relay-compiler-1.4.1-plugin.3.tgz",
-    "relay-compiler-language-typescript": "file:../relay-compiler-language-typescript-1.0.0-alpha.1.tgz",
+    "relay-compiler-language-typescript": "file:../relay-compiler-language-typescript-1.0.0-alpha.2.tgz",
     "ts-loader": "^3.2.0",
     "typescript": "^2.6.2"
   }

example/server.js

@@ -16,6 +16,7 @@ import path from 'path';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import {schema} from './data/schema';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 const APP_PORT = 3000;
 const GRAPHQL_PORT = 8080;
@@ -29,19 +30,25 @@ graphQLServer.listen(GRAPHQL_PORT, () => console.log(
 
 // Serve the Relay app
 const compiler = webpack({
-  entry: ['whatwg-fetch', path.resolve(__dirname, 'ts', 'app.ts')],
+  entry: ['whatwg-fetch', path.resolve(__dirname, 'ts', 'app.tsx')],
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+  },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
           { loader: 'babel-loader' },
-          { loader: 'ts-loader' },
+          { loader: 'ts-loader', options: { transpileOnly: true } },
         ],
       },
     ],
   },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+  ],
   output: {filename: 'app.js', path: '/'},
 });
 const app = new WebpackDevServer(compiler, {

example/ts/app.ts renamed to example/ts/app.tsx

@@ -12,8 +12,8 @@
 
 import 'todomvc-common';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import {installRelayDevTools} from 'relay-devtools';
 
@@ -36,8 +36,8 @@ installRelayDevTools();
 const mountNode = document.getElementById('root');
 
 function fetchQuery(
-  operation,
-  variables,
+  operation: any,
+  variables: any,
 ) {
   return fetch('/graphql', {
     method: 'POST',

example/ts/components/Todo.tsx

@@ -15,21 +15,34 @@ import RemoveTodoMutation from '../mutations/RemoveTodoMutation';
 import RenameTodoMutation from '../mutations/RenameTodoMutation';
 import TodoTextInput from './TodoTextInput';
 
-import React from 'react';
+import * as React from 'react';
 import {
   createFragmentContainer,
   graphql,
+  RelayProp,
 } from 'react-relay';
+
 import classnames from 'classnames';
 
-class Todo extends React.Component {
+import { Todo_todo } from './__generated__/Todo_todo.graphql';
+import { Todo_viewer } from './__generated__/Todo_viewer.graphql';
+import { ChangeEvent } from 'react';
+import { Environment } from 'relay-runtime';
+
+interface Props {
+  relay: RelayProp
+  todo: Todo_todo
+  viewer: Todo_viewer
+}
+
+class Todo extends React.Component<Props> {
   state = {
     isEditing: false,
   };
-  _handleCompleteChange = (e) => {
+  _handleCompleteChange = (e: ChangeEvent<HTMLInputElement>) => {
     const complete = e.target.checked;
     ChangeTodoStatusMutation.commit(
-      this.props.relay.environment,
+      (this.props.relay && this.props.relay.environment) as Environment,
       complete,
       this.props.todo,
       this.props.viewer,
@@ -48,22 +61,22 @@ class Todo extends React.Component {
     this._setEditMode(false);
     this._removeTodo();
   };
-  _handleTextInputSave = (text) => {
+  _handleTextInputSave = (text: string) => {
     this._setEditMode(false);
     RenameTodoMutation.commit(
-      this.props.relay.environment,
+      (this.props.relay && this.props.relay.environment) as Environment,
       text,
       this.props.todo,
     );
   };
   _removeTodo() {
     RemoveTodoMutation.commit(
-      this.props.relay.environment,
+      (this.props.relay && this.props.relay.environment) as Environment,
       this.props.todo,
       this.props.viewer,
     );
   }
-  _setEditMode = (shouldEdit) => {
+  _setEditMode = (shouldEdit: boolean) => {
     this.setState({isEditing: shouldEdit});
   };
   renderTextInput() {
@@ -87,7 +100,7 @@ class Todo extends React.Component {
         })}>
         <div className="view">
           <input
-            checked={this.props.todo.complete}
+            checked={!!this.props.todo.complete}
             className="toggle"
             onChange={this._handleCompleteChange}
             type="checkbox"

example/ts/components/TodoApp.tsx

@@ -15,22 +15,30 @@ import TodoList from './TodoList';
 import TodoListFooter from './TodoListFooter';
 import TodoTextInput from './TodoTextInput';
 
-import React from 'react';
+import * as React from 'react';
 import {
   createFragmentContainer,
   graphql,
+  RelayProp,
 } from 'react-relay';
 
-class TodoApp extends React.Component {
-  _handleTextInputSave = (text) => {
+import { TodoApp_viewer } from './__generated__/TodoApp_viewer.graphql';
+
+interface Props {
+  relay: RelayProp
+  viewer: TodoApp_viewer
+}
+
+class TodoApp extends React.Component<Props> {
+  _handleTextInputSave = (text: string) => {
     AddTodoMutation.commit(
       this.props.relay.environment,
       text,
       this.props.viewer,
     );
   };
   render() {
-    const hasTodos = this.props.viewer.totalCount > 0;
+    const hasTodos = (this.props.viewer.totalCount || 0) > 0;
     return (
       <div>
         <section className="todoapp">
@@ -46,12 +54,7 @@ class TodoApp extends React.Component {
             />
           </header>
           <TodoList viewer={this.props.viewer} />
-          {hasTodos &&
-            <TodoListFooter
-              todos={this.props.viewer.todos}
-              viewer={this.props.viewer}
-            />
-          }
+          {hasTodos && <TodoListFooter viewer={this.props.viewer} />}
         </section>
         <footer className="info">
           <p>

example/ts/components/TodoList.tsx

@@ -13,14 +13,23 @@
 import MarkAllTodosMutation from '../mutations/MarkAllTodosMutation';
 import Todo from './Todo';
 
-import React from 'react';
+import * as React from 'react';
 import {
   createFragmentContainer,
   graphql,
+  RelayProp,
 } from 'react-relay';
 
-class TodoList extends React.Component {
-  _handleMarkAllChange = (e) => {
+import { TodoList_viewer } from './__generated__/TodoList_viewer.graphql';
+import { ChangeEvent } from 'react';
+
+interface Props {
+  relay: RelayProp,
+  viewer: TodoList_viewer
+}
+
+class TodoList extends React.Component<Props> {
+  _handleMarkAllChange = (e: ChangeEvent<HTMLInputElement>) => {
     const complete = e.target.checked;
     MarkAllTodosMutation.commit(
       this.props.relay.environment,
@@ -30,13 +39,18 @@ class TodoList extends React.Component {
     );
   };
   renderTodos() {
-    return this.props.viewer.todos.edges.map(edge =>
-      <Todo
-        key={edge.node.id}
-        todo={edge.node}
+    if (!this.props.viewer.todos || !this.props.viewer.todos.edges) {
+      throw new Error('assertion failed');
+    }
+    return this.props.viewer.todos.edges.map(edge => {
+      const node = edge && edge.node;
+      if (!node) throw new Error('assertion failed');
+      return <Todo
+        key={node.id}
+        todo={node}
         viewer={this.props.viewer}
       />
-    );
+    });
   }
   render() {
     const numTodos = this.props.viewer.totalCount;

example/ts/components/TodoListFooter.tsx

@@ -12,13 +12,22 @@
 
 import RemoveCompletedTodosMutation from '../mutations/RemoveCompletedTodosMutation';
 
-import React from 'react';
+import * as React from 'react';
 import {
   graphql,
   createFragmentContainer,
+  RelayProp,
 } from 'react-relay';
 
-class TodoListFooter extends React.Component {
+import { TodoListFooter_viewer } from './__generated__/TodoListFooter_viewer.graphql'
+import { Environment } from 'relay-runtime';
+
+interface Props {
+  relay: RelayProp
+  viewer: TodoListFooter_viewer
+}
+
+class TodoListFooter extends React.Component<Props> {
   _handleRemoveCompletedTodosClick = () => {
     RemoveCompletedTodosMutation.commit(
       this.props.relay.environment,
@@ -27,8 +36,8 @@ class TodoListFooter extends React.Component {
     );
   };
   render() {
-    const numCompletedTodos = this.props.viewer.completedCount;
-    const numRemainingTodos = this.props.viewer.totalCount - numCompletedTodos;
+    const numCompletedTodos = this.props.viewer.completedCount || 0;
+    const numRemainingTodos = (this.props.viewer.totalCount || 0) - numCompletedTodos;
     return (
       <footer className="footer">
         <span className="todo-count">