import User from './components/User';

function App() {
  return (
    <div>
      {/* 正确使用 */}
      <User name="Prorise" age={3} isStudent={true} />

      {/* 尝试传递错误类型，编辑器会立刻报错！ */}
      {/* <User name="Prorise" age="三岁" isStudent={true} /> */}
      {/*                    ^^^^^^^^^^ 类型 'string' 不能赋值给类型 'number' */}
      
      {/* 尝试漏掉某个 prop，编辑器也会报错！ */}
      {/* <User name="Prorise" isStudent={true} /> */}
      {/* `^^^^` 缺少属性 'age' */}
    </div>
  );
}

type UserProps = {
  name: string
  age: number
  isStudent: boolean
}

// 我们也可以使用 `interface`，在定义组件 props 时，两者几乎等效
// interface UserProps {
//   name: string;
//   age: number;
//   isStudent: boolean;
// }


const User = ({ name, age, isStudent }: UserProps) => {
  return (
    <main>
      <h2 className="text-xl font-bold">{name}</h2>
      <p>年龄:{age}</p>
      <p>身份：{isStudent ? '学生' : '非学生'}</p>
    </main>
  )
}

export default User

import React from 'react';

// 1. 使用 `type` 或 `interface` 为 Button 的 props 定义类型
type ButtonProps = {
  label: string;
  onClick: () => void; // `onClick` 是一个不接收参数、无返回值的函数
  disabled?: boolean;   // `?` 表示 `disabled` 是一个可选的 prop
};

const Button = ({ label, onClick, disabled = false }: ButtonProps) => {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`
        px-4 py-2 font-semibold text-white rounded-md transition-colors
        ${disabled 
          ? 'bg-gray-400 cursor-not-allowed' 
          : 'bg-blue-500 hover:bg-blue-600'
        }
      `}
    >
      {label}
    </button>
  );
};

export default Button;

import Button from './components/Button';

function App() {
  const handlePrimaryClick = () => {
    alert('主按钮被点击了！');
  };

  return (
    <div className="p-8 space-x-4">
      <Button 
        label="点我" 
        onClick={handlePrimaryClick} 
      />
      <Button 
        label="禁用按钮" 
        onClick={() => alert('这个提示不会出现')} 
        disabled={true} 
      />
    </div>
  );
}

export default App;

import type { ReactNode } from 'react'; // `type` 关键字表示我们只导入类型信息

type CardProps = {
  children: ReactNode; // `ReactNode` 可以是任何 React 能渲染的东西
};

const Card = ({ children }: CardProps) => {
  return (
    <div className="p-4 border rounded-lg shadow-md">
      {children}
    </div>
  );
};

export default Card;

import Card from './components/Card';
import User from './components/User';

function App() {
  return (
    <Card>
      {/* 这里的 User 组件就是 Card 的 children */}
      <User name="Prorise" age={3} isStudent={true} />
    </Card>
  );
}

import React from 'react'
// 从我们的全局类型文件中导入 `Info` 类型
import { type Info } from '../types'

// 定义 UserInfo 组件的 props 类型
// 它需要一个 `user` prop，这个 prop 的类型必须符合我们导入的 `Info` 接口
type UserInfoProps = {
  user: Info
}

const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md mb-4">
      <h2 className="text-xl font-bold text-gray-800">普通用户信息</h2>
      <p>ID: {user.id}</p>
      <p>姓名: {user.name}</p>
      <p>邮箱: {user.email}</p>
    </div>
  )
}

export default UserInfo

const UserInfo = ({ user }: UserInfoProps) => {
}
export default UserInfo

import React from 'react'
// 从全局类型文件中导入 `AdminInfoList` 类型
import { type AdminInfoList } from '../types'

type AdminInfoProps = {
  admin: AdminInfoList
}

const AdminInfo = ({ admin }: AdminInfoProps) => {
  return (
    <div className="p-4 bg-blue-100 rounded-lg shadow-md">
      <h2 className="text-xl font-bold text-blue-800">管理员信息</h2>
      <p>ID: {admin.id}</p>
      <p>姓名: {admin.name}</p>
      <p>邮箱: {admin.email}</p>
      <p>角色: {admin.role}</p>
      <p>上次登录: {admin.lastLogin.toLocaleString('zh-CN')}</p>
    </div>
  )
}

