블록 범위 변수를 다시 닫을 수 없습니다.
노드 앱을 빌드하고 있으며, .js의 각 파일 내에는 다양한 패키지에 필요한 작업이 포함되어 있습니다.
let co = require("co");
하지만 얻는 것은
기타. 그럼 타이프스크립트를 사용하면 프로젝트 전체에서 이러한 선언/요구사항은 1개밖에 없는 것 같습니다.생각대로 헷갈린다.let현재 파일로 범위가 지정되었습니다.
저는 방금 프로젝트를 진행 중이었는데 리팩터가 이런 오류를 발견하게 된 후에요.
누가 설명 좀 해줄래?
타마스 피로의 게시물에서 가장 좋은 설명을 들을 수 있습니다.
TLDR; TypeScript는 글로벌 실행 환경에 DOM 입력을 사용합니다.이 경우 글로벌 창 개체에 'co' 속성이 있습니다.
이 문제를 해결하려면:
변수 이름을 변경합니다.
TypeScript 모듈을 사용하여 빈 내보내기{}를 추가합니다.
export {};또는
DOM 입력을 추가하지 않고 컴파일러 옵션을 설정합니다.
TypeScript 프로젝트 디렉토리에서 tsconfig.json을 편집합니다.
{
"compilerOptions": {
"lib": ["es6"]
}
}
에러 자체에 대해서는,let는 함수 스코프 대신 블록스코프에 존재하는 로컬 변수를 선언하기 위해 사용됩니다.또 더 엄격해요var따라서 다음과 같은 작업을 수행할 수 없습니다.
if (condition) {
let a = 1;
...
let a = 2;
}
또, 주의해 주세요.case안에 있는 조항switch블록은 자체 블록 범위를 생성하지 않으므로 동일한 로컬 변수를 여러 개에 걸쳐 다시 클로즈할 수 없습니다.case를 사용하지 않음{}각 블록을 만듭니다.
Import에 대해서는 TypeScript가 파일을 실제 모듈로 인식하지 못하고 모델 수준의 정의가 해당 파일에 대한 글로벌 정의가 되기 때문에 이 오류가 발생할 수 있습니다.
명시적 할당이 없는 표준 ES6 방식으로 외부 모듈을 Import하여 TypeScript가 파일을 모듈로 올바르게 인식하도록 합니다.
import * as co from "./co"
이 경우에도 이름이 지정된 항목이 있으면 컴파일 오류가 발생합니다.co예상대로 벌써.예를 들어 다음과 같은 오류가 발생합니다.
import * as co from "./co"; // Error: import definition conflicts with local definition
let co = 1;
"cannot find module co" (모듈을 찾을 수 없습니다)라는 오류가 뜨면
TypeScript는 모듈에 대한 완전한 유형 검사를 실행하고 있기 때문에 Import하려는 모듈에 대한 TS 정의가 없는 경우(정의 파일이 없는 JS 모듈 등)에서 모듈을 선언할 수 있습니다..d.ts모듈 수준 내보내기가 포함되지 않은 정의 파일:
declare module "co" {
declare var co: any;
export = co;
}
이 시대에 이곳에 오는 사람들을 위해, 여기 이 문제에 대한 간단한 해결책이 있습니다.적어도 백엔드에서 효과가 있었어.프런트 엔드 코드를 확인하지 않았습니다.
추가:
export {};
기존 내보내기가 없는 코드가 있는 파일의 맨 위에 있습니다.
또한 vscod에서 ts를 작업하면서 이 문제를 해결했습니다.제가 이 문제를 해결하는 방법은 쉽지만, 당신의 문제와는 다를 수 있습니다.
최근 탭에서 typescript 파일과 javascript 파일을 동시에 열면 편집기에서 이 오류가 나타납니다.닫기만 하면 오류가 사라집니다.
이것이 이 간단한 벌레로 인해 머리를 긁고 있는 누군가에게 도움이 되기를 바란다.
노드 컴파일 시 이와 유사한 오류가 발생하였습니다.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"]
}
IIFE(Immediately Invoked Function Expression), IIFE
(function () {
all your code is here...
})();
해결책은 CommonJs(CommonJs)를 사용하지이었습니다.require,module.exports 모듈ES 모듈)( 「 」 )에 접속합니다.import,export의 개요)
또한 TypeScript 문서에서는 ES 모듈 구문을 권장하고 있습니다.TypeScript 모듈
물론 이것보다 훨씬 더 많은 것이 있지만, 우선은 다음과 같습니다.
의 .
requireimport대체:
const https = require('https');포함:
import https from 'https';의 「이행하다」를.
module.exportsexport default대체:
module.exports = myVar ...포함:
export default myVar ...<고객명>을 치환
module.exportsexport대체:
module.exports.myVar =또는 다음과 같이 입력합니다.
module.export = { myVar ... }포함:
export myVar ...
자세한 내용은 이쪽: 공통에서JS에서 ES 모듈: Node.js 앱을 현대화하는 방법
편집자의 경고입니다.왜냐하면 컴파일된 index.js와 index.ts가 있을 때 표시됩니다.그러나 index.disclose를 닫으면 문제가 없습니다.
여기 내 상황에 대한 해결책이 있다.심플하고 고속!!
이 문제는 블록 범위 변수가 소스 코드의 어딘가에 선언되었을 때 발생합니다.
를 해결하려면 , 「」를 합니다.module.exports = and and and and and로 export default.
는 다음과 .tsconfig.json다음 중 하나:
{
"compilerOptions": {
"esModuleInterop": true,
"target": "ES2020",
"moduleResolution": "node"
}
}
안 요.typemodulepackage.json.
같은 문제가 발생했는데, 해결 방법은 다음과 같습니다.
// *./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
그리고 물론 이 모든 것에 대한 요약 파일도 있습니다.
// *./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);
})
갱신되었습니다.물론 타이프스크립트 파일을 따로 컴파일할 필요는 없습니다. runSequence(['ts1', 'ts2', 'ts3'], 'browserify', callback)완벽하게 동작합니다.
경우 (InteliJ)는 (InteliJ 사용)File-Invalidate Caches / Restart...성공했어.
Import할 하였습니다.express잘못되어 있습니다.가 해야 할 은 교체뿐이었다.
const router = require('express').Router();
와 함께
import express from 'express';
const router = express.Router();
내 경우 angular를 사용하여 다음과 같이 동일한 변수가 아닌 콜론을 사용하여 변수를 할당하려고 했습니다.
const user$ : this.service.getUser();
다음과 같이 해야 합니다.
const user$ = this.service.getUser();
해결법namespace
IIFE 기능 및 폐쇄
데모.ts
// 1. namespace function
namespace a {
const func = () => {
//
}
}
// 2. function
const test = () => {
//
}
demo.demo.demo
"use strict";
// 1. namespace function
var a;
(function (a) {
const func = () => {
//
};
})(a || (a = {}));
// 2. function
const test = () => {
//
};
참조
https://www.typescriptlang.org/docs/handbook/namespaces.html
https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html
내 경우 네임스페이스를 사용하는 리팩터가 대부분의 문제를 해결했다.
그래서... 제가 뭔가를 했는데, 문제가 해결된 것 같았는데, 보이지 않는 결과가 나올지는 모르겠지만, 정말 간단해 보여요.
파일 시작 부분에 {, 끝에 }를 넣기만 하면 파일에 새로운 블록을 만들 수 있습니다.
파일1.ts
{
let co=require('co');
//...
module.exports=...
}
파일 2.ts
let co=require('co');
let f1=require('./file1');
//...
module.exports=...
TSconfig 파일에 다음 행을 추가합니다.
"compiler Options": { "skipLibCheck": true}
가장 간단한 해결책은 다음을 변경하는 것입니다.
"target": "es5"로로 합니다."target": "es6"tsconfig.jsonfilename을 클릭합니다.
이 파일에 액세스할 수 없는 경우 다음을 실행하십시오.
tsc --init이치노
처음에 타이프스크립트는 JavaScript es5에 저장되며 최신 JavaScript 구문을 이해할 수 없기 때문입니다.
이 문제는 변수 co가 스코프에 이미 정의되어 있고(window/global 객체에 정의되어 있을 수 있음) 동일한 이름으로 변수를 다시 선언하는 경우에 발생합니다.
let을 var로 바꾸면 오류가 발생하지 않지만 let을 사용 중이므로 let을 사용하여 동일한 변수를 다시 지정할 수 없습니다.
변수 이름을 다른 이름으로 변경하면 오류가 사라집니다.
오늘 날짜: 12/22
예:
button const =() {}
export default button;
export const button2(){}
-----------------------------------------------------------
import button, {ButtonIcon} from '../Button';
언급URL : https://stackoverflow.com/questions/35758584/cannot-redeclare-block-scoped-variable
'source' 카테고리의 다른 글
| 순환 의존관계 발견: $http <- $templateFactory <- $view <- $state (0) | 2023.03.29 |
|---|---|
| 외부 의존 관계가 없는 디렉티브별 AngularJS 그룹 (0) | 2023.03.29 |
| 리액트를 사용하려고 합니다.바디 스타일을 설정하는 DOM (0) | 2023.03.29 |
| 메뉴 항목 및 페이지 목록에 대한 li 클래스 & ID 삭제 (0) | 2023.03.29 |
| 레일 객체 관계 및 JSON 렌더링 (0) | 2023.03.29 |