Update typescript example to reflects out of box usage (#7235)

examples/with-typescript/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "next/babel",
-    "@zeit/next-typescript/babel"
-  ]
-}

examples/with-typescript/components/ListDetail.tsx

@@ -6,7 +6,7 @@ type ListDetailProps = {
   item: IDataObject;
 }
 
-const ListDetail: React.FC<ListDetailProps> = ({ item: user }) => (
+const ListDetail: React.FunctionComponent<ListDetailProps> = ({ item: user }) => (
   <div>
     <h1>Detail for {user.name}</h1>
     <p>ID: {user.id}</p>

examples/with-typescript/next.config.js

@@ -1,2 +0,0 @@
-const withTypescript = require('@zeit/next-typescript')
-module.exports = withTypescript()

examples/with-typescript/package.json

@@ -9,15 +9,14 @@
   },
   "dependencies": {
     "@zeit/next-typescript": "^1.1.1",
-    "next": "^7.0.2",
+    "next": "^8.1.1-canary.23",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@types/next": "^7.0.6",
-    "@types/react": "^16.4.16",
-    "@types/react-dom": "16.0.11",
-    "typescript": "3.2.4"
+    "@types/node": "^11.13.9",
+    "@types/react": "^16.8.15",
+    "@types/react-dom": "^16.0.11"
   },
   "license": "ISC"
 }

examples/with-typescript/pages/detail.tsx

@@ -1,23 +1,20 @@
 import * as React from 'react'
-import { NextContext } from 'next'
+import { NextPageContext } from 'next'
 import Layout from '../components/Layout'
 import IDataObject from '../interfaces'
 import { findData } from '../utils/sample-api'
 import ListDetail from '../components/ListDetail';
 
-type RequestQuery = {
-  id: string,
-}
-
 type Props = {
   item?: IDataObject,
   errors?: string,
 }
 
 class ListDetailPage extends React.Component<Props> {
-  static getInitialProps = async ({ query }: NextContext<RequestQuery>) => {
+  static getInitialProps = async ({ query }: NextPageContext) => {
     try {
-      const item = await findData(query.id);
+      const { id } = query
+      const item = await findData(Array.isArray(id) ? id[0]: id);
       return { item }
     } catch (err) {
       return { errors: err.message }

examples/with-typescript/pages/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
+import { NextPage } from 'next';
 
-const IndexPage: React.FunctionComponent = () => {
+const IndexPage: NextPage = () => {
   return (
     <Layout title="Home | Next.js + TypeScript Example">
       <h1>Hello Next.js 👋</h1>

examples/with-typescript/pages/list-class.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { NextContext } from 'next'
+import { NextPageContext } from 'next'
 import Link from 'next/link';
 
 import Layout from '../components/Layout'
@@ -13,7 +13,7 @@ type Props = {
 }
 
 class ListClass extends React.Component<Props> {
-  static async getInitialProps({ pathname }: NextContext) {
+  static async getInitialProps({ pathname }: NextPageContext) {
     // Example for including initial props in a Next.js page.
     // Don't forget to include the respective types for any
     // props passed into the component

examples/with-typescript/pages/list-fc.tsx

@@ -1,6 +1,5 @@
-import { NextFunctionComponent, NextContext } from 'next'
+import { NextPage } from 'next'
 import Link from 'next/link';
-
 import Layout from '../components/Layout'
 import List from '../components/List'
 import IDataObject from '../interfaces'
@@ -11,7 +10,7 @@ type Props = {
   pathname: string,
 }
 
-const ListFunction: NextFunctionComponent<Props> = ({ items, pathname }) => (
+const ListFunction: NextPage<Props> = ({ items, pathname }) => (
   <Layout title="List Example (as Functional Component) | Next.js + TypeScript Example">
     <h1>List Example (as Function Component)</h1>
     <p>You are currently on: {pathname}</p>
@@ -20,7 +19,7 @@ const ListFunction: NextFunctionComponent<Props> = ({ items, pathname }) => (
   </Layout>
 )
 
-ListFunction.getInitialProps = async ({ pathname }: NextContext) => {
+ListFunction.getInitialProps = async ({ pathname }) => {
   // Example for including initial props in a Next.js function compnent page.
   // Don't forget to include the respective types for any props passed into
   // the component.

examples/with-typescript/tsconfig.json

@@ -1,19 +1,18 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "jsx": "preserve",
-    "lib": ["dom", "es2017"],
-    "moduleResolution": "node",
-    "allowJs": true,
-    "noEmit": true,
-    "strict": true,
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "removeComments": false,
-    "preserveConstEnums": true,
-    "sourceMap": true
+    "allowJs": true, 
+    "alwaysStrict": true, 
+    "esModuleInterop": true, 
+    "isolatedModules": true, 
+    "jsx": "preserve", 
+    "lib": ["dom", "es2017"], 
+    "module": "esnext", 
+    "moduleResolution": "node", 
+    "noEmit": true, 
+    "noFallthroughCasesInSwitch": true, 
+    "noUnusedLocals": true, 
+    "noUnusedParameters": true, 
+    "strict": true, 
+    "target": "esnext" 
   }
 }