ReactとTypeScriptでコンポーネントの型チェックを徹底解説！初心者向けガイド

npx create-react-app my-app --template typescript

npm install typescript @types/react @types/react-dom

const App: React.FC = () => {
  return <h1>Hello, TypeScript with React!</h1>;
};

interface User {
  id: number;
  name: string;
}

const user: User = { id: 1, name: "Alice" };
// user.name の入力時に候補が自動表示される

type ButtonSize = "small" | "medium" | "large";

interface ButtonProps {
  size: ButtonSize;
  label: string;
}

const Button: React.FC<ButtonProps> = ({ size, label }) => (
  <button className={`btn-${size}`}>{label}</button>
);

const greetUser = (name: string): string => {
  return `Hello, ${name}`;
};

// greetUser(123); // エラー: 引数はstring型である必要があります

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 使用例
<Greeting name="Alice" />;

type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean; // オプショナルプロパティ
};

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => (
  <button onClick={onClick} disabled={disabled}>
    {label}
  </button>
);

// 使用例
<Button label="Click me" onClick={() => alert("Clicked!")} />;
<Button label="Disabled" onClick={() => {}} disabled={true} />;

interface CardProps {
  title: string;
  content: string;
  footer?: string;
}

const Card: React.FC<CardProps> = ({ title, content, footer = "Default Footer" }) => (
  <div>
    <h2>{title}</h2>
    <p>{content}</p>
    <footer>{footer}</footer>
  </div>
);

// 使用例
<Card title="Card Title" content="This is the card content." />;
<Card title="Card Title" content="This is the card content." footer="Custom Footer" />;

interface CounterProps {
  initialValue: number;
}

interface CounterState {
  count: number;
}

const Counter: React.FC<CounterProps> = ({ initialValue }) => {
  const [state, setState] = React.useState<CounterState>({ count: initialValue });

  const increment = () => {
    setState(prevState => ({ count: prevState.count + 1 }));
  };

  const decrement = () => {
    setState(prevState => ({ count: prevState.count - 1 }));
  };

  return (
    <div>
      <h2>Current Count: {state.count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// 使用例
<Counter initialValue={10} />;

interface FormState {
  username: string;
  email: string;
  password: string;
}

const UserForm: React.FC = () => {
  const [formState, setFormState] = React.useState<FormState>({
    username: "",
    email: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormState(prevState => ({ ...prevState, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Form Submitted:", formState);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        type="email"
        name="email"
        value={formState.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={formState.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const userName: string = "Alice";
const userAge: number = 25;

// 間違った型の代入
// userAge = "twenty-five"; // エラー: string型はnumber型に代入できません

const add = (a: number, b: number): number => {
  return a + b;
};

// 間違った引数
// add("2", 3); // エラー: string型はnumber型に渡せません

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 正しい使用
<Greeting name="Alice" />;

// 間違った使用
// <Greeting name={123} />; // エラー: number型はstring型に渡せません

const [count, setCount] = React.useState<number>(0);

// 正しい更新
setCount(5);

// 間違った更新
// setCount("ten"); // エラー: string型はnumber型に渡せません

type Status = "success" | "error" | "loading";

const DisplayStatus: React.FC<{ status: Status }> = ({ status }) => {
  return <div>Status: {status}</div>;
};

// 使用例
<DisplayStatus status="success" />;
// <DisplayStatus status="completed" />; // エラー: 型 '"completed"' は 'Status' に割り当てられません

const [count, setCount] = React.useState<number>(0);

const increment = () => {
  setCount(prev => prev + 1);
};

// 使用例
console.log(count); // 型補完が効き、countは常にnumber型

interface User {
  id: number;
  name: string;
}

const [user, setUser] = React.useState<User | null>(null);

const updateUser = () => {
  setUser({ id: 1, name: "Alice" });
};

React.useEffect(() => {
  console.log("Component mounted");
}, []);

React.useEffect(() => {
  const handleResize = (event: UIEvent) => {
    console.log("Window resized", event);
  };

  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

interface Theme {
  primaryColor: string;
  secondaryColor: string;
}

const ThemeContext = React.createContext<Theme | undefined>(undefined);

const ThemedComponent: React.FC = () => {
  const theme = React.useContext(ThemeContext);

  if (!theme) {
    throw new Error("ThemeContext is not provided");
  }

  return <div style={{ color: theme.primaryColor }}>Hello, Theme!</div>;
};

interface State {
  count: number;
}

type Action = { type: "increment" } | { type: "decrement" };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter: React.FC = () => {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
    </div>
  );
};

npm install react-router-dom
npm install --save-dev @types/react-router-dom

import someLibrary from "some-library";

interface SomeLibraryType {
  doSomething: (arg: string) => void;
}

const lib = someLibrary as SomeLibraryType;

lib.doSomething("Hello");

src/@types/some-library/index.d.ts

declare module "some-library" {
  export function doSomething(arg: string): void;
}

import { createTheme } from "@mui/material/styles";

declare module "@mui/material/styles" {
  interface Theme {
    customColors: {
      primary: string;
      secondary: string;
    };
  }
  interface ThemeOptions {
    customColors?: {
      primary?: string;
      secondary?: string;
    };
  }
}

const theme = createTheme({
  customColors: {
    primary: "#ff5722",
    secondary: "#4caf50",
  },
});

export default theme;

interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUsers = async (): Promise<User[]> => {
  const response = await fetch("https://api.example.com/users");
  const data = await response.json();
  return data;
};

fetchUsers().then(users => {
  console.log(users[0].name); // 型補完が有効
});

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 誤った使用
// <Greeting name={123} />; // エラー: 'number'型は'string'型に割り当てられません

<Greeting name="Alice" />;

const [count, setCount] = React.useState(null);

// setCount("text"); // エラー: 'string'型は'null'型に割り当てられません

const [count, setCount] = React.useState<number | null>(null);
setCount(5);

React.useEffect(() => {
  console.log("Effect ran");
}, []); // 実際には外部変数が参照されている場合

const count = 5;

React.useEffect(() => {
  console.log(`Count: ${count}`);
}, [count]);

import someLibrary from "some-library";

// someLibrary.doSomething(); // 型エラー: 'doSomething'は存在しません

// src/@types/some-library/index.d.ts
declare module "some-library" {
  export function doSomething(): void;
}

type Response = string | number;

const logResponse = (response: Response) => {
  console.log(response.toUpperCase()); // エラー: 'toUpperCase'は'string'型にのみ存在します
};

const logResponse = (response: Response) => {
  if (typeof response === "string") {
    console.log(response.toUpperCase());
  } else {
    console.log(response.toFixed(2));
  }
};