如何在typescript中解決 error TS2451: Cannot redeclare block-scoped variable 'name'

問題

昨天用 Typescript 從零搭建一個 nodeJS項目時， 遇到一個聲明常量 name 的報錯。代碼如下：

 

const name = 'youthcity';

function greeter(name:string) {
  return `Hello ${name}`;
}

console.log(greeter(name));

 

console.log(greeter(name)); 

一個不到8行的代碼，IDE卻報了一個錯誤。明明與其他文件沒有相互依賴，卻會提示 [ts] 無法重新聲明塊范圍變量“name”。。且該文件目錄夾下，也沒有其他文件。為什么會有這個報錯呢？ㄟ( ▔, ▔ )ㄏ

 

 

 

原因

在默認狀態下，typescript 將 DOM typings 作為全局的運行環境，所以當我們聲明 name時， 與 DOM 中的全局 window 對象下的 name 屬性出現了重名。因此，報了 error TS2451: Cannot redeclare block-scoped variable 'name'. 錯誤。

解決方法

解決這個問題，思路有兩個：

方法一

將運行環境由 DOM typings 更改成其他運行環境。
我們可以在 tsconfig.json 中做一下聲明：

{
    "compilerOptions": {
        "lib": [
            "es2015"
        ]
    }
}

 

方法二

既然與全局的變量出現重名，那我們將腳本封裝到模塊（module）內。module 有自己的作用域，自然不會與全局作用域的變量產生沖突。

在 Typescript 中，只要文件存在 import 或 export 關鍵字，都被視為 module

const name = 'youthcity';

function greeter(name:string) {
  return `Hello ${name}`;
}


console.log(greeter(name));

export {};

 

我們在腳本的最后一行，添加了  export {};。將文件聲明為 module， 變量  name 被限制在了 module 的作用域下，因此不會與全局的name產生沖突。