Question

我一直在学习Typescript，并处理由某些组件不适合Typescript模型而导致的头痛问题，无论是由于贡献者问题还是由于边缘情况。

例如material-ui和react-router-dom

// Javascript
<Button
  type="submit"
  fullWidth
  variant="contained"
  color="primary"
  component={RouteLink}
  to="/order"
  >
  Order
 </Button>

将成为

// Typescript
<Button
  type="submit"
  fullWidth
  variant="contained"
  color="primary"
  {...{
    component: RouteLink,
    to: '/order'
  } as any}
  >
  Order
</Button>

在Typescript停止引发错误之前。如果Typescript没有执行任何优化，则我认为扩展操作会增加不必要的负担。 Typescript黑客会增加性能负担还是将其解决为等效的Javascript？

我确定这不会是我最近学到的Typescript骇客，但我希望它很少。

Answer 1

TypeScripts的目的是为您提供更多的类型安全性，这使重构代码更容易，并帮助您在编译时而不是运行时捕获错误。它不会以任何方式影响应用程序的性能，因为最后它们都被编译为纯JavaScript。

我假设您的问题是，您应该将“ to”道具传递给Button，何时该道具应该传递给RouteLink？如果是这样，我建议您尝试这样做。

creditCardsModalVisibleHandler = (visible) => {
    this.setState({creditCardsModalVisible: visible});
}

<Modal
    animationType="slide"
    transparent={false}
    visible={creditCardsModalVisible}
    presentationStyle="formSheet"
    onDismiss={() => {
        console.log('Close handled');
        this.creditCardsModalSwipeHandler();
    }}
    onRequestClose={() => {
        console.log('Modal has been closed');
        this.creditCardsModalSwipeHandler();
    }}
>
    <View style={[modal.main]}>
        <TouchableOpacity onPress={() => {this.creditCardsModalVisibleHandler(!creditCardsModalVisible);}}>
            <View style={[modal.closeButton]}>
                <ImageBackground source={modal.closeBackgroundImage} style={[modal.closeButtonImage]}/>
            </View>
        </TouchableOpacity>
    </View>
</Modal>

Typescript黑客会增加性能负担吗？

1 个答案: