From 6d41ed7e6f2f5a16c419393b52ef80636c5ef3ae Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Thu, 24 Jan 2019 16:18:43 +0700
Subject: [PATCH] [with-typescript] Updated typescript and removed unused deps
 (#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.
---
 examples/with-typescript/interfaces/index.tsx |  8 +++++++-
 examples/with-typescript/package.json         |  6 ++----
 examples/with-typescript/pages/about.tsx      |  8 ++++----
 examples/with-typescript/pages/index.tsx      |  6 +++---
 examples/with-typescript/pages/list-class.tsx | 13 ++++++++++---
 examples/with-typescript/pages/list-fc.tsx    | 19 +++++++++++++------
 6 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/examples/with-typescript/interfaces/index.tsx b/examples/with-typescript/interfaces/index.tsx
index c5e83bb8f0..c6f451c1f6 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 c449f208e8..c535a6329e 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 86b1aa24d8..0e01004bf9 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 = () => (
   <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;
\ 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 774cd76806..fe36c9c00a 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 (
     <Layout title="Home | Next.js + TypeScript Example">
       <h1>Hello Next.js 👋</h1>
@@ -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 202bca3c59..3e29014677 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<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>
     )
diff --git a/examples/with-typescript/pages/list-fc.tsx b/examples/with-typescript/pages/list-fc.tsx
index dcb9f92c01..3fd6fe652c 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<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
-- 
GitLab