Skip to content

Commit

Permalink
[with-typescript] Updated typescript and removed unused deps (vercel#…
Browse files Browse the repository at this point in the history
…6116)

I've updated the TypeScript dependency to the latest version. Also
removed some dependencies that may not be needed.

I've also fixed tslint errors which may have appeared because of
previous updates to this starter kit, as well as added comments
to explain some parts of the code.
  • Loading branch information
resir014 authored and timneutkens committed Jan 24, 2019
1 parent ca521b3 commit 6d41ed7
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 21 deletions.
8 changes: 7 additions & 1 deletion examples/with-typescript/interfaces/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
// You can include shared interfaces in a separate file and then
// use them in any component by importing them. For example, to
// import the interface below do:
//
// import IDataObject from 'path/to/interfaces';

export default interface IDataObject {
id: number,
id: number
name: string
}
6 changes: 2 additions & 4 deletions examples/with-typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,15 @@
},
"dependencies": {
"@zeit/next-typescript": "^1.1.1",
"lint": "^1.1.2",
"next": "^7.0.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@types/next": "^7.0.6",
"@types/react": "^16.4.16",
"@types/react-dom": "16.0.8",
"eslint": "^5.12.0",
"typescript": "3.2.1"
"@types/react-dom": "16.0.11",
"typescript": "3.2.4"
},
"license": "ISC"
}
8 changes: 4 additions & 4 deletions examples/with-typescript/pages/about.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from "react"
import * as React from 'react'
import Link from 'next/link'
import Layout from '../components/Layout';
import Layout from '../components/Layout'

const about : React.FunctionComponent = () => (
const AboutPage: 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;
export default AboutPage;
6 changes: 3 additions & 3 deletions examples/with-typescript/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from "react"
import * as React from 'react'
import Link from 'next/link'
import Layout from '../components/Layout'

const index: React.FunctionComponent = () => {
const IndexPage: React.FunctionComponent = () => {
return (
<Layout title="Home | Next.js + TypeScript Example">
<h1>Hello Next.js 👋</h1>
Expand All @@ -11,4 +11,4 @@ const index: React.FunctionComponent = () => {
)
}

export default index;
export default IndexPage;
13 changes: 10 additions & 3 deletions examples/with-typescript/pages/list-class.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,22 @@ type Props = {

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 }]
// Example for including initial props in a Next.js page.
// Don't forget to include the respective types for any
// props passed into the component
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">
<Layout title="List Example | Next.js + TypeScript Example">
<List items={this.props.items} />
</Layout>
)
Expand Down
19 changes: 13 additions & 6 deletions examples/with-typescript/pages/list-fc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,24 @@ type Props = {
items: IDataObject[],
}

const list: NextFunctionComponent<Props> = ({ items }) => (
<Layout title="About | Next.js + TypeScript Example">
const ListFunction: NextFunctionComponent<Props> = ({ items }) => (
<Layout title="List Example (with Function Components) | 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 }]
ListFunction.getInitialProps = async ({ pathname }: NextContext) => {
// Example for including initial props in a Next.js function compnent page.
// Don't forget to include the respective types for any props passed into
// the component.
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
export default ListFunction

0 comments on commit 6d41ed7

Please sign in to comment.