ES2015 모듈 구문은 커스텀 TypeScript 모듈 및 네임스페이스 @typescript-eslint/no-namespace보다 선호됩니다.

ES2015 모듈 구문은 커스텀 TypeScript 모듈 및 네임스페이스 @typescript-eslint/no-namespace보다 선호됩니다.

npm start 실행 중 다음 오류가 발생하였습니다.

ES2015 모듈 구문은 커스텀 TypeScript 모듈 및 네임스페이스 @typescript-eslint/no-namespace보다 선호됩니다.

    namespace InternalThings {...}

제가 이걸 조사하려고 했는데 너무 헷갈려요.

왜 이런 일이 일어나는 거죠?어떻게 고치죠?

tsconfig.json에 플래그를 붙이려고 했지만 아직 성공하지 못했습니다.

이는 보풀 규칙에 의해 발생하는 보풀 오류입니다.https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-namespace.md

되어 이를하여 이 규칙을 사용할 import ★★★★★★★★★★★★★★★★★」export네임네수정으로 간주되는 항목에 대해서는 규칙 설명서를 참조하십시오.

규칙을 좋아하지만 이 행에 대해 규칙을 비활성화하려면 바로 위에 다음 항목을 추가합니다.

// eslint-disable-next-line @typescript-eslint/no-namespace

규칙이 마음에 들지 않고 완전히 비활성화하려면 .eslintrc 파일을 다음 행으로 편집하십시오.

rules: {
  "@typescript-eslint/no-namespace": "off"
}

이 오류를 수정하려면 다음 대신

export namespace InternalThings {
    export function myFunction() {
    }

    export class MyClass {
    }
}

import { InternalThings } from './internal-things';

InternalThings.myFunction();

네임스페이스의 모든 멤버를 직접 표시합니다.

export function myFunction() {
}

export class MyClass {
}

다음과 같이 Import합니다.

import * as InternalThings from './internal-things';

InternalThings.myFunction();

모듈 사용자는 원하는 것만 Import하거나 모듈 이름을 다르게 지정할 수 있습니다.

import * as CustomModuleName from './internal-things';

CustomModuleName.myFunction();

import { MyClass } from './internal-things';

let field = new MyClass();

동일한 API를 유지 관리하면서 보풀 오류 수정

현재의 실장을 중단하지 않고 보풀 에러를 처리하려면 , 다음의 조작을 실행할 수 있습니다.다만, 이 조작을 실시하기 전에, 상기의 회답을 확인해 주세요.https://stackoverflow.com/a/63574739/349659

전에

Implementation

export namespace Container {
  export function someCall() { }
  export function anotherCall() { }
}

Consumer

import { Container } from './Container'

Container.someCall()
Container.anotherCall()

끝나고

옵션 1

// These are essentially private
function someCall() { }
function anotherCall() { }

// We expose them here
// This feels like a step towards CommonJS, but is valid ES Module code
export const Container = {
  someCall,
  anotherCall,
}

옵션 2

다음과 같이 함수 호출을 직접 개체로 정의하고 캡슐화할 수도 있습니다.

export const Container = {
  someCall() {},
  anotherCall() {},
}

결론적으로

코드 베이스가 크고, 린터를 「빠르게」 달래고 싶은 경우는, 위와 같은 리팩터를 실행할 수 있습니다.반드시 이 답변 https://stackoverflow.com/a/63574739/349659과 그 이면에 있는 이유를 고려하시기 바랍니다.

결국 코드를 변경할 필요가 없는 가장 빠른 수정은 다음 답변에서 설명한 대로 이 보풀링 규칙을 해제하는 것입니다.https://stackoverflow.com/a/58271234/349659

만약 당신이 처음부터 이 문제에 부딪힌다면, 저는 린터의 힌트로 현대적인 구현을 활용하는 것을 고려하고 있지만, 당신은 네임스페이스를 즐기고 있고, 단순히 그것들을 원하는 것일 수도 있습니다.팀의 일원인 경우 먼저 피드백을 받고 팀 표준을 따르는 것이 좋습니다.

---

엣지 케이스 및 고려 사항

내가 마주친 한 사례는 한 파일에 여러 개의 네임스페이스가 있다는 것이다.이 시나리오에서는 네임스페이스를 삭제한 후 이름 충돌이 발생할 수 있습니다.

예

전에

export namespace Container {
  export function someCall() { }
  export function anotherCall() { }
}

export namespace AnotherContainer {
  export function someCall() { }
  export function anotherCall() { }
}

끝나고

충돌 이름 변경

이 시나리오에서는 네임스페이스를 삭제할 때 다음과 같이 내보내기를 유지하면서 충돌 이름을 변경할 수 있습니다.

function containerSomeCall() { }
function containerAnotherCall() { }

export const Container = {
  someCall: containerSomeCall,
  anotherCall: containerAnotherCall,
}

function anotherContainerSomeCall() { }
function anotherContainerAnotherCall() { }

export const AnotherContainer = {
  someCall: anotherContainerSomeCall,
  anotherCall: anotherContainerAnotherCall,
}

코드 분리

또 다른 옵션은 파일을 자신의 파일로 분리하는 것입니다.원본 파일의 내보내기를 유지하려면 중복된 것처럼 보이지만 나중에 새 파일을 가리키도록 가져오기를 업데이트하면 더 큰 리팩터링을 위한 간헐적인 단계가 될 수 있습니다.이를 통해 필요에 따라 보다 현대적인 ESM 코드 작성을 시작할 수도 있습니다.또한 오래된 모듈을 통해 새로운 내보내기를 프록시할 수도 있습니다.

Container.ts

function someCall() { }
function anotherCall() { }

export const Container = {
  someCall,
  anotherCall,
}

AnotherContainer.ts

function someCall() { }
function anotherCall() { }

export const AnotherContainer = {
  someCall,
  anotherCall,
}

OriginalFile.ts

export * from './Container'
export * from './AnotherContainer'

새로운 ESM 모듈은 오래된 원래 모듈을 통해 프록시할 수 있습니다.

에러는 eslint에서 발생하고 있다.Configuration의 '@typescript-eslint/no-namespace' 규칙을 무시하거나 ES6를 사용하여 코드를 다시 작성해야 합니다.

사용자 지정 TypeScript 모듈(module foo {}) 및 네임스페이스(namespace foo {})는 TypeScript 코드를 구성하는 데 오래된 방법으로 간주됩니다.이제 ES2015 모듈 구문이 선호됩니다(가져오기/내보내기).

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-namespace.md 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/58270901/es2015-module-syntax-is-preferred-over-custom-typescript-modules-and-namespaces