Typescript 屬性在類型“{}”上不存在

Question

我的User類型可以是空的 object 或 object 和必填字段。 在 function getFirstName中，我檢查 object 是否不為空，然后返回其中一個字段。 然后我有錯誤：“類型'{}'上不存在屬性'firstName'”。 為什么會這樣？

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>
  );
}

代碼沙盒

Answer 1

1.建議Object.keys(currentUser).length <= 0代替.Object.keys(currentUser).length

2.你需要向下轉換聯合類型，因為在聯合類型的多個類型中不存在屬性 firstName

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

更好的方法是從 User 類型中刪除空的 object （這樣你就可以充分利用 typescript 的類型檢查），當你遇到一個你知道是 User 類型的空 object 時，只需使用as關鍵字進行轉換。

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>
  );
}