Updated Typescript example and config files

examples/with-typescript/README.md

@@ -9,11 +9,6 @@ npm run dev  # to compile TypeScript files and to run next.js
 
 Output JS files are aside the related TypeScript ones.  
 
-## To fix  
-In tsconfig.json the options `jsx="react"` compiles JSX syntax into nested React.createElement calls.  
-This solution doesn't work well with some Next.js features like `next/head` or `next/link`.  
-The workaround is to create JS files that just return the mentioned module and require them from TSX files.  
-Like  
 
 ```js
 import Link from 'next/link'

examples/with-typescript/package.json

@@ -3,11 +3,13 @@
     "dev": "concurrently \"tsc --watch\" next"
   },
   "dependencies": {
-    "next": "latest"
+    "next": "2.0.1"
   },
   "devDependencies": {
-    "@types/react": "^15.0.1",
+    "@types/react": "^15.0.21",
     "concurrently": "^3.1.0",
-    "typescript": "^2.1.5"
+    "typescript": "2.2.1",
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
   }
-}
+}

examples/with-typescript/pages/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
+import Link from 'next/link'
 import MyComponent from '../components/MyComponent'
-
-export default () => 
+export default () =>
   <div>
-    <h1>Hello world</h1>
+    <p>Hello there</p>
     <MyComponent />
-  </div>
+    <div>Click <Link prefetch href={{ pathname: 'pagewithasync' }}><a>Reactpage</a></Link> </div>
+  </div>

examples/with-typescript/pages/pagewithasync.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import 'isomorphic-fetch'
+
+interface IPageProps {
+  stars: number
+}
+
+interface IPageState {
+  clicked: boolean
+}
+
+export default class extends React.Component<IPageProps, IPageState> {
+  static async getInitialProps() {
+    const res = await fetch('https://api.github.com/repos/zeit/next.js');
+    const data = await res.json();
+    return { stars: data.stargazers_count }
+  }
+  public state: { clicked: false }
+  private click = () => {
+    this.setState({ clicked: true })
+  }
+  render() {
+    return <div onClick={this.click}>
+      <h1>Next has {this.props.stars} stars</h1>
+      <span>{this.state.clicked ? 'clicked' : 'please click'}</span>
+    </div>
+  }
+}

examples/with-typescript/tsconfig.json

@@ -1,8 +1,12 @@
 {
     "compilerOptions": {
-        "module": "commonjs",
-        "target": "es2015",
-        "jsx": "react",
-        "allowJs": true
+        "module": "es2015",
+        "target": "es2017",
+        "jsx": "react-native",
+        "moduleResolution": "node",
+        "lib": [
+            "dom",
+            "es2017"
+        ]
     }
-}
+}