>웹 프론트엔드 >JS 튜토리얼 >TypeScript 외부 모듈에서 네임스페이스를 어떻게 효과적으로 사용합니까?

TypeScript 외부 모듈에서 네임스페이스를 어떻게 효과적으로 사용합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-10 13:39:02417검색

How Do I Use Namespaces Effectively with TypeScript External Modules?

TypeScript 외부 모듈과 함께 네임스페이스를 어떻게 사용합니까?

문제:

TypeScript 외부 모듈과 함께 네임스페이스를 사용하는 코드가 있습니다. 모듈을 설치했지만 오류나 예상치 못한 동작이 발생했습니다. 코드는 다음과 같습니다.

// baseTypes.ts
export namespace Living.Things {
  export class Animal {
    move() { /* ... */ }
  }
  export class Plant {
    photosynthesize() { /* ... */ }
  }
}

// dog.ts
import b = require('./baseTypes');

export namespace Living.Things {
  // Error, can't find name 'Animal', ??
  export class Dog extends Animal {
    woof() { }
  }
}

// tree.ts
// Error, can't use the same name twice, ??
import b = require('./baseTypes');
import b = require('./dogs');

namespace Living.Things {
  // Why do I have to write b.Living.Things.Plant instead of b.Plant??
  class Tree extends b.Living.Things.Plant {
  }
}

캔디 컵 비유:

종이에 사탕을 정리한다고 상상해 보세요. 각 시트가 별도의 모듈인 경우 각 시트에 "A" 라벨이 붙은 컵을 만드는 것은 도움이 되지 않습니다. 이는 실제로 사탕을 정리하지 않고 추가 단계를 만드는 것과 같습니다.

컵 없는 생활:

네임스페이스를 사용하는 대신 다음과 같이 코드를 작성하는 것이 좋습니다.

// Mod1.ts
export class Twix { ... }

// Mod2.ts
export class PeanutButterCup { ... }

// Mod3.ts
export class KitKat { ... }

이렇게 하면 불필요한 네임스페이스가 필요 없는 단순한 구조가 생성됩니다.

네임스페이스가 존재하는 이유 t 모듈에 적합:

  • 조직: 파일 시스템 조직이 이러한 요구 사항을 해결합니다.
  • 이름 충돌: 이 문제는 그렇지 않습니다. 개체에는 고유한 이름이 있으므로 모듈 내에서는 발생하지 않습니다.

외부 모듈에 대한 지침:

  • 최대한 최상위 수준에 가깝게 내보냅니다.
  • 단일 내보내기에는 내보내기 기본값을 사용합니다.
  • 여러 내보내기를 최상위 수준에 배치합니다.
  • 대규모 내보내기에만 모듈/네임스페이스를 사용합니다.

위험 신호:

  • 최상위 내보내기 모듈 Foo { ... }.
  • 내보내기 기본값이 아닌 단일 내보내기 클래스/함수.
  • 동일한 내보내기 모듈 Foo { ... }를 사용하는 여러 파일.

위 내용은 TypeScript 외부 모듈에서 네임스페이스를 어떻게 효과적으로 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.