From ff65ce1b697572bdf3aa405cce5a6382ef82d0c1 Mon Sep 17 00:00:00 2001 From: pkellner Date: Tue, 8 Jan 2019 09:06:34 -0800 Subject: [PATCH] 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. --- .../with-typescript/components/Layout.tsx | 10 ++++---- examples/with-typescript/components/List.tsx | 23 +++++++++++++++++++ .../with-typescript/components/ListItem.tsx | 12 ++++++++++ examples/with-typescript/package.json | 8 ++++--- examples/with-typescript/pages/about.tsx | 7 ++++-- examples/with-typescript/pages/index.tsx | 19 +++++++++------ examples/with-typescript/pages/list.tsx | 11 +++++++++ 7 files changed, 74 insertions(+), 16 deletions(-) create mode 100644 examples/with-typescript/components/List.tsx create mode 100644 examples/with-typescript/components/ListItem.tsx create mode 100644 examples/with-typescript/pages/list.tsx diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx index 62be53a9568ba..d2172b63394b2 100644 --- 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 = ({ children, title = 'This is the default title' }) => ( +const Layout: React.FunctionComponent = ({ children, title = 'This is the default title' }) => (
{title} @@ -15,13 +15,15 @@ const Layout: React.SFC = ({ children, title = 'This is the default title
{children}
- I'm here to stay +
+ I'm here to stay (Footer)
) diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx new file mode 100644 index 0000000000000..ecb254089cc0c --- /dev/null +++ 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 ( +
    + {dataArray.map(item => ( +
  • + +
    • + ))} +
+ ) +} + +export default List; diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx new file mode 100644 index 0000000000000..5f622d4e2021b --- /dev/null +++ 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 = ({ data }) => ( + {data.id}:{data.name} +); + +export default ListItem; \ No newline at end of file diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json index 627bd30cdc1c1..6e812fc58d560 100644 --- 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 index 39233aab2b91a..86b1aa24d8040 100644 --- 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 = () => (

This is the about page

Go home

 -) \ No newline at end of file +) + +export default about; \ No newline at end of file diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx index 427ced903d319..7d6b93fa760e3 100644 --- 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 () => ( - -

Hello Next.js 👋

-

About

- -) +const index : React.FunctionComponent = () => { + return ( + +

Hello Next.js 👋

+

About

+ + ) +} + +export default index; diff --git a/examples/with-typescript/pages/list.tsx b/examples/with-typescript/pages/list.tsx new file mode 100644 index 0000000000000..e6662c0a8f578 --- /dev/null +++ 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 = () => ( + + + +) + +export default list; \ No newline at end of file