entityMap|blocks|key|2hv4h|text|如果你真的知道在执行过程中不会出现错误，那么只需放入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f1qsr|(overlayEl+as+any).current|code-block|syntax|javascript|bfero|如果没有，最好使用：|eu7gn|if+(typeof+overlayEl+!==+'undefined'+&&
++++++typeof+overlayEl.current+!==+'undefined'+&&
++++++overlayEl.current+===+null)+{++++++++++
++++++return;
++++}

++++//+Or

++++try+{
++++++//+you+code+here+...
++++++//+This+is+fine+way+to+check+by+order+->+parent.parent.FinalInstance
++++++//+Also+try+&+catch+will+handle+all+bad+situation+about+current+error
++++++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+;)^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

If you really know that in executing time you dont have a error here then just put :

<pre><code> (overlayEl as any).current 
</code></pre>

If not, better use: 

<pre><code> if (typeof overlayEl !== 'undefined' &amp;&amp;
 typeof overlayEl.current !== 'undefined' &amp;&amp;
 overlayEl.current === null) { 
 return;
 }

 // Or

 try {
 // you code here ...
 // This is fine way to check by order -&gt; parent.parent.FinalInstance
 // Also try &amp; catch will handle all bad situation about current error
 overlay &amp;&amp; overlayEl.current &amp;&amp; overlayEl.current.focus();

 } catch(e){
 console.log("Real null &gt;&gt; ", e); 
 }

 // Suggest if i am wrong in syntax somewhere ,this is fast answer ;)
</code></pre>

entityMap|blocks|key|b71dd|text|当你声明const+typescript+=+useRef(+null+)；使它的类型为null，因为这是它能提供的最好的推断，它可以提供那么多的信息，给typescript更多的信息，它就会像预期的那样工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9uf65|试试看..。|l3e2|const+overlayEl+=+useRef(null);|code-block|syntax|javascript|1hb8f|或者，一些语法糖，如果你不关心它的未定义是这样做的。|9cps7|const+overlayEl+=+useRef(document.createElement("div"))|efeuc|使用上面的语法，所有常见的DOM方法都只返回默认值，如"0“，即overlayEl.offsetWidth、getBoundingClientRect等。|8n03|用法：|425jh|if(overlayEl.current)+{
++++//+will+be+type+HTMLDivElement+NOT+HTMLDivElement+%7C+null
++++const+whattype+=+overlayEl.current;+
}|9t9e2|这种工作方式是类型脚本静态分析足够聪明，可以找出|b967l|检查"guards“是否为null，因此它将把该类型作为一个可能的类型从|89p7p|在那些括号里。^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|10|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|11|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|12|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|13|9|@]|A|@]|B|$H|I]]|$2|N|4|O|6|7|8|14|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|15|9|@]|A|@]|B|$]]|$2|R|4|S|6|G|8|16|9|@]|A|@]|B|$H|I]]|$2|T|4|U|6|7|8|17|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|18|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|19|9|@]|A|@]|B|$]]]]

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.
Try....
<pre><code> const overlayEl = useRef&lt;HTMLDivElement&gt;(null);
</code></pre>
Alternatively some syntax sugar for if you don't care for when its undefined is to do something like this.
<pre><code>const overlayEl = useRef(document.createElement(&quot;div&quot;))
</code></pre>
using the above syntax all common DOM methods just return defaults such as &quot;0&quot; i.e overlayEl.offsetWidth, getBoundingClientRect etc.
Usage:
<pre><code>if(overlayEl.current) {
 // will be type HTMLDivElement NOT HTMLDivElement | null
 const whattype = overlayEl.current; 
}
</code></pre>
The way this works is typescripts static analysis is smart enough to figure out that <code>if</code> check &quot;guards&quot; against null, and therefore it will remove that as a possible type from the union of <code>null | HTMLDivElement</code> within those brackets.

entityMap|blocks|key|1cvqt|text|如果你想“通过/跳过”，这就可以了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

If you want to "pass/skip" then this will do it <code>const overlayEl: any = useRef(null);</code>

entityMap|blocks|key|5hsl4|text|const+overlayEl+=+useRef()+as+MutableRefObject;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2nnrj|它将铸造|unstyled|dmekn|的返回值设置为初始化的MutableRefObject。|4pa1n|function+useRef():+MutableRefObject;|12njo|然而，在这种情况下，编译器总是认为|8f54c|是有价值的。^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|Q|9|@]|A|@]|B|$]]|$2|H|4|I|6|G|8|R|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|S|9|@]|A|@]|B|$C|D]]|$2|L|4|M|6|G|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|G|8|U|9|@]|A|@]|B|$]]]]

