diff --git a/examples/with-typescript/interfaces/index.tsx b/examples/with-typescript/interfaces/index.tsx
index c5e83bb8..c6f451c1 100644
--- a/examples/with-typescript/interfaces/index.tsx
+++ b/examples/with-typescript/interfaces/index.tsx
@@ -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
}
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
index c449f208..c535a632 100644
--- a/examples/with-typescript/package.json
+++ b/examples/with-typescript/package.json
@@ -9,7 +9,6 @@
},
"dependencies": {
"@zeit/next-typescript": "^1.1.1",
- "lint": "^1.1.2",
"next": "^7.0.2",
"react": "^16.7.0",
"react-dom": "^16.7.0"
@@ -17,9 +16,8 @@
"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"
}
diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx
index 86b1aa24..0e01004b 100644
--- a/examples/with-typescript/pages/about.tsx
+++ b/examples/with-typescript/pages/about.tsx
@@ -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 = () => (
This is the about page
Go home
)
-export default about;
\ No newline at end of file
+export default AboutPage;
diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx
index 774cd768..fe36c9c0 100644
--- a/examples/with-typescript/pages/index.tsx
+++ b/examples/with-typescript/pages/index.tsx
@@ -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 (
Hello Next.js 👋
@@ -11,4 +11,4 @@ const index: React.FunctionComponent = () => {
)
}
-export default index;
+export default IndexPage;
diff --git a/examples/with-typescript/pages/list-class.tsx b/examples/with-typescript/pages/list-class.tsx
index 202bca3c..3e290146 100644
--- a/examples/with-typescript/pages/list-class.tsx
+++ b/examples/with-typescript/pages/list-class.tsx
@@ -11,15 +11,22 @@ type Props = {
class ListClass extends React.Component {
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 (
-
+
)
diff --git a/examples/with-typescript/pages/list-fc.tsx b/examples/with-typescript/pages/list-fc.tsx
index dcb9f92c..3fd6fe65 100644
--- a/examples/with-typescript/pages/list-fc.tsx
+++ b/examples/with-typescript/pages/list-fc.tsx
@@ -7,17 +7,24 @@ type Props = {
items: IDataObject[],
}
-const list: NextFunctionComponent = ({ items }) => (
-
+const ListFunction: NextFunctionComponent = ({ items }) => (
+
)
-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