【实战】TS 应用：JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目

import React, { useState } from 'react';
 
interface User {
  id: number;
  name: string;
}
 
const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
 
  const addUser = (user: User) => {
    setUsers(prevUsers => [...prevUsers, user]);
  };
 
  return (
    <div>
      <button onClick={() => addUser({ id: Date.now(), name: 'New User' })}>
        Add User
      </button>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};
 
export default UserList;

这段代码定义了一个React组件UserList，它使用了React Hook useState来管理用户状态。组件有一个addUser函数，用于添加新用户到用户列表。这个例子展示了如何在React和TypeScript结合使用时，创建一个具有强类型状态和属性的组件。