export default AdminInfo

import UserInfo from './components/UserInfo'
import AdminInfo from './components/AdminInfo'
// 同时导入组件和类型
import { type Info, type AdminInfoList } from './types'

const App = () => {
  // 创建一个符合 `Info` 类型的用户数据
  const user: Info = {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
  }

  // 创建一个符合 `AdminInfoList` 类型的管理员数据
  const admin: AdminInfoList = {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    role: '管理员',
    lastLogin: new Date(),
  }

  return (
    <div className="container mx-auto p-8">
      <UserInfo user={user} />
      <AdminInfo admin={admin} />
    </div>
  )
}

export default App

import { useState } from "react";
import UserProfile from "./components/UserProfile";
import TodoList from "./components/TodoList";

const App = () => {
  // 场景1：初始值为数字 `0`
  // TypeScript 自动推断出 `count` 的类型是 `number`
  // `setCount` 的类型是 `React.Dispatch<React.SetStateAction<number>>`
  // 这意味着 `setCount` 只能接收数字或一个返回数字的函数
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };
  
  // 尝试传递一个字符串给 setCount，会立即得到一个类型错误
  // setCount("hello"); // ❌ 类型“string”的参数不能赋给类型“SetStateAction<number>”的参数

  return (
    <div className="container mx-auto p-8 space-y-8">
      <div>
        <h1 className="text-2xl font-bold">计数器: {count}</h1>
        <button onClick={increment} className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
          增加
        </button>
      </div>

      <UserProfile />
      <TodoList />
    </div>
  );
};

export default App;

import { useState } from "react";

// 1. 定义状态对象的形状
interface UserProfileData {
  name: string;
  age: number;
  email: string;
}

const UserProfile = () => {
  // 2. 将 UserProfileData 作为泛型传递给 useState
  //    并提供一个符合该类型的初始值
  const [profile, setProfile] = useState<UserProfileData>({
    name: "",
    age: 0,
    email: "",
  });

  const updateName = (name: string) => {
    setProfile((prevProfile) => ({ ...prevProfile, name }));
  };
  
  // ... 其他更新函数 ...

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md space-y-4">
      <h2 className="text-xl font-bold text-gray-800">用户个人资料</h2>
      <div className="flex flex-col space-y-2">
        <input
          type="text"
          placeholder="姓名"
          value={profile.name}
          onChange={(e) => updateName(e.target.value)}
          className="p-2 border rounded"
        />
        <input
          type="number"
          placeholder="年龄"
          value={profile.age > 0 ? profile.age : ""}
          onChange={(e) => setProfile(p => ({...p, age: Number(e.target.value)}))}
          className="p-2 border rounded"
        />
        <input
          type="email"
          placeholder="邮箱"
          value={profile.email}
          onChange={(e) => setProfile(p => ({...p, email: e.target.value}))}
          className="p-2 border rounded"
        />
      </div>
      <div className="mt-4 p-2 bg-gray-200 rounded">
        <h3 className="font-semibold">资料预览:</h3>
        <p>姓名: {profile.name}</p>
        <p>年龄: {profile.age}</p>
        <p>邮箱: {profile.email}</p>
      </div>
    </div>
  );
};

export default UserProfile;

import { useState } from 'react'

