如何让 vscode 识别反应原生的解构属性？答案

【问题标题】：How to get vscode to recognize react native destructured attributes?如何让 vscode 识别反应原生的解构属性？
【发布时间】：2020-08-27 20:51:58
【问题描述】：

我有这个代码：

const Ticket = ({ ticket }) => (
  <TicketWrapper>
    <Title>{ticket.Title}</Title>
    <Body>{ticket.Body}</Body>
  </TicketWrapper>
);

但由于 ticket 应该具有未大写的属性，即

const Ticket = ({ ticket }) => (
  <TicketWrapper>
    <Title>{ticket.title}</Title>
    <Body>{ticket.body}</Body>
  </TicketWrapper>
);

并且在编辑过程中，我没有获得属性的自动完成建议（无论大小写！）。

这让我在这里的错误真的很难发现！

我已经安装和激活了 react 和 react native 的扩展。

但他们没有帮助解决这个问题。

这里如何获取 vs 代码来帮助我？

【问题讨论】：

什么是票？你是否有 propTypes、flow、typescript 或其他任何类型信息，可以告诉你的工具它有什么 props？

标签： reactjs react-native visual-studio-code

【解决方案1】：

在 typescript 中，我安装了 @types/react 包作为项目的一部分（create-react-app 添加了它），它允许我这样做：

export interface TicketType {
    title: string;
    body: string;
}

export interface TicketProps {
  ticket: TicketType;
}

const Ticket: React.FC<TicketProps> = ({ ticket}) => {
    // ticket is of type TicketType and can use
    // use ticket.title and ticket.body
}

如果您不使用打字稿，您应该查看proptypes：

【讨论】：

是 OP 使用 TypeScript 吗？请注意，@types/react 只是为核心 React 提供类型标头，就像 FC，它是允许您编写和使用接口的 TS。