TypeScript用变量构建接口对象报错‘void不能赋值给string’求解

问题原因 #

在浏览器的全局作用域中，name是内置的全局变量（对应window.name），TypeScript的DOM类型定义将其标记为string类型。如果你的代码没有以模块形式运行（即文件中无export语句），顶层声明的let name会和内置的window.name产生命名冲突，导致TypeScript的类型推断异常，最终抛出Type 'void' is not assignable to type 'string'的错误。

解决办法 #

• 换用非冲突变量名
  避免使用name这类和全局内置变量重名的标识符，换成比如username：

  interface Person {
    name: string;
    age: number;
  }
  
  let username: string = "albert";
  let age: number = 28;
  
  const me: Person = {
    name: username,
    age: age,
  };
  

• 将代码转为模块形式
  在文件末尾添加任意export语句（哪怕是空导出），让TypeScript将文件视为模块，顶层变量会变成模块内的局部变量，不再和全局内置变量冲突：

  interface Person {
    name: string;
    age: number;
  }
  
  let name: string = "albert";
  let age: number = 28;
  
  const me: Person = {
    name: name,
    age: age,
  };
  
  export {}; // 标记为模块
  

• 结合简写语法优化代码
  若要保留变量名name，在模块形式下可以使用对象字面量的简写语法简化代码：

  interface Person {
    name: string;
    age: number;
  }
  
  let name: string = "albert";
  let age: number = 28;
  
  const me: Person = { name, age }; // 属性名与变量名一致时可简写
  export {};
  

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