interface Todo {
  id: number
  task: string
  completed: boolean
}
function TodoList({ id, task, completed }: Todo) {
  // 2. 将 `Todo[]` (表示一个 Todo 对象的数组) 作为泛型传递给 useState
  const [todos, setTodos] = useState<Todo[]>([])

  const addTodo = (task: string) => {
    const newTodo: Todo = {
      id: Date.now(), // 使用时间戳作为更可靠的唯一 ID
      task,
      completed: false,
    }
    // 现在 TypeScript 知道 newTodo 符合 Todo 类型，可以安全地添加到数组中
    setTodos((prevTodos) => [...prevTodos, newTodo])
  }

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-xl font-bold text-gray-800">待办事项列表</h2>
      <button
        onClick={() => addTodo('学习 TypeScript')}
        className="my-2 px-4 py-2 bg-green-500 text-white rounded"
      >
        添加任务
      </button>
      <ul className="list-disc pl-5">
        {todos.map((todo) => (
          <li
            key={todo.id}
            className={todo.completed ? 'line-through text-gray-500' : ''}
          >
            {todo.task}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default TodoList

// 假设我们有一个 User 类型
interface User {
  id: number;
  name: string;
}

function UserData() {
  // 我们必须明确告诉 TypeScript，`user` 的类型
  // 可能是 `User` 对象，也可能是 `null`
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetchUserData().then(data => {
      setUser(data); // `data` 符合 `User` 类型，可以赋值
    });
  }, []);

  if (!user) {
    return <p>加载中...</p>;
  }
  
  // 在这里，TypeScript 知道 `user` 不再是 null，可以安全地访问 `user.name`
  return <h1>欢迎, {user.name}</h1>;
}
**总结**:

import { useRef } from 'react'

const FocusInput = () => {
  // 关键：为 useRef 提供一个泛型，指明它将引用一个 HTMLInputElement 元素。
  // 初始值为 `null`，因为在组件首次渲染时，DOM 元素还不存在。
  const inputRef = useRef<HTMLInputElement>(null)
  const handleFocus = () => {
    // 使用可选链操作符 `?.` 是一个好习惯。
    // 它能确保即使 `inputRef.current` 为 `null`，代码也不会报错。
    inputRef.current?.focus()
    // 现在，当您输入 `inputRef.current.` 时，
    // 编辑器会自动提示 `.focus()`, `.value`, `.select()` 等所有 input 元素的方法和属性！
  }

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-xl font-bold text-gray-800 mb-2">聚焦搜索框</h2>
      <input
        type="text"
        ref={inputRef}
        placeholder="点击按钮来聚焦"
        className="p-2 border rounded mr-2"
      />
      <button
        onClick={handleFocus}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        聚焦输入框
      </button>
    </div>
  )
}

export default FocusInput;

import React from 'react'; // 必须导入 React 才能使用其内置的事件类型

const EventHandling = () => {
  // 为鼠标点击事件提供精确类型：React.MouseEvent
  // 泛型 `<HTMLButtonElement>` 指明了事件源自于一个 button 元素
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("按钮被点击了!", e.currentTarget);
    // 现在 `e.` 会提示所有鼠标事件相关的属性，如 `e.clientX`, `e.preventDefault()` 等
  };

  // 为鼠标移入事件提供类型
  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
    console.log("鼠标进入了 div!", e.currentTarget);
  };

  return (
    <div 
      onMouseEnter={handleMouseEnter}
      className="p-4 bg-gray-100 rounded-lg shadow-md mt-4"
    >
      <h2 className="text-xl font-bold text-gray-800 mb-2">事件类型示例</h2>
      <button 
        onClick={handleClick}
        className="px-4 py-2 bg-green-500 text-white rounded"
      >
        点我!
      </button>
    </div>
  );
};

export default EventHandling;

import { useState } from 'react'

// 1. 为表单的 state 定义类型
interface ContactFormState {
  name: string
  email: string
}

const ContactForm = () => {
  // 2. 将类型应用于 useState
  const [formData, setFormData] = useState<ContactFormState>({
    name: '',
    email: '',
  })

  // 3. 为输入框的 `onChange` 事件提供精确类型
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 首先从事件对象 e.target 中解构出 name 和 value 属性，这两个属性分别代表了输入框的名称和用户输入的值。
    const { name, value } = e.target
    // 使用这种语法的原因是，它可以动态地根据输入框的 name 属性来更新对应的 formData 对象中的值。这样可以避免写多个 if-else 语句来处理不同输入框的变化，使代码更加简洁和易于维护。
    // 例如，如果 name 变量的值是 "username"，那么 [name]: value 就相当于 username: value；如果 name 是 "email"，就相当于 email: value。
    setFormData((prevState) => ({ ...prevState, [name]: value }))
  }

  // 4. 为表单的 `onSubmit` 事件提供精确类型
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    console.log('表单已提交:', formData)
    // 在这里可以处理表单提交逻辑，例如发送数据到 API
    alert(`你好, ${formData.name}!`)
  }


    return (
    <form
      onSubmit={handleSubmit}
      className="p-4 bg-gray-100 rounded-lg shadow-md mt-4 space-y-4"
    >
      <h2 className="text-xl font-bold text-gray-800">类型化表单示例</h2>
      <div>
        <label className="block mb-1 font-semibold">姓名:</label>
        <input
          type="text"
          placeholder='请输入你的姓名'
          name="name" // `name` 属性必须与 state 中的键匹配
          value={formData.name}
          onChange={handleChange}
          className="p-2 border rounded w-full"
        />
      </div>
      <div>
        <label className="block mb-1 font-semibold">邮箱:</label>
        <input
          type="email"
          placeholder='请输入你的邮箱'
          name="email"
          value={formData.email}
          onChange={handleChange}
          className="p-2 border rounded w-full"
        />
      </div>
      <button type="submit" className="w-full px-4 py-2 bg-purple-500 text-white rounded">
        提交
      </button>
    </form>
  );
}

