The current TypeScript "with-typescript" looks like it was put there …

…as a place holder. I'm fairly new to TypeScript but I'm sure the changes I've made here will be a huge improvement. Open to suggestions and to update as appropriate. Also, Tried to run yarn lint --fix to no avail. I can't figure out how to get it to find lint whether I'm running on my mac or PC. I tried lots of variations around npm i lint -g but had no success. (#6011)
vercel · Jan 8, 2019 · 3a3347d · 3a3347d
1 parent f9b98e6
commit 3a3347d
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 16 deletions.
diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx
@@ -6,7 +6,7 @@ type Props = {
   title?: string
 }
 
-const Layout: React.SFC<Props> = ({ children, title = 'This is the default title' }) => (
+const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the default title' }) => (
   <div>
     <Head>
       <title>{title}</title>
@@ -15,13 +15,15 @@ const Layout: React.SFC<Props> = ({ children, title = 'This is the default title
     </Head>
     <header>
       <nav>
-        <Link href='/'><a>Home</a></Link> |{' '}
-        <Link href='/about'><a>About</a></Link>
+        <Link href='/'><a>Home</a></Link> | {' '}
+        <Link href='/list'><a>List</a></Link> | {' '}
+        <Link href='/about'><a>About</a></Link> | {' '}
       </nav>
     </header>
     {children}
     <footer>
-      I'm here to stay
+        <hr/>
+        <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
 )

diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import ListItem from './ListItem'
+
+export interface DataObject {
+    id: number,
+    name: string
+}
+
+const List : React.FunctionComponent = () => {
+    const dataArray : DataObject[] =
+        [{id: 101, name: 'larry'}, {id: 102, name: 'sam'}, {id: 103, name: 'jill'}]
+    return (
+        <ul>
+            {dataArray.map(item => (
+                <li key={item.id}>
+                    <ListItem data={item}/>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default List;
diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import {DataObject} from "./List";
+
+export interface Props {
+    data: DataObject
+}
+
+const ListItem: React.FunctionComponent<Props> = ({ data }) => (
+  <React.Fragment>{data.id}:{data.name}</React.Fragment>
+);
+
+export default ListItem;
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
@@ -9,15 +9,17 @@
   },
   "dependencies": {
     "@zeit/next-typescript": "^1.1.1",
-    "next": "latest",
+    "lint": "^1.1.2",
+    "next": "^7.0.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@types/next": "^7.0.1",
+    "@types/next": "^7.0.2",
     "@types/react": "^16.4.16",
     "@types/react-dom": "16.0.8",
-    "typescript": "3.1.1"
+    "eslint": "^5.12.0",
+    "typescript": "3.2.1"
   },
   "license": "ISC"
 }
diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx
@@ -1,9 +1,12 @@
+import * as React from "react"
 import Link from 'next/link'
 import Layout from '../components/Layout';
 
-export default () => (
+const about : React.FunctionComponent = () => (
   <Layout title="About | Next.js + TypeScript Example">
     <p>This is the about page</p>
     <p><Link href='/'><a>Go home</a></Link></p>
   </Layout>
-)
+)
+
+export default about;
diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx
@@ -1,9 +1,14 @@
+import * as React from "react"
 import Link from 'next/link'
-import Layout from '../components/Layout';
+import Layout from '../components/Layout'
 
-export default () => (
-  <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Hello Next.js 👋</h1>
-    <p><Link href='/about'><a>About</a></Link></p>
-  </Layout>
-)
+const index : React.FunctionComponent = () => {
+    return (
+        <Layout title="Home | Next.js + TypeScript Example">
+            <h1>Hello Next.js 👋</h1>
+            <p><Link href='/about'><a>About</a></Link></p>
+        </Layout>
+    )
+}
+
+export default index;
diff --git a/examples/with-typescript/pages/list.tsx b/examples/with-typescript/pages/list.tsx
@@ -0,0 +1,11 @@
+import * as React from "react"
+import Layout from '../components/Layout'
+import List from '../components/List'
+
+const list : React.FunctionComponent = () => (
+    <Layout title="About | Next.js + TypeScript Example">
+        <List/>
+    </Layout>
+)
+
+export default list;