给React Prop一个接口

Question

大家好，我有一些问题，所以我喜欢使用接口来避免混淆，同时保持可读性和智能性现在我的问题是，我也想(通过道具(将其用于给定的数据，但我不知道如何做到这一点这是我写的一个例子https://codesandbox.io/s/practical-easley-y82ox?file=/src/App.js:0-748

所以我想在渲染之前得到一个错误，即给定的道具不是正确的类型这怎么可能呢？我尝试在构造函数Test(｛q｝：Question(中编写类型，以及React->没有智能，也无法通过界面理解我确信我错过了什么，或者没有理解真正的区别，我不是在努力解决几个小时。很高兴得到的帮助

Answer 1

从您的代码沙箱中，您的文件是JavaScript.js，而不是TypeScript.ts，或者最好是React.tsx，这会给您带来智能感。

Answer 2

您的代码存在一些问题：

• 正如John的回答中所指出的，您必须将文件的扩展名重命名为.tsx，TS才能正确处理它们
• 现在，您的Question接口定义为

interface Question {
question: String;
answers: [];
}

而testCorrect变量的类型应定义为：

interface Question {
question: string
answers: string[]
}

• 则Test组件的类型应写成：

interface TestProps {
q: Question
}
function Test({ q }: TestProps): JSX.Element {
...
}

或者，如果你更喜欢内联：

function Test({ q }: { q: Question }): JSX.Element {
...
}

TS游乐场