export default ContactForm;

import { createContext, useState, type ReactNode, type FC } from "react";

// 1. 定义 Context 将要共享的数据和方法的“形状”
interface CounterContextProps {
  count: number;
  increment: () => void;
  decrement: () => void;
}

// 2. 创建 Context，并为其提供一个符合接口的默认值
//    这个默认值主要用于类型推断和在没有 Provider 的情况下单独测试消费者组件
export const CounterContext = createContext<CounterContextProps>({
  count: 0,
  increment: () => {},
  decrement: () => {},
});

// 3. 创建一个类型化的 Provider 组件
//    它负责管理真实的状态，并将状态通过 Context.Provider 传递下去
interface CounterProviderProps {
  children: ReactNode;
}

export const CounterProvider: FC<CounterProviderProps> = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <CounterContext.Provider value={{ count, increment, decrement }}>
      {children}
    </CounterContext.Provider>
  );
};

import CounterDisplay from "./components/CounterDisplay";
import { CounterProvider } from "./contexts/CounterContext";

export default function App() {
  return (
    // 在应用的顶层（或任何需要共享状态的子树的根部）包裹 Provider
    <CounterProvider>
      <div className="container mx-auto p-8">
        <h1 className="text-3xl font-bold mb-4">类型化的 Context 示例</h1>
        <CounterDisplay />
      </div>
    </CounterProvider>
  );
}

import { useContext } from "react";
import { CounterContext } from "../contexts/CounterContext";

const CounterDisplay: React.FC = () => {
  // `useContext` 会返回我们在 Provider 的 value 中传递的对象
  // TypeScript 知道它的类型是 `CounterContextProps`
  const { count, increment, decrement } = useContext(CounterContext);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <p className="text-2xl">Count: {count}</p>
      <div className="space-x-2 mt-2">
        <button onClick={increment} className="px-4 py-2 bg-green-500 text-white rounded">Increment</button>
        <button onClick={decrement} className="px-4 py-2 bg-red-500 text-white rounded">Decrement</button>
      </div>
    </div>
  );
};

export default CounterDisplay;

import { createContext, type ReactNode, useState, FC, useContext } from "react";

// 1. 定义 Context 数据的类型
type SharedInputContextData = {
  value: string;
  setValue: (newValue: string) => void;
};

// 2. 创建 Context，初始值为 undefined
//    我们明确告诉 TypeScript，这个 Context 的值可能是 `MyContextData`，也可能是 `undefined`
const SharedInputContext = createContext<SharedInputContextData | undefined>(undefined);

// 3. 创建 Provider 组件（与之前类似）
type SharedInputContextProviderProps = {
  children: ReactNode;
};

export const SharedInputContextProvider: FC<SharedInputContextProviderProps> = ({ children }) => {
  const [value, setValue] = useState<string>("");
  return (
    <SharedInputContext.Provider value={{ value, setValue }}>
      {children}
    </SharedInputContext.Provider>
  );
};

// 4. (最佳实践) 创建一个自定义 Hook 来消费 Context
//    这个 Hook 内部处理了 undefined 的情况，让消费者组件更干净
export const useSharedInput = () => {
  const context = useContext(SharedInputContext);
  if (context === undefined) {
    throw new Error("useSharedInput must be used within a SharedInputContextProvider");
  }
  return context;
};

import { useSharedInput } from "../contexts/SharedInputContext"; // 导入自定义 Hook

