terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

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)

Browse source
This commit is contained in:
Peter Kellner 2019-01-08 13:29:58 -08:00 committed by Tim Neutkens
parent f9b98e6cf7
commit 3a3347dc5f
7 changed files with 74 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
examples/with-typescript/components/Layout.tsx
View file

@ -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>
)

23
examples/with-typescript/components/List.tsx Normal file
View file

@ -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;

12
examples/with-typescript/components/ListItem.tsx Normal file
View file

@ -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;

8
examples/with-typescript/package.json
View file

@ -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"
}

7
examples/with-typescript/pages/about.tsx
View file

@ -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;

19
examples/with-typescript/pages/index.tsx
View file

@ -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;

11
examples/with-typescript/pages/list.tsx Normal file
View file

@ -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;