TypeScript：解构赋值设置响应时出现类型错误

先看你的代码场景：

定义自定义类型和异步函数：

interface CustomNameInfo {
  name: string;
  access: string;
}

async getNameInfo(): Promise<CustomNameInfo> {
  // 业务逻辑
  return {
    name: "FOO",
    access: "none"
  };
}

常规赋值方式无类型错误：

let name, access, resp;         

if (!hasName) {
  resp = await this.getNameInfo();
  access = resp.access;
  name = resp.name;
}

但使用解构赋值时出现TS错误：Property 'access' and 'name' does not exist on type 'CustomNameInfo'：

let name, access;         

if (!hasName) {
  ({ name, access } = await this.getNameInfo()); 
}

问题原因 #

提前声明let name, access时，TypeScript会默认推断这两个变量为any类型，解构赋值的语法导致TS无法正确将CustomNameInfo的属性类型关联到已声明的变量上，进而触发错误。

解决方法 #

方法1：给提前声明的变量指定明确类型

let name: string, access: string;

if (!hasName) {
  ({ name, access } = await this.getNameInfo());
}

方法2：在解构时直接声明变量（推荐）

如果不需要在if外部使用这两个变量，直接在解构时用const或let声明，TypeScript会自动推断正确类型：

if (!hasName) {
  const { name, access } = await this.getNameInfo();
  // 后续直接使用name和access即可
}

方法3：对解构结果进行类型断言（备选方案）

如果必须提前声明变量，也可以通过类型断言明确返回值类型：

let name, access;

if (!hasName) {
  ({ name, access } = await this.getNameInfo() as CustomNameInfo);
}

内容的提问来源于stack exchange，提问作者sal3jfc