tdkihrr

一、问题

使用TypeScript时,有时会遇到编译器报错“Cannot redeclare block-scoped variable XXX”。

新建一个空的npm工程,添加TypeScript依赖,创建一个index.ts,里面只写上这一行:

const name = "Tom";

编译器的报错为Cannot redeclare block-scoped variable 'name'. [2451]

二、原因

之所以出现这样的原因有两个。

一是,如果一个.ts文件没有包含importexport,那么它会被视为脚本,该文件中所有的内容都会被视为全局的,其它文件可以直接使用[1]。反之如果使用了importexport,那该文件就会被视为一个module,里面的内容只有被别的文件import了才能使用。在上面这个文件中,index.ts没有使用importexport,所以这个变量name是全局的。

二是,TypeScript 会添加一些 lib 作为全局运行的环境,这些环境的值是全局的[2][3]。TypeScript (当前版本为3.2)默认支持的是ES5环境,这个环境包含了DOMES5ScriptHost这三个library。其中DOM会声明name这个变量(在lib.dom.d.ts中),也就是浏览器中的window.nameindex.ts中的name也是全局的,所以产生了冲突。

三、解决方案

解决方案有两个。

一是,添加importexport,将index.ts变为一个模块。

二是,更改编译器的编译选项,去掉DOM这个library[3]。tsconfig.json中的选项lib就是用于控制添加哪些library的[4]。在选项里将DOM去掉可。有时这个选项并没有显式设置,需要手动创建这个字段。

四、参考资料

  1. https://www.typescriptlang.org/docs/handbook/modules.html
  2. https://stackoverflow.com/a/46233014
  3. https://github.com/Microsoft/vscode/issues/22436#issuecomment-286187943
  4. https://www.typescriptlang.org/docs/handbook/compiler-options.html

分类:

技术点:

相关文章: