一、问题
使用TypeScript时,有时会遇到编译器报错“Cannot redeclare block-scoped variable XXX”。
新建一个空的npm工程,添加TypeScript依赖,创建一个index.ts,里面只写上这一行:
const name = "Tom";
编译器的报错为Cannot redeclare block-scoped variable 'name'. [2451]。
二、原因
之所以出现这样的原因有两个。
一是,如果一个.ts文件没有包含import或export,那么它会被视为脚本,该文件中所有的内容都会被视为全局的,其它文件可以直接使用[1]。反之如果使用了import或export,那该文件就会被视为一个module,里面的内容只有被别的文件import了才能使用。在上面这个文件中,index.ts没有使用import或export,所以这个变量name是全局的。
二是,TypeScript 会添加一些 lib 作为全局运行的环境,这些环境的值是全局的[2][3]。TypeScript (当前版本为3.2)默认支持的是ES5环境,这个环境包含了DOM、ES5和ScriptHost这三个library。其中DOM会声明name这个变量(在lib.dom.d.ts中),也就是浏览器中的window.name。index.ts中的name也是全局的,所以产生了冲突。
三、解决方案
解决方案有两个。
一是,添加import或export,将index.ts变为一个模块。
二是,更改编译器的编译选项,去掉DOM这个library[3]。tsconfig.json中的选项lib就是用于控制添加哪些library的[4]。在选项里将DOM去掉可。有时这个选项并没有显式设置,需要手动创建这个字段。
四、参考资料
- https://www.typescriptlang.org/docs/handbook/modules.html
- https://stackoverflow.com/a/46233014
- https://github.com/Microsoft/vscode/issues/22436#issuecomment-286187943
- https://www.typescriptlang.org/docs/handbook/compiler-options.html