Typescript，如何传递“对象可能为空”错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55677600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript, how to pass "Object is possibly null" error?
提问by SixtyEight
I've got the "Object is possibly null" error many times and usually I use a safety "if statement" in case it returns null.
我多次遇到“对象可能为空”错误，通常我使用安全的“if 语句”以防它返回空值。
I've got the following function:
我有以下功能：
const ModalOverlay = (props: any[]) => {
const overlayEl = useRef(null);
useEffect(() => {
overlayEl.current.focus();
});
return <div {...props} ref={overlayEl} />;
}
But overlayEl.currentgets the error "Object is not defined". So I've tried:
但overlayEl.current得到错误“对象未定义”。所以我试过：
if (!overlayEl) {
return null
} else {
useEffect(() => {
overlayEl.current.focus();
});
return <div {...props} ref={overlayEl} />;
}
Which didn't work. I've tried also:
这没有用。我也试过：
overlay && overlayEl.current.focus();
Any hints would be highly appreciated! Thanks
任何提示将不胜感激！谢谢
回答by Shanon Hymanson
When you declare const overlayEl = useRef(null); Makes the type it comes out as is null because that's the best possible inference it can offer with that much information, give typescript more information and it will work as intended.
当你声明 const overlayEl = useRef(null); 使它出来的类型为空，因为这是它可以提供这么多信息的最佳推断，为打字稿提供更多信息，它会按预期工作。
Try....
尝试....
const overlayEl = useRef<HTMLDivElement>(null);
Alternatively some syntax sugar for if you don't care for when its undefined is to do something like this.
或者一些语法糖，如果你不关心它何时 undefined 是做这样的事情。
const overlayEl = useRef(document.createElement("div"))
using the above syntax all common DOM methods just return defaults such as "0" i.e overlayEl.offsetWidth, getBoundingClientRect etc.
使用上述语法，所有常见的 DOM 方法只返回默认值，例如“0”，即 overlayEl.offsetWidth、getBoundingClientRect 等。
回答by Nikola Lukic
If you really know that in executing time you dont have a error here then just put :
如果您真的知道在执行时您没有错误，那么只需输入：
(overlayEl as any).current
If not, better use:
如果没有，最好使用：
if (typeof overlayEl !== 'undefined' &&
typeof overlayEl.current !== 'undefined' &&
overlayEl.current === null) {
return;
}
// Or
try {
// you code here ...
overlay && overlayEl.current && overlayEl.current.focus();
} catch(e){
console.log("Real null >> ", e);
}
// Suggest if i am wrong in syntax somewhere ,this is fast answer ;)
回答by TargetTaiga
const overlayEl = useRef() as MutableRefObject<HTMLDivElement>;
It will cast overlayElto an initiated MutableRefObject that is the returning value of useRef:
它将转换overlayEl为一个已启动的 MutableRefObject，它是 的返回值useRef：
function useRef<T = undefined>(): MutableRefObject<T | undefined>;
Yet in this case, the compiler will always think that overlayElhas a value.
然而在这种情况下，编译器总是认为它overlayEl有一个值。
回答by Barbu Barbu
If you want to "pass/skip" then this will do it const overlayEl: any = useRef(null);
如果你想“通过/跳过”，那么这会做到 const overlayEl: any = useRef(null);
