当标识符有错别字时， Props不显示错误

Question

这是我的App.js文件

import Data from "./second"
function App() {
return (
<div>
<Data
given_data = 'This is data'></Data>
</div>
);
}
export default App;

这是我的second.js文件

function Data(props)
{
return(
<div >
<p>{props.given_data}</p>
</div>
);
}
export default Data;

如果我把second.js的props.given_data误输入为props.given_dattttaa或其他东西，它没有显示任何错误，为什么?

没有任何错误，我找不到我做错了什么?

是否有任何方法显示错误无论是在浏览器控制台或编辑器终端?

Answer 1

您使用的是纯Javascript，因此在实际调用代码之前无法确定实际传递的是props。

这就是Typescript(或多或少)被发明出来的目的。粗略地说，Typescript允许你使用带有类型的Javascript，或者换句话说:Typescript是带有"一些额外文档"的Javascript。文档中提供了快速入门指南。

对于您的具体情况，您可以键入props对象，如下所示。

// define whatever you are going to pass to props
type DataProps = {
given_data: string
}
function Data(props: DataProps){
console.log(props.given_data)
....
}

设置完成后，您将注意到，如果在props中访问与given_data不同的内容，typescript将会报错。