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

add new nextjs typings with samples (#6102)

The current `examples/with-typescript` is not using the latest type definitions currently available on DefinitelyTyped project for next.

Added new list page examples that demonstrate how to use the new Types for both stateless functional components and classes.  Also modified examples for list to demonstrate typings for `getInitialProps`.
This commit is contained in:
Justin Noel 2019-01-23 05:37:09 -06:00 committed by Tim Neutkens
parent c5d5148bad
commit d6ec10a4bf
9 changed files with 87 additions and 45 deletions

View file

@ -3,7 +3,7 @@ import Link from 'next/link'
import Head from 'next/head'
type Props = {
title?: string
title?: string,
}
const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the default title' }) => (
@ -16,16 +16,17 @@ const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the
<header>
<nav>
<Link href='/'><a>Home</a></Link> | {' '}
<Link href='/list'><a>List</a></Link> | {' '}
<Link href='/list-fc'><a>List as Functional Component</a></Link> | {' '}
<Link href='/list-class'><a>List As Class</a></Link> | {' '}
<Link href='/about'><a>About</a></Link> | {' '}
</nav>
</header>
{children}
<footer>
<hr/>
<span>I'm here to stay (Footer)</span>
<hr />
<span>I'm here to stay (Footer)</span>
</footer>
</div>
)
export default Layout
export default Layout

View file

@ -1,23 +1,19 @@
import * as React from "react"
import ListItem from './ListItem'
import IDataObject from '../interfaces'
export interface DataObject {
id: number,
name: string
type Props = {
items: IDataObject[],
}
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>
)
}
const List: React.FunctionComponent<Props> = ({ items }) => (
<ul>
{items.map((item) => (
<li key={item.id}>
<ListItem data={item} />
</li>
))}
</ul>
)
export default List;
export default List

View file

@ -1,12 +1,12 @@
import * as React from 'react'
import {DataObject} from "./List";
import IDataObject from '../interfaces'
export interface Props {
data: DataObject
type Props = {
data: IDataObject,
}
const ListItem: React.FunctionComponent<Props> = ({ data }) => (
<React.Fragment>{data.id}:{data.name}</React.Fragment>
);
export default ListItem;
export default ListItem

View file

@ -0,0 +1,4 @@
export default interface IDataObject {
id: number,
name: string
}

View file

@ -15,7 +15,7 @@
"react-dom": "^16.7.0"
},
"devDependencies": {
"@types/next": "^7.0.2",
"@types/next": "^7.0.6",
"@types/react": "^16.4.16",
"@types/react-dom": "16.0.8",
"eslint": "^5.12.0",

View file

@ -2,13 +2,13 @@ import * as React from "react"
import Link from 'next/link'
import Layout from '../components/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>
)
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;

View file

@ -0,0 +1,29 @@
import React from 'react'
import { NextContext } from 'next'
import Layout from '../components/Layout'
import List from '../components/List'
import IDataObject from '../interfaces'
type Props = {
items: IDataObject[],
}
class ListClass extends React.Component<Props> {
static async getInitialProps({ pathname }: NextContext) {
const dataArray: IDataObject[] =
[{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]
return { items: dataArray }
}
render() {
return (
<Layout title="About | Next.js + TypeScript Example">
<List items={this.props.items} />
</Layout>
)
}
}
export default ListClass

View file

@ -0,0 +1,23 @@
import { NextFunctionComponent, NextContext } from 'next'
import Layout from '../components/Layout'
import List from '../components/List'
import IDataObject from '../interfaces'
type Props = {
items: IDataObject[],
}
const list: NextFunctionComponent<Props> = ({ items }) => (
<Layout title="About | Next.js + TypeScript Example">
<List items={items} />
</Layout>
)
list.getInitialProps = async ({ pathname }: NextContext) => {
const dataArray: IDataObject[] =
[{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]
return { items: dataArray }
}
export default list

View file

@ -1,11 +0,0 @@
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;