const SharedInputDisplay = () => {
  // 使用我们的自定义 Hook，不再需要自己处理 undefined 的情况
  const { value, setValue } = useSharedInput();

  return (
    <div className="p-4 bg-blue-100 rounded-lg shadow-md mt-4">
      <p className="text-xl">共享的值: {value}</p>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="mt-2 p-2 border rounded w-full"
        placeholder="在这里输入..."
      />
    </div>
  );
};

export default SharedInputDisplay;

import { useReducer } from "react";
// 导入 reducer 函数和 state 类型
import { counterReducer, CounterState } from "../reducers/counterReducer";

// 定义组件的初始状态，它必须符合 `CounterState` 类型
const initialState: CounterState = { count: 0 };

const Counter = () => {
  // `useReducer` 会根据 `counterReducer` 和 `initialState` 的类型，
  // 自动推断出 `state` 的类型是 `CounterState`，
  // `dispatch` 的类型是 `React.Dispatch<CounterAction>`
  const [state, dispatch] = useReducer(counterReducer, initialState);

  const increment = () => {
    // `dispatch` 的参数必须符合我们定义的 `CounterAction` 联合类型
    dispatch({ type: "INCREMENT" });
    // dispatch({ type: "INCREASE" }); // ❌ 类型错误! "INCREASE" 不在联合类型中
  };

  const decrement = () => {
    dispatch({ type: "DECREMENT" });
  };

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md mt-4">
      <h2 className="text-2xl font-bold">Count: {state.count}</h2>
      <div className="space-x-2 mt-2">
        <button onClick={increment} className="px-4 py-2 bg-green-500 text-white rounded">Increment</button>
        <button onClick={decrement} className="px-4 py-2 bg-red-500 text-white rounded">Decrement</button>
      </div>
    </div>
  );
};

export default Counter;

import React from "react";
import Counter from "./components/Counter";

const App: React.FC = () => {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold">React + TypeScript: useReducer 示例</h1>
      <Counter />
    </div>
  );
};

export default App;

import { useEffect, useState } from "react";

// 1. 使用 `interface` 定义 API 返回的用户数据结构
interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  phone: string;
}

const UserList = () => {
  // 2. 为所有状态提供精确的类型
  const [users, setUsers] = useState<User[]>([]); // 状态可以是 User 对象的数组
  const [loading, setLoading] = useState<boolean>(true); // 加载状态是布尔值
  const [error, setError] = useState<string | null>(null); // 错误状态可以是字符串或 null

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        if (!response.ok) {
          throw new Error("网络响应失败，请稍后再试");
        }
        // 3. 告诉 TypeScript `response.json()` 的返回值将是 `User[]` 类型
        const data: User[] = await response.json();
        setUsers(data);
      } catch (error) {
        // 4. 安全地处理错误类型
        //    使用 `instanceof Error` 来检查捕获到的 `error` 是否是一个真正的错误对象
        if (error instanceof Error) {
          setError(error.message);
        } else {
          setError("发生了一个未知错误");
        }
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []); // 空依赖数组确保只在挂载时执行一次

  if (loading) return <div className="text-center p-8">加载中...</div>;
  if (error) return <div className="text-center p-8 text-red-500">错误: {error}</div>;

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white shadow-md rounded-lg">
        <thead className="bg-gray-800 text-white">
          <tr>
            <th className="py-3 px-4 text-left">姓名</th>
            <th className="py-3 px-4 text-left">用户名</th>
            <th className="py-3 px-4 text-left">邮箱</th>
            <th className="py-3 px-4 text-left">电话</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id} className="border-b hover:bg-gray-100">
              {/* TypeScript 知道 `user` 是 User 类型，所以可以安全地访问其属性 */}
              <td className="py-3 px-4">{user.name}</td>
              <td className="py-3 px-4">{user.username}</td>
              <td className="py-3 px-4">{user.email}</td>
              <td className="py-3 px-4">{user.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default UserList;

import UserList from "./components/UserList/UserList";

const App = () => {
  return (
    <main className="container mx-auto p-8">
      <h1 className="text-4xl font-bold mb-6 text-center"> 用户列表 </h1>
      <UserList />
    </main>
  );
};

export default App;