reactjs - 當傳入一個本應拋出錯誤的物件時，typescript 沒有拋出錯誤

我有一些程式碼，我預期會拋出 TypeScript 中不存在的錯誤，但我不知道原因。我在一個 React Native 專案中有以下程式碼：

  const styles = {
    flexGrow: 1,
    width: '100%',
  } as const

  return <View style={styles} />

這一切都很好。然而，如果我向 styles 添加一個無效的樣式：

  const styles = {
    flexGrow: 1,
    width: '100%',
    invalidStyle: 'bla'
  } as const

  return <View style={styles} />

TypeScript 不會拋出錯誤。

如果我直接將樣式放在 View 的 style 屬性上，這會有效（拋出錯誤）:

  return <View style={{
    flexGrow: 1,
    width: '100%',
    invalidStyle: 'bla'
  }} />

我正確地得到 物件字面值只能指定已知屬性，而'randomProps' 在類型 'ViewStyle | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>' 中不存在。

有什麼方法可以確保我在非直接樣式賦值時會遇到這個錯誤嗎？

答案＃1

請嘗試明確指定樣式類型。

const styles: CSSProperties = {
    flexGrow: 1,
    width: '100%',
    invalidStyle: 'bla'
  } as const

那麼 TypeScript 就會知道在變數初始化時要驗證什麼。

答案＃2

這種情況發生是因為你的 styles 常數的類型是一個簡單物件，而不是 Stylesheet 物件，所以它不知道哪些樣式值是合適的。要解決這個問題，可以這樣定義你的樣式：

const styles = StyleSheet.create({
     viewStyle: {
         flexGrow: 1,
         width: "100%",
         invalidStyle: "bla",
     },
});

return <View style={styles.viewStyle} />