Typescript react -Object 可能为零答案

【问题标题】：Typescript react -Object is possibly nilTypescript react -Object 可能为零
【发布时间】：2020-08-14 09:37:54
【问题描述】：

我是 react 新手，我被要求帮助一个 react typescript 网站。目前我的匹配 const 正在返回一个 Object 可能是“null”。我试过让我的匹配常量为空，但对于我的生活，我无法弄清楚如何解决这个问题而不是得到这个错误。任何帮助将不胜感激。

 case "text":
      return (
        <div>
          {" "}
          {note.text.map((content: string, idx: number) => {
            const result = [];
            const matches = content.match(
              /(.*?)(<a href=")?(https?|www)((".*?>.*?<\/a>)|[^\s>]?)*(.*?)/gi
            );

            if (!!matches) {
              matches.forEach((match) => {
                let link;
                if (/href="/i.test(match)) {
                  const url = match 
                    .match(/<a href="(.*?)(?=">)/i)[0]
                    .replace('<a href="', "");
                  const linkText = match
                    .match(/(?:<a href=".*?">)(.*)(?=<\/a>)/)[0]
                    .replace(/(?:<a href=".*?">)/i, "");
                  link = <a href={url}>{linkText}</a>;
                } else {
                  const url = match.match(/(https?|www)[^\s]*/gi).join("");
                  link = <a href={url}>{url}</a>;
                }

                const splitter = match.match(
                  /(<a href=")?(https?|www)[^\s]*(.*<\/a>)?/gi
                )[0];
                const paredPlainText = match.split(new RegExp(splitter));
                result.push(paredPlainText[0]);
                result.push(link);
                result.push(paredPlainText[1]);
              });
            } else {
              result.push(content);
            }

            return <p>{result}</p>;
          })}
        </div>
      );

【问题讨论】：

请添加您遇到的确切错误

标签： javascript reactjs typescript

【解决方案1】：

我不完全确定我理解你的问题，描述听起来有点混乱，但我相信你的意思是那一行：

if (!!matches) {

对吗？

这会将匹配调用的结果（可以是带有结果的数组或null）转换为布尔值。只需使用

if (matches) {

相反，它检查一个真实的表达式（null 代表一个虚假的结果）。

如果此答案不是您所追求的，请在您的问题中添加更多描述。

【讨论】：

我相信这两者是等价的，因为在 if 语句中评估 matches 会将值强制转换为布尔值，与 !!matches 相同
是的，从 JS 的角度来看，但不是从 TS 的角度来看。如果没有适当的 null 保护，TS 解析器/linter 可能不接受对潜在 null 值的访问。
if(matches) 用作空保护，请参阅：typescriptlang.org/play/#code/…

【解决方案2】：

感谢大家的回复！这是我在.match 之后使用非空断言运算符! 的答案，如下所示

case "text":
      return (
        <div>
          {" "}
          {note.text.map((content: string, idx: number) => {
            const result = [];
            const matches = content.match(
              /(.*?)(<a href=")?(https?|www)((".*?>.*?<\/a>)|[^\s>]?)*(.*?)/gi
            );

            if (!!matches) {
              matches.forEach((match) => {
                let link;
                if (/href="/i.test(match)) {
                  const url = match
                    .match(/<a href="(.*?)(?=">)/i)![0]
                    .replace('<a href="', "");
                  const linkText = match
                    .match(/(?:<a href=".*?">)(.*)(?=<\/a>)/)![0]
                    .replace(/(?:<a href=".*?">)/i, "");
                  link = <a href={url}>{linkText}</a>;
                } else {
                  const url = match.match(/(https?|www)[^\s]*/gi)!.join("");
                  link = <a href={url}>{url}</a>;
                }

                const splitter = match.match(
                  /(<a href=")?(https?|www)[^\s]*(.*<\/a>)?/gi
                )![0];
                const paredPlainText = match.split(new RegExp(splitter));
                result.push(paredPlainText[0]);
                result.push(link);
                result.push(paredPlainText[1]);

              });
            } else {
              result.push(content)
            }
            console.log(result);

            return <p>{result}</p>;
          })}
        </div>
      );

【讨论】：