Fix tsx workaround, bootstrap next.d.ts, add tslint deps (#2885)

examples/with-typescript/.gitignore

@@ -1 +1 @@
-**/*.js
+*.js

examples/with-typescript/README.md

@@ -1,23 +1,14 @@
 [![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-typescript)
+
 # TypeScript Next.js example  
+
 This is a really simple project that show the usage of Next.js with TypeScript.  
 
 ## How to use it?  
+
 ```
-npm install  # to install dependencies
+npm install
-npm run dev  # to compile TypeScript files and to run next.js  
+npm run dev
 ```  
 
 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'
-
-export default Link
-```

examples/with-typescript/components/MyComponent.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react'
-
-export default () =>
-  <div>
-    <p>This is my component</p>
-  </div>

examples/with-typescript/next.d.ts

@@ -0,0 +1,10 @@
+declare module 'next/link' {
+  import { Url } from 'url'
+
+  export default class Link extends React.Component<
+    {
+      href: string | Url;
+    },
+    {}
+  > {}
+}

examples/with-typescript/package.json

@@ -2,16 +2,21 @@
   "name": "with-typescript",
   "version": "1.0.0",
   "scripts": {
-    "dev": "concurrently \"tsc --watch\" next"
+    "dev": "concurrently \"tsc --pretty --watch\" \"next\"",
+    "prebuild": "tsc",
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.0.0",
+    "react": "16.1.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "16.1.0"
   },
   "devDependencies": {
-    "@types/react": "^16.0.9",
+    "@types/node": "8.0.51",
-    "concurrently": "^3.1.0",
+    "@types/react": "16.0.22",
-    "typescript": "^2.1.5"
+    "concurrently": "^3.5.0",
+    "tslint": "5.8.0",
+    "typescript": "2.6.1"
   }
 }

examples/with-typescript/pages/about.tsx

@@ -0,0 +1 @@
+export default () => <div>About us</div>

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>
+    Hello World.{' '}
-    <MyComponent />
+    <Link href="/about">
+      <a>About</a>
+    </Link>
   </div>

examples/with-typescript/tsconfig.json

@@ -1,8 +1,8 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "module": "commonjs",
+    "jsx": "react-native",
-        "target": "es2015",
+    "module": "commonjs",
-        "jsx": "react",
+    "strict": true,
-        "allowJs": true
+    "target": "es2017"
-    }
+  }
 }

examples/with-typescript/tslint.json

@@ -0,0 +1,10 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint:recommended"],
+  "jsRules": {},
+  "rules": {
+    "quotemark": [true, "single", "jsx-double"],
+    "semicolon": [true, "never"]
+  },
+  "rulesDirectory": []
+}