Convert active-class-name example to TypeScript

examples/active-class-name/components/ActiveLink.js → examples/active-class-name/components/ActiveLink.tsx

@@ -1,10 +1,17 @@
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import PropTypes from 'prop-types'
-import Link from 'next/link'
-import React, { Children } from 'react'
+import Link, { LinkProps } from 'next/link'
+import React, { useState, useEffect, ReactElement, Children } from 'react'
 
-const ActiveLink = ({ children, activeClassName, ...props }) => {
+type ActiveLinkProps = LinkProps & {
+  children: ReactElement
+  activeClassName: string
+}
+
+const ActiveLink = ({
+  children,
+  activeClassName,
+  ...props
+}: ActiveLinkProps) => {
   const { asPath, isReady } = useRouter()
 
   const child = Children.only(children)
@@ -16,8 +23,10 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
     if (isReady) {
       // Dynamic route will be matched via props.as
       // Static route will be matched via props.href
-      const linkPathname = new URL(props.as || props.href, location.href)
-        .pathname
+      const linkPathname = new URL(
+        (props.as || props.href) as string,
+        location.href
+      ).pathname
 
       // Using URL().pathname to get rid of query and hash
       const activePathname = new URL(asPath, location.href).pathname
@@ -51,8 +60,4 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
   )
 }
 
-ActiveLink.propTypes = {
-  activeClassName: PropTypes.string.isRequired,
-}
-
 export default ActiveLink

examples/active-class-name/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/active-class-name/package.json

@@ -7,8 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "prop-types": "^15.7.2"
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.42",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "typescript": "4.7.3"
   }
 }

examples/active-class-name/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}