Typescript 属性在类型“{}”上不存在

Question

I have type User that can be empty object or object with required fields. In function getFirstName I check if object is not empty and then return one of the fields. Then I have error: "Property 'firstName' does not exist on type '{}'". Why does it work so?

type User =
  | {
      firstName: string;
      age: number;
    }
  | {};

const getFirstName = (currentUser: User) => {
  if (!Object.keys(currentUser).length) {
    return "_";
  }
  return currentUser.firstName; //Property 'firstName' does not exist on type '{}'
};

export default function App() {
  const user: User = {
    firstName: "Bob",
    age: 14
  };

  const emptyUser = {};

  return (
    <div className="App">
      <h1>Hello {getFirstName(user)}</h1>
      <h1>Hello {getFirstName(emptyUser)}</h1>
    </div>
  );
}

CodeSandBox

Answer 1

1.suggest Object.keys(currentUser).length <= 0 instead of .Object.keys(currentUser).length

2.you need to down cast the union type because property firstName does not exist across multiple type of the union type

type User =
  | {
      firstName: string;
      age: number;
    }
  | {};

const getFirstName = (currentUser: User) => {
  if (Object.keys(currentUser).length <= 0) {
    return "_";
  }
  return (currentUser as {
    firstName: string;
    age: number;
  }).firstName;
};

export default function App() {
  const user: User = {
    firstName: "Bob",
    age: 14
  };

  const emptyUser = {};

  return (
    <div className="App">
      <h1>Hello {getFirstName(user)}</h1>
      <h1>Hello {getFirstName(emptyUser)}</h1>
    </div>
  );
}

Answer 2

A better approach is to remove the empty object from the User type (this way you take full advantage of typescript's type checking) and when you encounter an empty object that you know is a User type then just cast it with the as keyword.

type User = {
      firstName: string;
      age: number;
    };

const getFirstName = (currentUser: User) => {
  if (!Object.keys(currentUser).length) {
    return "_";
  }
  return currentUser.firstName;
};

export default function App() {
  const user: User = {
    firstName: "Bob",
    age: 14
  };

  const emptyUser = {};

  return (
    <div className="App">
      <h1>Hello {getFirstName(user)}</h1>
      <h1>Hello {getFirstName(emptyUser as User)}</h1>
    </div>
  );
}