美文网首页前端我爱编程
如何在typescript中解决 error TS2451: C

如何在typescript中解决 error TS2451: C

作者: youthcity | 来源:发表于2018-04-27 22:19 被阅读406次

问题

昨天用 Typescript 从零搭建一个 nodeJS项目时, 遇到一个声明常量 name 的报错。代码如下:

const name = 'youthcity';

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

console.log(greeter(name));

一个不到8行的代码,IDE却报了一个错误。明明与其他文件没有相互依赖,却会提示 [ts] 无法重新声明块范围变量“name”。。且该文件目录夹下,也没有其他文件。为什么会有这个报错呢?ㄟ( ▔, ▔ )ㄏ

image.png

原因

在默认状态下,typescriptDOM 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产生冲突。

总结

在公司做项目时,都是在现有的框架里堆逻辑和写业务。当自己从零搭建一个项目时,才发现最熟悉的 typescript,并不是很了解。习惯了当 CRUD BOY,都快丧失了对基础知识的理解。

相关资料

相关文章

网友评论

  • Sunshine_Hwj:就想知道CRUD BOY是啥意思:joy:
    Sunshine_Hwj:@youthcity 哈哈,受教了受教了,完美解决了问题,thank you~
    youthcity:@Sunshine_Hwj CRUD —— create、read、update、delete
    youthcity:@Sunshine_Hwj 增删查改男孩。。。只会写简单后端代码的搬运工。。
  • myjs:恍然大悟,治好了我多年的尴尬症
    youthcity:@KobeZhu 哈哈。

本文标题:如何在typescript中解决 error TS2451: C

本文链接:https://www.haomeiwen.com/subject/fnnilftx.html