Use TypeScript

naofumi · Dec 9, 2024 · e3a941b · e3a941b
1 parent 851e710
commit e3a941b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/app/javascript/react/pages/CustomersPage.jsx → app/javascript/react/pages/CustomersPage.tsx b/app/javascript/react/pages/CustomersPage.jsx → app/javascript/react/pages/CustomersPage.tsx
@@ -1,7 +1,16 @@
 import React, {useEffect, useState} from "react"
 import Search from "../components/Search"
 
-function fetchJsonWithAbort(url, {success, error = (err) => console.log(err)}) {
+type Customer = {
+  id: number,
+  name: string,
+  jp_name: string,
+}
+
+function fetchJsonWithAbort(
+  url: string,
+  {success, error = (err: any) => console.log(err)}: {success: (json: any) => void, error?: (err: any) => void}
+) {
   const abortController = new AbortController()
 
   fetch(url, {
@@ -15,14 +24,14 @@ function fetchJsonWithAbort(url, {success, error = (err) => console.log(err)}) {
   return abortController
 }
 
-function useServerData(url, initialData) {
-  const [serverData, setServerData] = useState(initialData)
-  const [loading, setLoading] = useState(false)
+function useServerData<T>(url: string, initialData: T) {
+  const [serverData, setServerData] = useState<T>(initialData)
+  const [loading, setLoading] = useState<boolean>(false)
 
-  function getServerDataWithAbort(url) {
+  function getServerDataWithAbort(url: string) {
     setLoading(true)
     return fetchJsonWithAbort(url, {
-        success: (json) => {
+        success: (json: T) => {
           setServerData(json)
           setLoading(false)
         }
@@ -46,9 +55,9 @@ function useServerData(url, initialData) {
 
 export default function CustomersPage() {
   const [query, setQuery] = useState("")
-  const {serverData: customers, loading, reloadData} = useServerData(`/customers?query=${query}`, [])
+  const {serverData: customers, loading, reloadData} = useServerData<Customer[]>(`/customers?query=${query}`, [])
 
-  function navigateToEdit(customer) {
+  function navigateToEdit(customer: Customer) {
     document.location.href = `/customers/${customer.id}/edit?redirect_to=/react/customers`
   }
 

diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.5",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.20",
     "chart.js": "^4.4.6",
     "lodash": "^4.17.21",

diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -348,6 +348,26 @@
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz#55710c92b311fdaa8d8c66682a0dbdd684bc77c4"
   integrity sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==
 
+"@types/prop-types@*":
+  version "15.7.14"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
+
+"@types/react-dom@^18.3.1":
+  version "18.3.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.2.tgz#b58a9520f5f317a00bbda0271502889b71c345f0"
+  integrity sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==
+  dependencies:
+    "@types/react" "^18"
+
+"@types/react@^18", "@types/react@^18.3.1":
+  version "18.3.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.14.tgz#7ce43bbca0e15e1c4f67ad33ea3f83d75aa6756b"
+  integrity sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@@ -502,6 +522,11 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"