diff --git a/examples/with-context-api/components/Counter.js b/examples/with-context-api/components/Counter.js
deleted file mode 100644
index 19911d6eabc4..000000000000
--- a/examples/with-context-api/components/Counter.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useReducer, useContext, createContext } from 'react'
-
-const CounterStateContext = createContext()
-const CounterDispatchContext = createContext()
-
-const reducer = (state, action) => {
- switch (action.type) {
- case 'INCREASE':
- return state + 1
- case 'DECREASE':
- return state - 1
- case 'INCREASE_BY':
- return state + action.payload
- default:
- throw new Error(`Unknown action: ${action.type}`)
- }
-}
-
-export const CounterProvider = ({ children }) => {
- const [state, dispatch] = useReducer(reducer, 0)
- return (
-
-
- {children}
-
-
- )
-}
-
-export const useCount = () => useContext(CounterStateContext)
-export const useDispatchCount = () => useContext(CounterDispatchContext)
diff --git a/examples/with-context-api/components/Counter.tsx b/examples/with-context-api/components/Counter.tsx
new file mode 100644
index 000000000000..0f8eae33512d
--- /dev/null
+++ b/examples/with-context-api/components/Counter.tsx
@@ -0,0 +1,57 @@
+import {
+ useReducer,
+ useContext,
+ createContext,
+ ReactNode,
+ Dispatch,
+} from 'react'
+
+type CounterState = number
+type CounterAction =
+ | {
+ type: 'INCREASE' | 'DECREASE'
+ }
+ | {
+ type: 'INCREASE_BY'
+ payload: number
+ }
+
+const CounterStateContext = createContext(0)
+const CounterDispatchContext = createContext>(
+ () => null
+)
+
+const reducer = (state: CounterState, action: CounterAction) => {
+ switch (action.type) {
+ case 'INCREASE':
+ return state + 1
+ case 'DECREASE':
+ return state - 1
+ case 'INCREASE_BY':
+ return state + action.payload
+ default:
+ throw new Error(`Unknown action: ${JSON.stringify(action)}`)
+ }
+}
+
+type CounterProviderProps = {
+ children: ReactNode
+ initialValue?: number
+}
+
+export const CounterProvider = ({
+ children,
+ initialValue = 0,
+}: CounterProviderProps) => {
+ const [state, dispatch] = useReducer(reducer, initialValue)
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export const useCount = () => useContext(CounterStateContext)
+export const useDispatchCount = () => useContext(CounterDispatchContext)
diff --git a/examples/with-context-api/package.json b/examples/with-context-api/package.json
index 349de02f4d84..46775cdf8044 100644
--- a/examples/with-context-api/package.json
+++ b/examples/with-context-api/package.json
@@ -7,7 +7,12 @@
},
"dependencies": {
"next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/node": "18.7.15",
+ "@types/react": "16.9.17",
+ "typescript": "4.8.2"
}
}
diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.tsx
similarity index 58%
rename from examples/with-context-api/pages/_app.js
rename to examples/with-context-api/pages/_app.tsx
index 4fe390a79d9b..6f852027a9e9 100644
--- a/examples/with-context-api/pages/_app.js
+++ b/examples/with-context-api/pages/_app.tsx
@@ -1,11 +1,10 @@
+import type { AppProps } from 'next/app'
import { CounterProvider } from '../components/Counter'
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
return (
)
}
-
-export default MyApp
diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.tsx
similarity index 77%
rename from examples/with-context-api/pages/about.js
rename to examples/with-context-api/pages/about.tsx
index 481c9c048159..f45d699aabf4 100644
--- a/examples/with-context-api/pages/about.js
+++ b/examples/with-context-api/pages/about.tsx
@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react'
import Link from 'next/link'
import { useCount, useDispatchCount } from '../components/Counter'
@@ -5,11 +6,11 @@ const AboutPage = () => {
const count = useCount()
const dispatch = useDispatchCount()
- const handleIncrease = (event) =>
+ const handleIncrease = (event: MouseEvent) =>
dispatch({
type: 'INCREASE',
})
- const handleIncrease15 = (event) =>
+ const handleIncrease15 = (event: MouseEvent) =>
dispatch({
type: 'INCREASE_BY',
payload: 15,
diff --git a/examples/with-context-api/pages/index.js b/examples/with-context-api/pages/index.tsx
similarity index 77%
rename from examples/with-context-api/pages/index.js
rename to examples/with-context-api/pages/index.tsx
index 7e26a78c30aa..585aacff1c45 100644
--- a/examples/with-context-api/pages/index.js
+++ b/examples/with-context-api/pages/index.tsx
@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react'
import Link from 'next/link'
import { useCount, useDispatchCount } from '../components/Counter'
@@ -5,11 +6,11 @@ const IndexPage = () => {
const count = useCount()
const dispatch = useDispatchCount()
- const handleIncrease = (event) =>
+ const handleIncrease = (event: MouseEvent) =>
dispatch({
type: 'INCREASE',
})
- const handleDecrease = (event) =>
+ const handleDecrease = (event: MouseEvent) =>
dispatch({
type: 'DECREASE',
})
diff --git a/examples/with-context-api/tsconfig.json b/examples/with-context-api/tsconfig.json
new file mode 100644
index 000000000000..ccaea0672d6e
--- /dev/null
+++ b/examples/with-context-api/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "module": "esnext",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}