类型“字符串或未定义”不可分配给类型字符串

作者

目录

Argument of type ‘string or undefined’ is not assignable to parameter of type string

  1. 类型“字符串或未定义”不可分配给类型字符串
  2. “字符串或未定义”类型的参数不可分配给字符串类型的参数

如果出现错误“字符串类型的参数 | 未定义的参数不能分配给字符串类型的参数”，请单击第二个小标题。

类型“string or undefined”不可分配给类型 string

当将可能的undefined值分配给需要
string.

string要解决该错误，请在赋值之前使用非空断言运算符或类型保护来验证该值是否为 a 。

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

索引.ts
interface Employee {
  id: number;
  name?: string; // 👈️ optional (might be undefined)
  salary: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// ⛔️ Error: Type 'string | undefined' is not assignable to type 'string'.
// Type 'undefined' is not assignable to type 'string'.ts(2322)
const name: string = emp.name;

该属性
在界面name中被标记为
可选。Employee

因此该属性可以存储一个string或一个值。 undefined

该name变量的类型为 a string，因此它只期望分配一个 a 值string。

TypeScript 告诉我们该emp.name属性的值可能undefined与只需要. namestring

使用非空断言运算符解决错误

解决该错误的一种方法是使用非空断言运算符。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const name: string = emp.name!; // 👈️ non-null assertion

感叹号是
TypeScript 中的非空断言运算符。

它从类型中删除nulland而不进行任何显式类型检查。undefined

当你使用这种方法时，你基本上告诉 TypeScript 这个值永远不会是nullor undefined。

使用类型保护来解决错误

另一种更好的方法是使用
类型保护。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const name: string = emp.name !== undefined ? emp.name : '';

console.log(name); // 👉️ "Bobby Hadz"

我们使用
三元运算符来检查name属性是否不等于undefined。

如果属性不等于undefined，它将被分配给name
变量，否则，我们使用空字符串作为后备。

这样我们就可以确保name变量总是会被分配一个字符串，即使emp.name是undefined。

使用空合并运算符 (??) 解决错误

您还可以使用
空合并运算符 (??)
来解决该错误。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const name: string = emp.name ?? '';

console.log(name); // 👉️ "Bobby Hadz"
空合并运算符 (??) 使我们能够指定值为null或时的回退undefined。

因此，如果emp.nameisnull或undefined，我们将name变量设置为空字符串。

使用逻辑或（||）运算符来解决错误

您还可以

以类似的方式使用逻辑 OR (||)运算符。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const name: string = emp.name || '';

console.log(name); // 👉️ "Bobby Hadz"

如果左侧的值为假，则逻辑 OR (||) 运算符返回右侧的值。

这与空值合并运算符 (??) 不同，因为空值合并仅检查null和undefined。

如果左侧的值是以下任一值，则逻辑 OR (||) 运算符将返回右侧的值：null、undefined、false、0、""（空字符串）、NaN（非数字）。

使用if语句解决错误

即使是充当类型保护的简单if语句也可以用来解决该错误。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

let name = '';

// 👇️ emp.name is a string or undefined here

if (emp.name !== undefined) {
  // 👇️ emp.name is string here
  name = emp.name;
}

console.log(name); // 👉️ "Bobby Hadz"

我们使用let关键字将name变量初始化为空字符串。

在if语句中，我们检查emp.name属性是否不等于
undefined并将name变量分配给相应的值。

使用类型断言来解决错误

如果以上方法都不起作用，您可以使用
类型断言。

索引.ts
interface Employee {
  id: number;
  name?: string;
  salary?: number;
}

const emp: Employee = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const name: string = emp.name as string; // 👈️ type assertion

console.log(name); // 👉️ "Bobby Hadz"
当我们拥有 TypeScript 无法知道的值的类型信息时，就会使用类型断言。

我们有效地告诉 TypeScript 这emp.name将是一个string并且不用担心。

使用所需的实用程序类型来解决错误

您还可以通过使用Required实用程序类型根据需要标记对象的所有属性来解决该错误。

索引.ts
interface Employee {
  id: number;
  name?: string; // 👈️ optional (might be undefined)
  salary: number;
}

const emp: Required<Employee> = {
  id: 1,
  name: 'Bobby Hadz',
  salary: 100,
};

const name: string = emp.name;

console.log(name);

我们使用“Required”实用程序类型来构造一个新类型，并将所提供类型的所有属性设置为“required”。

该name属性在新类型中不再是可选的，因此它永远不能存储值undefined。

“字符串或未定义”类型的参数不可分配给字符串类型的参数

当将可能的undefined值传递给需要string.

string要解决该错误，请在将值传递给函数之前使用类型保护来验证该值是否为 a 。

未定义类型的参数不可分配给字符串类型的参数

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

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const message = Math.random() > 0.5 ? 'Greetings' : undefined;

// ⛔️ Error: Argument of type 'string | undefined' is not
// assignable to parameter of type 'string'.
// Type 'undefined' is not assignable to type 'string'. ts(2345)
getMessage(message);

该函数期望使用类型参数来调用，string但传入的参数可能是undefined。

TypeScript 告诉我们，我们传递给函数的值可能undefined与函数参数的类型不兼容，该参数必须是string.

在函数调用中使用非空断言

解决这个问题的一种方法是使用非空断言。

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const message = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(message!); // 👈️ non-null assertion

感叹号是
TypeScript 中的非空断言运算符。

它从类型中删除undefinedand而不进行任何显式类型检查。null

当你使用这种方法时，你基本上告诉 TypeScript 这个值永远不会是undefinedor null。

在函数调用中使用类型断言

这与
类型断言非常相似
，仅当您完全确定该值属于预期类型时才应使用。

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const message = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(message as string); // 👈️ type assertion
当我们拥有 TypeScript 无法知道的值的类型信息时，就会使用类型断言。

我们有效地告诉 TypeScript 该message变量存储一个字符串，而不必担心它。

使用三元运算符解决错误

另一种更好的方法是使用
类型保护。

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const maybeMessage = Math.random() > 0.5 ? 'Greetings' : undefined;

const message: string = maybeMessage !== undefined ? maybeMessage : '';

getMessage(message);

我们使用
三元运算符来检查maybeMessage变量是否不等于undefined。

如果它不等于undefined，它将被分配给message变量，否则，我们使用空字符串作为后备。

这样我们就可以确保message变量总是会被分配一个字符串，即使maybeMessage变量是. undefined

在函数调用中使用空合并运算符 (??)

您还可以使用
空合并运算符 (??)
来解决该错误。

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const maybeMessage = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(maybeMessage ?? ''); // 👈️ nullish coalescing
空合并运算符 (??) 使我们能够指定值为undefined或时的回退null。

如果maybeMessage变量是undefinedor null，我们将空字符串参数传递给函数。

在函数调用中使用逻辑或（||）运算符

您还可以

以类似的方式使用逻辑 OR (||)运算符。

索引.ts
function getMessage(message: string) {
  return message;
}

// 👇️ const message: "Greetings" | undefined
const maybeMessage = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(maybeMessage || '');

如果左侧的值为假，则逻辑 OR (||) 运算符返回右侧的值。

这与空值合并运算符 (??) 不同，因为空值合并仅检查undefined和null。

如果左侧的值是以下任一值，则逻辑 OR (||) 运算符将返回右侧的值：null、undefined、false、0、""（空字符串）、NaN（非数字）。

更新函数参数的类型

错误原因是函数参数的类型和传入参数的类型不兼容。

根据您的用例，您还可以通过更新函数参数的类型
并使参数和传入的参数类型兼容来解决错误
。

索引.ts
// 👇️ parameter is type string or undefined
function getMessage(message: string | undefined) {
  return message;
}

// 👇️ argument is also type string or undefined
const maybeMessage = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(maybeMessage);

该函数的参数现在的类型为stringor undefined，因此我们可以向其传递stringor类型的参数undefined，因为这两种类型是兼容的。

我们在示例中使用了联合类型，但我们也可以将参数标记为可选。

索引.ts
function getMessage(message?: string) { // 👈️ optional
  return message;
}

// 👇️ argument is also type string or undefined
const maybeMessage = Math.random() > 0.5 ? 'Greetings' : undefined;

getMessage(maybeMessage);

代码示例实现了相同的结果。当参数被标记为可选时，它可以是指定的类型或具有值undefined。

额外资源

您可以通过查看以下教程了解有关相关主题的更多信息：