JSX 中的 TypeScript 类型断言

Posted 2023-03-13

【中文标题】JSX 中的 TypeScript 类型断言

【英文标题】：TypeScript Type Assertion in JSX

【发布时间】：2021-12-29 22:06:32

【问题描述】：

我如何断言配置文件是仅在 isAdmin JSX 区域内的 UserProfileForAdmin 类型，以便仅为管理员显示电话号码。

import  View, Text  from "react-native";

interface Profile 
  name: string;


interface UserProfileForAdmin extends Profile 
  phone: string;


export interface HomeSingleProfileProps 
  profile: Profile | UserProfileForAdmin;
  isAdmin: boolean;


const SingleProfile = (props: HomeSingleProfileProps) => 
  return (
    <View>
      <Text>
        props.isAdmin ? (
          <>
            props.profile.phone
          </>
        ) : (
          <>
            props.profile.name
          </>
        )
      </Text>
    </View>
  );
;

export default SingleProfile;

目前它给出了错误

TS2339：“配置文件 | 类型”中不存在属性“电话” UserProfileForAdmin'。 “配置文件”类型上不存在属性“电话”。

编辑： 有没有办法从下面的代码中断言类型？

import  View, Text  from "react-native";

interface Profile 
  name: string;


interface UserProfileForAdmin extends Profile 
  phone: string;


export interface HomeSingleProfileProps 
  profile: Profile | UserProfileForAdmin;


const SingleProfile = (props: HomeSingleProfileProps) => 
  // logic to determine if the current user is admin or not
  const isAdmin = checkIfUserIsAdmin(user); // might be true or false

  return (
    <View>
      <Text>
        props.isAdmin ? (
          <>
            props.profile.phone
          </>
        ) : (
          <>
            props.profile.name
          </>
        )
      </Text>
    </View>
  );
;

export default SingleProfile;

【参考方案1】：

好像这个类型不对：

export interface HomeSingleProfileProps 
  profile: Profile | UserProfileForAdmin;
  isAdmin: boolean;

根据该类型，isAdmin 可以是true，而profile 的类型可能没有有phone。

所以我猜你想要的是profile 只能是UserProfileForAdmin 如果isAdmin 是true。如果是这样，那么您需要在您的类型中显示这一点。

interface UserProfileProps 
  profile: Profile;
  isAdmin: false;  


export interface AdminProfileProps 
  profile: UserProfileForAdmin;
  isAdmin: true;


export type HomeSingleProfileProps = UserProfileProps | AdminProfileProps

这里HomeSingleProfileProps 现在是两种可能性之一。要么是管理员，管理员配置文件为 phone，要么不是管理员，配置文件没有“电话”。

See playground for working example

【讨论】：

感谢您分享您的答案。问题是：如果我们确定函数内部的isAdmin 并且不从参数中获取它；那么是否可以将类型断言为UserProfileForAdmin 以消除此 TypeScript 错误？

如果你想要一个函数来检测对象并将其声明为类型，那就是类型谓词：typescriptlang.org/docs/handbook/2/…。也许像const checkIfUserIsAdmin = (user: User): user is Admin => user.isAdmin