refactor: add typescript definition and fix some type error

src/react-app-env.d.ts

@@ -1 +1,73 @@
-/// <reference types="react-scripts" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: "development" | "production" | "test";
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module "*.avif" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.bmp" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.webp" {
+  const src: string;
+  export default src;
+}
+
+// fix type error: TS2307: Cannot find module '...svg?url' or its corresponding type declarations.
+declare module "*.svg?url" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg" {
+  import * as React from "react";
+
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+  export default ReactComponent;
+}
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.sass" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}