typescript：修复对象可能是'空'或'未定义'的教程这篇文章解释了以下内容什么原因导致错误TS2533：对象

Fix for Object is possibly 'null' or 'undefined in typescript?

这篇文章解释了以下内容

什么原因导致错误TS2533：对象可能是'空'或'未定义'"？

这个错误是由于一个对象属性可能导致空或未定义。这是一个在设置了-strictNullChecks=true编译器配置标志后，对象可能为空的编译时错误。

例如，在下面的代码中，str被定义为字符串数组或未定义或空，str属性可能为空或未定义值。

let str: string[] | undefined|null

let len: number = str.length; // Object is possibly 'null' or 'undefined'.

上面的代码行（str.length），访问字符串对象的长度会导致这个错误对象在编译时可能是'null'或'undefined'，如果配置了linting，也是如此。

有多种解决方案可以避免这种情况。

这不是固定的，而是通过设置编译器标志来避免在编译时出现错误。

在typescript应用程序中，打开tsconfig.json，将strictNullChecks设置为false。

例如，Angular应用程序，在tsconfig.json中的angularCompilerOptions中添加此内容。

{
  "angularCompilerOptions": {
    "strictNullChecks": false,
  }
}

在react typescript应用程序中，打开tsconfig.json，将strictNullChecks改为false。compilerOptions

{
  "compilerOptions": {
          "strictNullChecks": true

  }
}

上面的代码同样适用于Vue Typescript react应用程序。

在这种情况下，你可以使用if条件表达式来避免检查空或未定义。

我们必须在if表达式中使用一个变量来处理空或未定义的检查。

这将检查存在的字符串对象或空值和未定义值。它只在字符串对象存在时调用length 方法。

let str: string[] | undefined|null

if(str){
let len number = str.length; // Object is possibly 'null' or 'undefined'.
}

Optional Chaining是在typecript 3.7版本中引入的，用于告诉编译器变量是可选的。可选链运算符是? ，并附加在变量(variable !)上，如下所示

let str: string[] | undefined|null
let lenb: number = str?.length;

非空断言运算符的符号是Exclaimatory symbol(!)，并附加到变量上，以避免空或未定义。

这告诉typescript编译器，变量不应该是null 或undefined

let str: string[] | undefined|null

let len: number =  str!.length  ;

nullish coalescing operator 符号是ES21中引入的

它在Typescript中发布，用于在左手操作数为空或未定义时返回右手操作数。

let str: string[] | undefined|null
function getLength(str: string[]|"") {
  return str.length;
}
let len: number = getLength(str ?? "")   ;

在typecript中，学习到的对象可能是空的或未定义的，解决办法是。