英文:
Constraint on return and error to make sure one is defined
问题
我有一个简单的情况，钩子函数返回{data, error}。为简单起见，让我们假设它们都是字符串。虽然在第二个返回时，error和data都可以是undefined，但两者不可能同时为undefined。
在TypeScript中，我有办法设置约束，确保它们不会同时为undefined吗？我在React组件中使用这个函数，并希望以下代码能够正常工作：
const myComponent: React.FC = function() {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>
if (data) return <div>data</div>
}
而不是抛出错误：
Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null.
如果有一种方法告诉TypeScript error || data 总是为true，那么这个问题就不会存在。
一个解决方案是创建两个接口，一个要求error，允许data是可选的，另一个要求data，允许error是可选的，然后将useMyCustomHook的返回类型定义为这两个接口的联合类型。但这听起来像一个不太适用于规模的糟糕解决方案。如果我想要五个属性中的一个，甚至是其中的两个被定义，会发生什么呢？
英文:
I have a simple case, hook function that returns {data, error} For simplicity lets assume that both are strings. While both error and data can be undefined when the second is returned, It's not possible that both are undefined together.
Do I have a way in typescript to set constraint that it will never happen that both are undefined? I use function in the React component and I would like this code
const myComponent: React.FC= function(){
const { data, error } = useMyCustomHook();
if ( error ) return<div> error </div>
if (data) return <div> data </div>
}
to be ok. Instead it throws
Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
Which wouldnt be here if there would be a way to tell typescript that error || data is always true.
One solution would be to make two interfaces one that require error with optional dataanother that require data leaving error optional and then type useMyCustomHook return to be union of those two, but it sounds like a bad solution that doesnt work in the scale. Imagin what will happen if I would like to have one property out of five, or even two out of five to be defined.
答案1
得分: 1
以下是翻译好的内容：
如果数据可能是假值，比如undefined，当前的代码将忽略一个条件。在这种情况下，你应该处理数据是假值的情况。
你可以像这样修改代码：
const MyComponent: React.FC = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (!data) return <div>empty</div>;
// 你可以安全地访问数据
return <div>data</div>;
};
或者，你可以将一个常规函数用作组件，以避免受限于React.FC类型。这仍然应该是一个有效的组件：
const MyComponent = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (data) return <div>data</div>;
}
英文:
It would be useful to see what type useMyCustomHook returns.
If data can be falsy, such as undefined, the current code will miss one condition. In this case, you should handle the case where data is falsy.
You can modify the code like this:
const MyComponent: React.FC = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (!data) return <div>empty</div>;
// you can safely access to the data
return <div>data</div>;
};
Alternatively, you can use a regular function as a component, so as not to be restricted to the React.FC type. This should still be a valid component:
const MyComponent = () => {
const { data, error } = useMyCustomHook();
if (error) return <div>error</div>;
if (data) return <div>data</div>;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论