cannotredeclarephp技巧_七爪源码TypeScript 中的无法从新声明块范围的变量缺点

您是否在 TypeScript 中碰着“无法重新声明块范围变量”缺点？ 涌现此缺点的缘故原由有两个：

我们将在本文中研究这些可能缘故原由的办理方案。

修复：利用与 TypeScript 全局类型冲突的变量名

如果您声明的变量的名称与 TypeScript 全局类型中声明的名称冲突，则会涌现“无法重新声明块范围变量”缺点。

index.ts

// ❌ Cannot re-declare block-scoped variable "name".const name = 'Coding Beauty';console.log(name);

要修复这种情形下的缺点，请将您的文件转换为 ES 模块，如下所示：

index.ts

// ✅ variable declared successfullyconst name = 'Coding Beauty';console.log(name); // Coding Beautyexport {};

export {} 语句表明该文件是一个 ES 模块。
在 TypeScript 中，任何包含顶级导入或导出的文件都被视为一个模块。

如果没有顶级导入或导出声明，文件将被视为脚本，其内容可在全局范围内（以及其他模块）利用。
这便是导致我们的名称变量和 TypeScript 全局类型中声明的名称变量之间名称冲突的缘故原由。

办理此问题的另一种方法是利用另一个名称来声明不与全局类型冲突的变量。

index.ts

// variable declared successfullyconst theName = 'Coding Beauty';console.log(theName); // Coding Beautyexport {};

修复：在同一块范围内重新声明变量

如果您考试测验利用以前在同一块范围中利用的名称声明变量，也会发生“无法重新声明块范围变量”缺点。

const language = 'JavaScript';// Cannot redeclare block-scoped variable 'language'.const language = 'PHP';

您可以通过为新变量利用不同的名称来轻松修复案例中的缺点。

const language = 'JavaScript';// variable declared successfullyconst language2 = 'PHP';

如果您打算为变量分配一个新值，精确的做法是利用 let 关键字声明该变量，并在不重新声明的情形下变动其值。

// declare with "let" keywordlet language = 'JavaScript';// reassign without redeclaringlanguage = 'PHP';console.log(language); // PHP

条记

与 const 或 let 不同，var 关键字不会抱怨重新声明的变量。

var language = 'JavaScript';// No error thrownvar language = 'PHP';

重新声明变量可能会导致代码中涌现棘手的缺点，这是避免利用 var 关键字的缘故原由之一。

您可以在嵌套块中声明具有相同名称的变量。
嵌套块中的变量与外部范围中声明的变量是分开的。

let color = 'red';if (true) { let color = 'yellow'; console.log(color); // yellow}console.log(color); // red

条记

如果您利用 var 关键字来实行此操作，它将覆盖外部范围内的变量值。

var color = 'red';if (true) { var color = 'yellow'; console.log(color); // yellow}console.log(color); // yellow

避免利用 var 的另一个缘故原由。

它不必是 if 块，我们可以在任何用花括号（{ 和 }）指定的嵌套块中实行此操作。

let color = 'red';{ let color = 'yellow'; console.log(color); // yellow}console.log(color); // red

修复：利用 IIFE

修复缺点的另一种方法是利用立即调用的函数表达式 (IIFE) 包装包含变量的代码。
IIFE 是在定义后立即运行的函数，它们可以帮助避免导致此缺点的名称冲突。

const fruit = 'Apple';(() => { const fruit = 'Banana'; // variable declared successfully console.log(fruit); // Banana})();console.log(fruit); // Apple

此修复还办理了我们之前看到的 TypeScript 全局类型冲突的问题。

index.ts

(() => { const name = 'Coding Beauty'; console.log(name); // Coding Beauty})();

关注七爪网，获取更多APP/小程序/网站源码资源！