传递应该抛出的对象时，打字稿不会抛出错误答案

【问题标题】：typescript not throwing error when passed an object that should throw传递应该抛出的对象时，打字稿不会抛出错误
【发布时间】：2021-04-06 17:21:45
【问题描述】：

我有一些代码我希望抛出一个不在打字稿中的错误，我不知道为什么。我在反应原生项目中有以下代码：

  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'
  }} />

我正确地得到了Object literal may only specify known properties, and 'randomProps' does not exist in type 'ViewStyle | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>'.

我可以做些什么来确保我在样式的非直接分配中得到这个错误？

【问题讨论】：

标签： reactjs typescript react-native

【解决方案1】：

请尝试明确指定样式类型。

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

然后打字稿将了解在变量初始化期间要验证的内容。

【讨论】：

你可能想要 React Native 版本 const styles: ViewStyle = {...}
这不起作用，我得到的行为与上面示例中的行为相同。
错误将在styles的初始化，而不是它的使用。
啊，这是真的。问题出在我的实际代码中，我不能像在创建和使用之间断开对象的键一样这样做。

【解决方案2】：

发生这种情况是因为您的 styles const 的类型是一个简单对象，而不是 Stylesheet 对象，因此它不知道哪些样式值是合适的。要解决这个问题，请像这样定义您的样式：

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

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

【讨论】：

这也行不通。我很惊讶地发现我可以在StyleSheet.create 中输入任何我想要的值而不会抱怨打字稿。
我猜理论上这些应该在View 上进行检查，但在这种情况下，与我上面的代码发生的情况相同，它只会让任何事情通过