mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
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)
This commit is contained in:
parent
f9b98e6cf7
commit
3a3347dc5f
|
@ -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
23
examples/with-typescript/components/List.tsx
Normal 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
12
examples/with-typescript/components/ListItem.tsx
Normal 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;
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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 () => (
|
||||
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
11
examples/with-typescript/pages/list.tsx
Normal 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;
|
Loading…
Reference in a new issue