<pre><code>const overlayEl = useRef() as MutableRefObject&lt;HTMLDivElement&gt;;
</code></pre>

It will cast <code>overlayEl</code> to an initiated MutableRefObject that is the returning value of <code>useRef</code>:

<pre><code>function useRef&lt;T = undefined&gt;(): MutableRefObject&lt;T | undefined&gt;;
</code></pre>

Yet in this case, the compiler will always think that <code>overlayEl</code> has a value.

entityMap|blocks|key|b3dao|text|向ref添加一个类型，如@Shanon+Jackson所述：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8afcm|const+linkRef+=+useRef(null);|code-block|syntax|javascript|6948i|然后|d3cns|，请确保检查|f0eo4|值，然后使用|ff8lh|if+(linkRef.current+!==+null)+{
++linkRef.current.focus();
}|f1smh|这将满足Typescript。而任何一个本身都不会。|96vg3|使用|fun1j|或者为了“欺骗”编译器而进行强制转换，这违背了使用Typescript的目的，请不要这样做。^0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|V|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|W|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|X|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Y|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|Z|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|10|9|@]|A|@]|B|$F|G]]|$2|P|4|Q|6|7|8|11|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|12|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|13|9|@]|A|@]|B|$]]]]

Add a type to the ref as mentioned by @Shanon Jackson:
<pre><code>const linkRef = useRef&lt;HTMLLinkElement&gt;(null);
</code></pre>
And then, make sure you check for <code>null</code> value before using <code>current</code>:
<pre><code>if (linkRef.current !== null) {
 linkRef.current.focus();
}
</code></pre>
This will satisfy Typescript. Whereas either by itself wouldn't.
Using <code>any</code> or casting in order to &quot;trick&quot; the compiler defeats the purpose of using Typescript, don't do that.

entityMap|blocks|key|88qam|text|您还可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|b9r3l|可选链接|1jkuv|这是在ES2020中引入的，而不是"if“语句，以使代码更简洁|ffksk|您可以在以下位置查看其浏览器支持|bge16|犬|ftea4|..。^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|P|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

You can also use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining" rel="nofollow noreferrer">optional chaining</a> which is introduced in ES2020 instead of &quot;if&quot; statement for cleaner code
<code>const myRef = useRef&lt;HTMLLinkElement&gt;(null);</code>
<code>myRef.current?.focus();</code>
You can check its browser support at <a href="https://caniuse.com/mdn-javascript_operators_optional_chaining" rel="nofollow noreferrer">caniuse</a>.

entityMap|blocks|key|7sie6|text|如果您不想有机会输入脚本，请使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5v8vr|const+iframe+=+useRef(null);

+++++if+(
+++typeof+iframe+!==+"undefined"+&&
+++typeof+iframe.current+!==+"undefined"+&&
+++iframe.current+!==+null
+)+{
+++iframe?.current?.contentWindow='';
+++);
+}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

if you want to give no chance to typescript use this :
<pre><code>const iframe = useRef&lt;HTMLIFrameElement | null&gt;(null);

 if (
 typeof iframe !== &quot;undefined&quot; &amp;&amp;
 typeof iframe.current !== &quot;undefined&quot; &amp;&amp;
 iframe.current !== null
 ) {
 iframe?.current?.contentWindow='';
 );
 }
</code></pre>

I've got the "Object is possibly null" error many times and usually I use a safety "if statement" in case it returns null.

I've got the following function: 

<pre class="lang-js prettyprint-override"><code>const ModalOverlay = (props: any[]) =&gt; {
 const overlayEl = useRef(null);
 useEffect(() =&gt; {
 overlayEl.current.focus();
 });
 return &lt;div {...props} ref={overlayEl} /&gt;;
 }
</code></pre>

But <code>overlayEl.current</code> gets the error "Object is not defined". So I've tried:

<pre class="lang-js prettyprint-override"><code>if (!overlayEl) {
 return null
 } else {
 useEffect(() =&gt; {
 overlayEl.current.focus();
 });
 return &lt;div {...props} ref={overlayEl} /&gt;;
 }
</code></pre>

Which didn't work. I've tried also: 

<pre class="lang-js prettyprint-override"><code>overlay &amp;&amp; overlayEl.current.focus();
</code></pre>

Any hints would be highly appreciated! Thanks

Typescript, how to pass "Object is possibly null" error?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我已经多次收到"Object is possibly“错误，通常我会使用安全的"if语句”，以防它返回null。 我有以下函数： const ModalOverlay = (props: any[]) => {  const overlayEl = useRef(null);    useEffect(() => {...

问Typescript，如何传递“对象可能为空”错误？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Typescript，如何传递“对象可能为空”错误？EN