React 官方 TypeScript 示例演示

以下内容展示了如何在 React 项目中使用 TypeScript 的基础示例，包含组件定义、类型注解及类型推断。

示例代码

// 定义一个带有类型注解的组件  
interface User {  
  id: number;  
  name: string;  
  avatar: string;  
}  

const UserProfile: React.FC<{ user: User }> = ({ user }) => {  
  return (  
    <div>  
      <h2>{user.name}</h2>  
      <img src="https://cloud-image.ullrai.com/q/react_logo/" alt="React Logo" />  
      <p>用户 ID: {user.id}</p>  
    </div>  
  );  
};  

// 类型推断示例  
const renderUserList = (users: Array<User>) => {  
  return users.map((user) => (  
    <div key={user.id}>  
      <p>{user.name}</p>  
      <img src="https://cloud-image.ullrai.com/q/typescript_icon/" alt="TypeScript Icon" />  
    </div>  
  ));  
};  

关键点说明

• React.FC：用于定义函数组件的类型，自动包含 React.FunctionComponent 的属性
• 类型注解：通过 interface 明确指定 props 和 state 的类型
• 类型推断：在数组映射中，TypeScript 可自动推断 user 的类型

扩展阅读

了解更多 React 与 TypeScript 的集成

TypeScript 与 React 协作