Update typescript example to reflects out of box usage (#7235)
This commit is contained in:
parent
693ba44ae8
commit
d7152f6ae4
9 changed files with 30 additions and 43 deletions
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"next/babel",
|
||||
"@zeit/next-typescript/babel"
|
||||
]
|
||||
}
|
|
@ -6,7 +6,7 @@ type ListDetailProps = {
|
|||
item: IDataObject;
|
||||
}
|
||||
|
||||
const ListDetail: React.FC<ListDetailProps> = ({ item: user }) => (
|
||||
const ListDetail: React.FunctionComponent<ListDetailProps> = ({ item: user }) => (
|
||||
<div>
|
||||
<h1>Detail for {user.name}</h1>
|
||||
<p>ID: {user.id}</p>
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
const withTypescript = require('@zeit/next-typescript')
|
||||
module.exports = withTypescript()
|
|
@ -9,15 +9,14 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-typescript": "^1.1.1",
|
||||
"next": "^7.0.2",
|
||||
"next": "^8.1.1-canary.23",
|
||||
"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.11",
|
||||
"typescript": "3.2.4"
|
||||
"@types/node": "^11.13.9",
|
||||
"@types/react": "^16.8.15",
|
||||
"@types/react-dom": "^16.0.11"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
@ -1,23 +1,20 @@
|
|||
import * as React from 'react'
|
||||
import { NextContext } from 'next'
|
||||
import { NextPageContext } from 'next'
|
||||
import Layout from '../components/Layout'
|
||||
import IDataObject from '../interfaces'
|
||||
import { findData } from '../utils/sample-api'
|
||||
import ListDetail from '../components/ListDetail';
|
||||
|
||||
type RequestQuery = {
|
||||
id: string,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
item?: IDataObject,
|
||||
errors?: string,
|
||||
}
|
||||
|
||||
class ListDetailPage extends React.Component<Props> {
|
||||
static getInitialProps = async ({ query }: NextContext<RequestQuery>) => {
|
||||
static getInitialProps = async ({ query }: NextPageContext) => {
|
||||
try {
|
||||
const item = await findData(query.id);
|
||||
const { id } = query
|
||||
const item = await findData(Array.isArray(id) ? id[0]: id);
|
||||
return { item }
|
||||
} catch (err) {
|
||||
return { errors: err.message }
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import Layout from '../components/Layout'
|
||||
import { NextPage } from 'next';
|
||||
|
||||
const IndexPage: React.FunctionComponent = () => {
|
||||
const IndexPage: NextPage = () => {
|
||||
return (
|
||||
<Layout title="Home | Next.js + TypeScript Example">
|
||||
<h1>Hello Next.js 👋</h1>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react'
|
||||
import { NextContext } from 'next'
|
||||
import { NextPageContext } from 'next'
|
||||
import Link from 'next/link';
|
||||
|
||||
import Layout from '../components/Layout'
|
||||
|
@ -13,7 +13,7 @@ type Props = {
|
|||
}
|
||||
|
||||
class ListClass extends React.Component<Props> {
|
||||
static async getInitialProps({ pathname }: NextContext) {
|
||||
static async getInitialProps({ pathname }: NextPageContext) {
|
||||
// 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
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import { NextFunctionComponent, NextContext } from 'next'
|
||||
import { NextPage } from 'next'
|
||||
import Link from 'next/link';
|
||||
|
||||
import Layout from '../components/Layout'
|
||||
import List from '../components/List'
|
||||
import IDataObject from '../interfaces'
|
||||
|
@ -11,7 +10,7 @@ type Props = {
|
|||
pathname: string,
|
||||
}
|
||||
|
||||
const ListFunction: NextFunctionComponent<Props> = ({ items, pathname }) => (
|
||||
const ListFunction: NextPage<Props> = ({ items, pathname }) => (
|
||||
<Layout title="List Example (as Functional Component) | Next.js + TypeScript Example">
|
||||
<h1>List Example (as Function Component)</h1>
|
||||
<p>You are currently on: {pathname}</p>
|
||||
|
@ -20,7 +19,7 @@ const ListFunction: NextFunctionComponent<Props> = ({ items, pathname }) => (
|
|||
</Layout>
|
||||
)
|
||||
|
||||
ListFunction.getInitialProps = async ({ pathname }: NextContext) => {
|
||||
ListFunction.getInitialProps = async ({ pathname }) => {
|
||||
// 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.
|
||||
|
|
|
@ -1,19 +1,18 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"allowJs": true,
|
||||
"alwaysStrict": true,
|
||||
"esModuleInterop": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"lib": ["dom", "es2017"],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"allowJs": true,
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"skipLibCheck": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"removeComments": false,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true
|
||||
"strict": true,
|
||||
"target": "esnext"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue