无法重新声明块作用域变量(打字稿)

时间:2016-03-02 21:36:34

标签: typescript require

我正在构建一个节点应用程序,并且.js中的每个文件内部用于执行此操作以在各种包中要求。

let co = require("co");

但是

enter image description here

等。所以使用打字稿似乎在整个项目中只能有一个这样的声明/要求? 我对此感到困惑,因为我认为let的范围限定为当前文件。

我刚刚有一个正在运行的项目但是在重构之后我现在正在整个地方发现这些错误。

有人可以解释一下吗?

13 个答案:

答案 0 :(得分:39)

关于错误本身,let用于声明block scopes中存在的本地变量而不是函数作用域。它也比var更严格,所以你不能做这样的事情:

if (condition) {
    let a = 1;
    ...
    let a = 2;
}

另请注意,case块中的switch子句不会创建自己的块作用域,因此您无法在不使用{{case的情况下重新声明相同的局部变量。 1}}每个都创建一个块。

对于导入,您可能会收到此错误,因为TypeScript无法将您的文件识别为实际模块,而且看似模型级别的定义最终成为它的全局定义。

尝试使用标准ES6方式导入外部模块,该方式不包含显式赋值,并且应使TypeScript将文件正确识别为模块:

{}

如果您已按预期添加了名为import * as co from "./co" 的内容,则仍会导致编译错误。例如,这将是一个错误:

co

如果您收到错误“找不到模块co” ...

TypeScript正在对模块运行完全类型检查,因此如果您没有为要导入的模块设置TS定义(例如,因为它是没有定义文件的JS模块),您可以声明您的模块位于import * as co from "./co"; // Error: import definition conflicts with local definition let co = 1; 定义文件中,不包含模块级导出:

.d.ts

答案 1 :(得分:7)

对于这个时代来这里的人来说,这里是解决此问题的简单方法。至少在后端对我有用。我没有检查前端代码。

只需添加:

export {};

位于代码的顶部。

贷记EUGENE MURAVITSKY

答案 2 :(得分:6)

我能得到的最佳解释来自Tamas Piro's post

TLDR; TypeScript使用DOM类型表示全局执行环境。在你的情况下,有一个' co'全局窗口对象上的属性。

解决这个问题:

  
      
  1. 重命名变量,或
  2.   
  3. 使用TypeScript模块,并添加空导出{}:
  4.   
export{};
  

     
      
  1. 通过不添加DOM类型来配置编译器选项:
  2.   

在TypeScript项目目录中编辑tsconfig.json。

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

答案 3 :(得分:4)

使用IIFE(Immediately Invoked Function Expression)IIFE

(function () {
    all your code is here...

 })();

答案 4 :(得分:3)

编译Node.JS Typescript应用程序时收到类似的错误消息:

node_modules/@types/node/index.d.ts:83:15 - error TS2451: Cannot redeclare block-scoped variable 'custom'.

解决方法是删除此问题:

"files": [
  "./node_modules/@types/node/index.d.ts"
]

并替换为:

"compilerOptions": {
  "types": ["node"]
}

答案 5 :(得分:2)

这是我针对我的情况的解决方法。简单快速!!!

enter image description here

当块范围变量在源代码中的某处声明时会发生这种情况。

要解决此问题,请删除 module.exports = 并替换为 export default

答案 6 :(得分:1)

我遇到了同样的问题,我的解决方案看起来像这样:

// *./module1/module1.ts*
export module Module1 {
    export class Module1{
        greating(){ return 'hey from Module1'}
    }
}


// *./module2/module2.ts*
import {Module1} from './../module1/module1';

export module Module2{
    export class Module2{
        greating(){
            let m1 = new Module1.Module1()
            return 'hey from Module2 + and from loaded Model1: '+ m1.greating();
        }
    }
}

现在我们可以在服务器端使用它了:

// *./server.ts*
/// <reference path="./typings/node/node.d.ts"/>
import {Module2} from './module2/module2';

export module Server {
    export class Server{
        greating(){
            let m2 = new Module2.Module2();
            return "hello from server & loaded modules: " + m2.greating();
        }
    }
}

exports.Server = Server;

// ./app.js
var Server = require('./server').Server.Server;
var server = new Server();
console.log(server.greating());

在客户端也是如此:

// *./public/javscripts/index/index.ts*

import {Module2} from './../../../module2/module2';

document.body.onload = function(){
    let m2 = new Module2.Module2();
    alert(m2.greating());
}

// ./views/index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}
  script(src='main.js')
  //
    the main.js-file created by gulp-task 'browserify' below in the gulpfile.js

当然,还有一个gulp-file用于所有这些:

// *./gulpfile.js*
var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    runSequence = require('run-sequence'),
    browserify = require('gulp-browserify'),
    rename = require('gulp-rename');

gulp.task('default', function(callback) {

    gulp.task('ts1', function() {
        return gulp.src(['./module1/module1.ts'])
            .pipe(ts())
            .pipe(gulp.dest('./module1'))
    });

    gulp.task('ts2', function() {
        return gulp.src(['./module2/module2.ts'])
            .pipe(ts())
            .pipe(gulp.dest('./module2'))
    });

    gulp.task('ts3', function() {
        return gulp.src(['./public/javascripts/index/index.ts'])
            .pipe(ts())
            .pipe(gulp.dest('./public/javascripts/index'))
    });

    gulp.task('browserify', function() {
        return gulp.src('./public/javascripts/index/index.js', { read: false })
            .pipe(browserify({
                insertGlobals: true
            }))
            .pipe(rename('main.js'))
            .pipe(gulp.dest('./public/javascripts/'))
    });

    runSequence('ts1', 'ts2', 'ts3', 'browserify', callback);
})

<强>更新 当然,分开编译typescript文件并不是必需的。 runSequence(['ts1', 'ts2', 'ts3'], 'browserify', callback)效果很好。

答案 7 :(得分:0)

升级时出现此错误

gulp-typescript 3.0.2→3.1.0

将它恢复到3.0.2修复它

答案 8 :(得分:0)

对于我来说,以下tsconfig.json解决了问题:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node"
  }
}

type中不应有modulepackage.json

答案 9 :(得分:0)

就我而言(使用 IntelliJ)File - Invalidate Caches / Restart... 成功了。

答案 10 :(得分:0)

我在 vscode 上使用 ts 时也处理过这个问题。我解决这个问题的方法很简单,但它可能与您的问题不同。

当我在最近的选项卡中同时打开打字稿文件和 javascript 文件时,我的编辑器显示此错误。我只需关闭它,错误就会消失。

希望这能帮助那些可能也从这个简单的错误中摸不着头脑的人。

答案 11 :(得分:-1)

只需在 TSconfig 文件中添加以下行

“编译器选项”:{ "skipLibCheck": 真 }

答案 12 :(得分:-1)

最简单的解决方案是更改:

"target": "es5""target": "es6"tsconfig.json 文件中。

如果您无法访问此文件,请运行:

tsc --init 在主目录中。

因为最初打字稿将被置于 JavaScript es5 并且无法理解最新的 JavaScript 语法。