캔디 컵 유추

버전 1 : 모든 사탕을위한 컵

다음과 같은 코드를 작성했다고 가정 해 봅시다.

Mod1.ts

export namespace A {
    export class Twix { ... }
}

Mod2.ts

export namespace A {
    export class PeanutButterCup { ... }
}

Mod3.ts

export namespace A {
     export class KitKat { ... }
}

이 설정을 만들었습니다 :

각 모듈 (용지) 에는 이름이 지정된 자체 컵 이 A있습니다. 이것은 쓸모가 없습니다-실제로 사탕을 조직 하는 것이 아니라, 당신과 간식 사이에 추가 단계 (컵에서 꺼내기)를 추가하는 것입니다.

버전 2 : 글로벌 범위에서 한 컵

모듈을 사용하지 않았다면 다음과 같은 코드를 작성할 수 있습니다 ( export선언 부족 ).

global1.ts

namespace A {
    export class Twix { ... }
}

global2.ts

namespace A {
    export class PeanutButterCup { ... }
}

global3.ts

namespace A {
     export class KitKat { ... }
}

이 코드 A는 전역 범위에서 병합 된 네임 스페이스 를 만듭니다 .

이 설정은 유용하지만 모듈의 경우에는 적용되지 않습니다 (모듈이 전역 범위를 오염시키지 않기 때문에).

버전 3 : 컵리스

원래의 예를 다시가는, 컵 A, A및A 당신에게 호의를하고 있지 않습니다. 대신 코드를 다음과 같이 작성할 수 있습니다.

Mod1.ts

export class Twix { ... }

Mod2.ts

export class PeanutButterCup { ... }

Mod3.ts

export class KitKat { ... }

다음과 같은 그림을 만들려면

훨씬 낫다!

이제 모듈에서 네임 스페이스를 얼마나 많이 사용하고 싶은지 아직도 생각하고 있다면 계속 읽으십시오 …

이들은 당신이 찾고있는 개념이 아닙니다

네임 스페이스가 처음 존재하는 이유의 근원으로 돌아가서 이러한 이유가 외부 모듈에 적합한 지 여부를 조사해야합니다.

구성 : 네임 스페이스는 논리적으로 관련된 객체와 유형을 그룹화하는 데 편리합니다. 예를 들어 C #에서는 모든 컬렉션 유형을System.Collections . 유형을 계층 적 네임 스페이스로 구성하여 해당 유형의 사용자에게 좋은 “발견”환경을 제공합니다.

이름 충돌 : 이름 공간은 이름 충돌을 피하기 위해 중요합니다. 예를 들어, 당신은 할 수 My.Application.Customer.AddForm와 My.Application.Order.AddForm두 개의 동일한 이름을 가진 유형,하지만 다른 네임 스페이스를 -. 모든 식별자가 동일한 루트 범위에 있고 모든 어셈블리가 모든 유형을로드하는 언어에서는 모든 것이 네임 스페이스에 있어야합니다.

이러한 이유는 외부 모듈에서 의미가 있습니까?

구성 : 외부 모듈은 이미 파일 시스템에 존재합니다. 경로와 파일 이름으로 해결해야하므로 사용할 수있는 논리적 구성 체계가 있습니다. 우리는 /collections/generic/폴더를 가질 수 있습니다list모듈 .

이름 충돌 : 이것은 외부 모듈에 전혀 적용되지 않습니다. 모듈 내 에서 같은 이름을 가진 두 개의 객체를 가질만한 이유는 없습니다. 소비 측면에서 특정 모듈 의 소비자 는 모듈을 참조하는 데 사용할 이름을 선택하므로 우연한 이름 충돌이 불가능합니다.

모듈이 작동하는 방식으로 이러한 이유가 적절히 해결되었다고 생각하지 않더라도 외부 모듈에서 네임 스페이스를 사용하려는 “솔루션”은 작동하지 않습니다.

상자에 상자에 상자

이야기:

친구 Bob이 전화합니다. “저는 집에 아주 훌륭한 조직 체계가 있습니다.” 깔끔한, 밥이 무슨 일을했는지 ​​보자.

