迹忆客 专注技术分享

使用联合类型来解决 TypeScript 中的“Type 'null' is not assignable to type”错误，例如 name: string | null。 特定值的类型必须接受 null，因为如果不接受并且您在 tsconfig.json 中启用了 strictNullChecks，则类型检查器会抛出错误。

以下是错误发生方式的 2 个示例。

// 函数返回值设置为对象
function getObj(): Record<string, string> {
  if (Math.random() > 0.5) {
    //  错误 Type 'null' is not assignable to type
    // 'Record<string, string>'.ts(2322)
    return null;
  }
  return { name: 'Tom' };
}

interface Person {
  name: string; // 名称属性设置为字符串
}

const obj: Person = { name: 'Tom' };

// Type 'null' is not assignable to type 'string'.ts(2322)
obj.name = null;

第一个示例中的函数返回 null 值或对象，但我们没有指定该函数可能返回 null。

第二个示例中的对象具有 name 属性的字符串类型，但我们试图将属性设置为 null 并得到错误。

可以使用联合类型来解决错误。

function getObj(): Record<string, string> | null {
  if (Math.random() > 0.5) {
    return null;
  }
  return { name: 'Tom' };
}

interface Person {
  // 👇  使用 union
  name: string | null;
}

const obj: Person = { name: 'Tom' };

obj.name = null;

我们使用联合类型将函数的返回值设置为具有字符串键和值的对象或 null。

这种方法允许我们从函数返回一个对象或空值。

在第二个示例中，我们将对象中的 name 属性设置为字符串类型或 null

现在我们可以将属性设置为 null 而不会出现错误。

如果必须访问 name 属性，例如 要对其调用 toLowerCase() 方法，必须使用类型保护，因为该属性可能为 null。

interface Person {
  // 使用 union
  name: string | null;
}

const obj: Person = { name: 'Tom' };

// Error: Object is possibly 'null'.ts(2531)
obj.name.toLowerCase();

可以用一个简单的类型保护来解决这个问题。

interface Person {
  // 使用 union
  name: string | null;
}

const obj: Person = { name: 'Tom' };

if (obj.name !== null) {
  // 现在 obj.name 是字符串
  console.log(obj.name.toLowerCase());
}

可以通过在 tsconfig.json 文件中将 strictNullChecks 设置为 false 来屏蔽“Type 'null' is not assignable to type”错误。

{
  "compilerOptions": {
    "strictNullChecks": false,
    // ...  重置
  }
}

当 strictNullChecks 设置为 false 时，语言会忽略 null 和 undefined。

这是不可取的，因为它可能会导致运行时出现意外错误。

当我们将 strictNullChecks 设置为 true 时，null 和 undefined 有它们自己的类型，并且在需要不同类型的值时使用它们会出现错误。