web-dev-qa-db-fra.com

ne peut pas redéclarer une variable étendue de bloc (TypeScript)

Je construis une application de noeud, et à l'intérieur de chaque fichier .js, il était habitué de faire cela dans différents packages.

let co = require("co");

Mais obtenir 

 enter image description here

etc. Ainsi, en utilisant TypeScript, il semble qu'il ne puisse y avoir qu'une seule déclaration/exigence de ce type dans tout le projet? Je suis confus à ce sujet car je pensais que let était lié au fichier en cours.

Je viens d'avoir un projet qui fonctionnait mais après un refactor, je reçois maintenant ces erreurs partout.

Quelqu'un peut-il expliquer?

typescriptrequire
47
dcsan

let est utilisé pour déclarer les variables local qui existent dans portées de blocs au lieu des portées de fonctions.

Le dernier moyen préféré d’importer un module externe est la syntaxe ES6 anyways, qui ne contient aucune affectation explicite:

import * as co from "./co"
37
John Weisz

La meilleure explication que je puisse obtenir est celle de le message de Tamas Piro .

TLDR; TypeScript utilise les typages DOM pour l'environnement d'exécution global. Dans votre cas, il existe une propriété 'co' sur l'objet window global. 

Pour résoudre ceci:

  1. Renommez la variable ou
  2. Utilisez les modules TypeScript et ajoutez une exportation vide {}:
export{};

ou

  1. Configurez les options de votre compilateur en n’ajoutant pas de typages DOM:

Modifiez tsconfig.json dans le répertoire de projet TypeScript.

{
    "compilerOptions": {
        "lib": ["es6"]
      }
}
4
Neville Omangi

Utilisez IIFE(Immediately Invoked Function Expression), IIFE

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

 })();
4
Belter

Je recevais cette erreur similaire lors de la compilation de mon application Node.JS TypeScript:

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

Le correctif était de supprimer ceci:

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

et pour le remplacer par ceci:

"compilerOptions": {
  "types": ["node"]
}
2
Tom Mettam

J'ai le même problème, et ma solution ressemble à ceci:

// *./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();
        }
    }
}

Maintenant nous pouvons l’utiliser côté serveur:

// *./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());

Et du côté client aussi:

// *./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

Et bien sûr, un fichier d'abeilles pour tout cela:

// *./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);
})

Mis à jour. Bien sûr, il n'est pas nécessaire de compiler des fichiers TypeScript séparément .runSequence(['ts1', 'ts2', 'ts3'], 'browserify', callback) fonctionne parfaitement.

1
django dev

J'ai eu cette erreur lors de la mise à niveau 

gulp-TypeScript 3.0.2 → 3.1.0

Le remettre à 3.0.2 corrigé

0
danday74