부엌에서 시작하여 식료품 저장실을여십시오. 각각 “Pantry”라고 레이블이 지정된 60 개의 서로 다른 상자가 있습니다. 상자를 무작위로 골라서 엽니 다. 내부에는 “곡물”이라는 단일 상자가 있습니다. “곡물”상자를 열고 “파스타”라고 표시된 단일 상자를 찾으십시오. “파스타”상자를 열고 “펜”이라는 단일 상자를 찾으십시오. 이 상자를 열고 예상대로 펜네 파스타 한 봉지를 찾으십시오.

약간 혼동되면 “Pantry”라고 표시된 인접 상자를 선택하십시오. 안에는 “곡물”이라는 레이블이 붙은 단일 상자가 있습니다. “곡물”상자를 열고 “파스타”라고 표시된 단일 상자를 다시 찾습니다. “파스타”상자를 열고 하나의 상자를 찾으십시오.이 상자에는 “Rigatoni”라는 레이블이 붙어 있습니다. 이 상자를 열고 리가 토니 파스타 한 봉지를 찾으세요

“좋아요!” 밥이 말합니다. “모든 것이 네임 스페이스에 있습니다!”.

“하지만 밥 …”당신이 대답합니다. “조직 구성은 쓸모가 없습니다. 무엇이든 얻기 위해 많은 상자를 열어야합니다. 실제로 세 개가 아닌 한 상자 에 모든 것을 넣은 것보다 더 쉽게 찾을 수는 없습니다. . 실제로, 식료품 저장실은 이미 선반별로 분류되어 있으므로 상자가 전혀 필요하지 않습니다. 선반에 파스타를 놓고 필요할 때 집어 올리는 것이 어떻습니까? “

“당신은 이해하지 못합니다-다른 누구도 ‘Pantry’네임 스페이스에 속하지 않은 것을 넣지 않도록해야합니다. 그리고 모든 파스타를 Pantry.Grains.Pasta네임 스페이스에 안전하게 정리하여 쉽게 찾을 수 있습니다.”

밥은 매우 혼란스러운 사람입니다.

모듈은 자체 상자입니다

아마도 실제 상황에서 비슷한 일이 있었을 것입니다. 아마존에서 몇 가지 물건을 주문하면 각 상자에 작은 상자가 있고 상자에 포장되어있는 각 상자에 자체 항목이 표시됩니다. 내부 상자가 유사하더라도 발송물은 유용하게 “결합”되지 않습니다.

박스 유추와 마찬가지로 주요 관찰 사항은 외부 모듈이 자체 박스라는 것 입니다. 많은 기능을 가진 매우 복잡한 항목 일 수 있지만 지정된 외부 모듈은 자체 상자입니다.

외부 모듈에 대한 지침

이제 ‘네임 스페이스’를 사용할 필요가 없다는 것을 알았으므로 모듈을 어떻게 구성해야합니까? 몇 가지 지침 원칙과 예가 이어집니다.

가능한 한 최상위 수준에 가깝게 내보내기

• 단일 클래스 또는 함수 만 내보내는 경우 다음을 사용하십시오 export default.

MyClass.ts

export default class SomeType {
  constructor() { ... }
}

MyFunc.ts

function getThing() { return 'thing'; }
export default getThing;

소비

import t from './MyClass';
import f from './MyFunc';
var x = new t();
console.log(f());

이것은 소비자에게 최적입니다. 그들은 원하는대로 ( t이 경우) 당신의 유형의 이름을 지정할 수 있으며 물체를 찾기 위해 불필요한 도팅을 할 필요가 없습니다.

• 여러 객체를 내보내는 경우 모두 최상위 레벨에 두십시오.

MyThings.ts

export class SomeType { ... }
export function someFunc() { ... }

소비

import * as m from './MyThings';
var x = new m.SomeType();
var y = m.someFunc();

• 많은 것을 내보내는 경우에만 module/ namespace키워드 를 사용해야합니다 .

