web-dev-qa-db-ja.com

ブロックスコープ変数を再宣言できません（TypeScript）

ノードアプリを作成しています。jsの各ファイル内で、これを実行してさまざまなパッケージで必要になりました。

let co = require("co");

しかし、取得

enter image description here

など。だから、TypeScriptを使用すると、プロジェクト全体でそのような宣言/要件が1つしか存在できないように見えますか？ letが現在のファイルにスコープされていると思ったので、これについて混乱しています。

私はちょうど働いていたプロジェクトを持っていましたが、リファクタリング後にこれらのエラーが至る所で発生しています。

誰か説明できますか？

typescriptrequire
61
dcsan

エラー自体に関しては、letを使用して、関数スコープではなく ブロックスコープ に存在するlocal変数を宣言します。 。 varよりも厳密なので、次のようなことはできません。

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

また、caseブロック内のswitch句は独自のブロックスコープを作成しないため、{}を使用せずに複数のcasesで同じローカル変数を再宣言することはできません。それぞれブロックを作成します。

インポートに関しては、TypeScriptがファイルを実際のモジュールとして認識せず、モデルレベルの定義がグローバルな定義になってしまうため、おそらくこのエラーが発生しています。

外部モジュールを標準の ES6 方法でインポートしてみてください。明示的な割り当ては含まれておらず、TypeScriptにファイルをモジュールとして正しく認識させる必要があります。

import * as co from "./co"

既にcoという名前のものが既にある場合は、期待どおりにコンパイルエラーが発生します。たとえば、これはエラーになります。

import * as co from "./co"; // Error: import definition conflicts with local definition
let co = 1;

エラーが発生した場合 "モジュールcoが見つかりません"...

TypeScriptはモジュールに対して完全な型チェックを実行しているため、インポートしようとしているモジュールのTS定義がない場合（たとえば、定義ファイルのないJSモジュールである場合）、次のことができますモジュールレベルのエクスポートを含まない.d.ts定義ファイルでモジュールをdeclare：

declare module "co" {
    declare var co: any;
    export = co;
}
47
John Weisz

Node.JS TypeScriptアプリケーションをコンパイルすると、次のようなエラーが表示されました。

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

修正はremove thisでした：

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

そしてこれをこれに置き換えるには：

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

私が得ることができる最高の説明は Tamas Piroの投稿 からです。

TLDR; TypeScriptは、グローバル実行環境にDOMタイピングを使用します。あなたの場合、グローバルウィンドウオブジェクトに「co」プロパティがあります。

これを解決するには：

  1. 変数の名前を変更する、または
  2. TypeScriptモジュールを使用し、空のエクスポート{}を追加します：
export{};

または

  1. DOMタイピングを追加しないで、コンパイラオプションを構成します。

TypeScriptプロジェクトディレクトリのtsconfig.jsonを編集します。

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

IIFE(Immediately Invoked Function Expression)、 IIFE を使用

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

 })();
5
Belter

私は同じ問題を抱えており、私の解決策は次のようになります。

// *./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ファイル：

// *./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)は完璧に機能します。

1
django dev

アップグレード時にこのエラーが発生しました

gulp-TypeScript 3.0.2→3.1.0

3.0.2に戻すと修正されました

0
danday74