TypeScript 中类型 void 上不存在属性

TypeScript 中的 void 类型不存在属性

Property does not exist on type void in TypeScript

当我们尝试访问不返回任何内容的函数的返回值上的属性时，会发生“类型 void 上不存在属性”错误。要解决该错误，请确保从函数的所有代码路径返回正确的值。

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

索引.ts


const getPromise = () => {
  Promise.resolve(42);
};

// ⛔️ Error: Property 'then' does not
// exist on type 'void'.ts(2339)
getPromise().then((value) => {
  console.log(value);
});

该getPromise函数不返回值，因此 TypeScript 将其返回类型设置为
void。

索引.ts


// 👇️ const getPromise: () => void
const getPromise = () => {
  Promise.resolve(42);
};

该函数隐式返回undefined，因此我们无法访问
undefined值的属性。

要解决该错误，请确保在访问特定属性之前更正函数的返回值。

索引.ts


// 👇️ const getPromise: () => Promise<number>
const getPromise = () => {
  return Promise.resolve(42);
};

// ✅ Works
getPromise().then((value) => {
  console.log(value); // 👉️ 42
});

我们使用return关键字显式地从函数返回一个值。请注意，TypeScript 将函数的返回类型键入为Promise<number>和 not void。

现在我们可以访问then()函数上的方法，因为它返回一个有效的承诺。

如果您忘记从函数返回对象，您也可能会遇到此错误。

索引.ts


const getObj = () => {
  const obj = { name: 'Tom' };
};

// ⛔️ Error: Property 'name' does
// not exist on type 'void'.ts(2339)
getObj().name

解决方案是相同的 – 您必须从函数返回特定值。

索引.ts


const getObj = () => {
  const obj = { name: 'Tom' };

  return obj;
};

console.log(getObj().name); // 👉️ "Tom"

有时很难看出缺少的 return 语句到底在哪里。在某些情况下，您有许多代码路径（嵌套条件等），但错误意味着您的函数返回undefined，因此您知道要查找的内容。

调试时一个好的解决方案是显式键入函数的返回类型。

索引.ts


// ⛔️ Error: A function whose declared type
// is neither 'void' nor 'any' must return a value.ts(2355)
const getPromise = (): Promise<number> => {
   Promise.resolve(42);
};

我们明确地将函数的返回值键入为Promise<number>，因此 TypeScript 告诉我们我们没有从函数返回值。

这是发现您的应用程序中存在错误的简单方法。

函数的所有代码路径都应返回一个值。

索引.ts


// ⛔️ Function lacks ending return statement and
// return type does not include 'undefined'.ts(2366)
const getPromise = (): Promise<number> => {
  if (Math.random()) {
    return Promise.resolve(42);
  }

  Promise.resolve(33);
};

我们已将函数的返回类型明确指定为 be Promise<number>，但我们只在if语句中返回一个 promise 。

如果不满足条件，if块将不会运行，函数将隐式返回undefined。要解决这个问题，请确保从函数的所有代码路径中显式返回一个值。

索引.ts


const getPromise = (): Promise<number> => {
  if (Math.random()) {
    return Promise.resolve(42);
  }

  return Promise.resolve(33);
};

结论

–