Typescript中Omit数据类型的理解

在 TypeScript 中，Omit 是一个内置的工具类型，它用于从对象类型中排除指定的属性，并返回剩余的属性。

Omit 的语法如下所示：

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

其中，T 表示原始类型，K 表示要排除的属性键的联合类型。

使用 Omit 类型时，我们可以指定要从原始类型中排除的属性，然后得到一个新的类型，该类型不包含指定的属性。

在实际开发中，我们如何去使用

interface User {
    id:number,
    username:string,
    password:string,
    email:string
}

// 使用Omit从User类型中排除"password"和"email"字段，创建PublicUserInfo类型
type PublicUserInfo = Omit<User,"password" | "email">;

const mockUser = {
    id:1,
    username:'jack',
    email:'jack@163.com',
    password:"hashed_password"
}

// 登录函数，验证用户名和密码是否匹配，若匹配则返回PublicUserInfo类型，否则返回null
function login(username:string,password:string): PublicUserInfo | null {
    if(username === mockUser.username && password === mockUser.password){
        return {
            id:mockUser.id,
            username:mockUser.username
        };
    }else{
        return null;
    }
}

// 用户个人资料组件，接收一个PublicUserInfo类型的user作为参数
function UserProfile({ user } : { user: PublicUserInfo }){
    return (
        <div>
            <h1>User Profile</h1>
            <p>id:{user.id}</p>
            <p>username:{user.username}</p>
        </div>
    )
}

const App = () => {
    // 模拟用户登录
    const loggedUser = login("jack","hashed_password")
    return (
        <div>
            <h1>在react中应用TS中omit类型</h1>
            { loggedUser ? <UserProfile user={loggedUser} /> : (<p>Login file</p>) }
        </div>
    )
}

export default App;

得出的效果如下：?

这段代码演示了在React中如何应用TS中的Omit类型。首先，我们定义了一个user接口，包含id.username、password和email字段。然后，使用0mit类型从User类型中排除了password和email字段，创建了PublicUserInfo类型。
接下来，我们使用mockUser对象模拟一个用户信息，包括id、username、email和password字段在login函数中，我们验证输入的用户名和密码是否与模拟用户的信息匹配。如果匹配，则返回个包含id和username字段的PublicUserInfo对象;否则，返回nu11。
UserProfile组件接收一个user参数，类型为PublicUserInfo，并展示用户的个人资料最后，在App组件中模拟用户登录，并根据登录状态渲染不同的内容