[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.

Author: resir014

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
 }

examples/with-typescript/package.json

@@ -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"
 }

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;
+export default AboutPage;

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;

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>
     )

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