MyLargeModule.ts

export namespace Animals {
  export class Dog { ... }
  export class Cat { ... }
}
export namespace Plants {
  export class Tree { ... }
}

소비

import { Animals, Plants} from './MyLargeModule';
var x = new Animals.Dog();

붉은 깃발

다음은 모두 모듈 구조화를위한 위험 신호입니다. 다음 중 하나라도 파일에 적용되는 경우 외부 모듈의 네임 스페이스를 만들지 않는지 다시 확인하십시오.

• 최상위 선언 만있는 파일 export module Foo { ... }( Foo모든 것을 제거 하고 레벨 위로 이동)
• 단일 파일이 export class있거나 export function그렇지 않은 파일export default
• export module Foo {최상위 수준에서 동일한 여러 파일 (이 파일들이 하나로 결합 될 것이라고 생각하지 마십시오 Foo!)

답변

export namespace Shapes {
    export class Triangle {}
    export class Square {}
}

import { Triangle as _Triangle } from './triangle';
import { Square as _Square } from './square';

export namespace Shapes {
  export const Triangle = _Triangle;
  export const Square = _Square;
}

// ./shapes/index.ts
export { Triangle } from './triangle';
export { Square } from './square';

// in importing file:
import * as Shapes from './shapes/index.ts';
// by node module convention, you can ignore '/index.ts':
import * as Shapes from './shapes';
let myTriangle = new Shapes.Triangle();

// triangle.ts
export namespace Shapes {
    export class Triangle {}
}

// square.ts
export namespace Shapes {
    export class Square {}
}

import { Shapes } from './square';
import { Shapes as _Shapes } from './triangle';

// ugh
let myTriangle = new _Shapes.Shapes.Triangle();

export class Animal {
    move() { /* ... */ }
}

export class Plant {
    photosynthesize() { /* ... */ }
}

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

export class Dog extends b.Animal {
    woof() { }
}   

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

class Tree extends b.Plant {
}

import dog = require('./dog')
import tree = require('./tree')

export = {
    dog: dog,
    tree: tree
}

import LivingThings = require('./LivingThings');
console.log(LivingThings.Tree)
console.log(LivingThings.Dog)

export class Animal {
move() { /* ... */ }
}

export class Plant {
  photosynthesize() { /* ... */ }
}

import * as b from './base';

export class Dog extends b.Animal {
   woof() { }
} 

import { Dog } from './dog'

namespace things {
  export const dog = Dog;
}

export = things;

import * as things from './things';

console.log(things.dog);

export namespace(or module) boxInBox {} .

export class Foo {
    ...
}

export class Bar {
    ...
}

export { Foo } from './Foo';
export { Bar } from './Bar';

{
    "compilerOptions": {
        ...
        paths: {
            ...
            "CompanyName.Products": ["./path/to/CompanyName.Products/index"],
            ...
        }
        ...
    }
    ...
}

import { Foo, Bar } from 'CompanyName.Products'

{
    "plugins": [
        [ "module-resolver", {
            "cwd": "babelrc",
            "alias": {
                "CompanyName.Products": "./path/to/typescript/build/output/CompanyName.Products/index.js"
            }
        }],
        ... other plugins ...
    ]
}

export namespace Bookname{
export class Snows{
    name:any;
    constructor(bookname){
        console.log(bookname);
    }
}
export class Adventure{
    name:any;
    constructor(bookname){
        console.log(bookname);
    }
}
}





export namespace TreeList{
export class MangoTree{
    name:any;
    constructor(treeName){
        console.log(treeName);
    }
}
export class GuvavaTree{
    name:any;
    constructor(treeName){
        console.log(treeName);
    }
}
}

import {Bookname , TreeList} from './namespaceModule';
import b = require('./namespaceModule');
let BooknameLists = new Bookname.Adventure('Pirate treasure');
BooknameLists = new Bookname.Snows('ways to write a book');
const TreeLis = new TreeList.MangoTree('trees present in nature');
const TreeLists = new TreeList.GuvavaTree('trees are the celebraties');