차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- typescript:module [2019/07/30 07:18] – [Export as close to top-level as possible] taekgu
+++ typescript:module [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 467: / 줄 467: @@
 "최상위 레벨 근처로 내보내기"가 모듈 사용자의 마찰을 줄이는 것처럼 기본 내보내기를 도입합니다. 모듈의 주요 목적이 하나의 특정 내보내기를 저장하는 것이면 기본 내보내기로 내보내기를 고려해야합니다. 이렇게하면 가져 오기를 사용하고 실제로 가져 오기를 조금 더 쉽게 사용할 수 있습니다.
-**''여러 개체를 내보내는 경우 최상위 수준에 모두 배치하십시오.''**
-<code javascript MyThings.ts>
-export class SomeType { /* ... */ }
-export function someFunc() { /* ... */ }
-</code>
 예 :
@@ 줄 493: / 줄 487: @@
 이것은 소비자를 위한 옵션입니다. 그들은 원하는대로 타입을 지정할 수 있으며 (이 경우 t), 개체를 찾기 위해 과도한 dotting 작업을 수행 할 필요가 없습니다.
+**''여러 개체를 내보내는 경우 최상위 수준에 모두 배치하십시오.''**
+<code javascript MyThings.ts>
+export class SomeType { /* ... */ }
+export function someFunc() { /* ... */ }
+</code>
 반대로 가져올 때 :
+''가져온 이름을 명시적으로 나열''
+<code javascript Consumer.ts>
+import { SomeType, someFunc } from "./MyThings";
+let x = new SomeType();
+let y = someFunc();
+</code>
+''많은 수의 항목을 가져 오는 경우 네임 스페이스 가져 오기 패턴을 사용하십시오.''
+<code javascript MyLargeModule.ts>
+export class Dog { ... }
+export class Cat { ... }
+export class Tree { ... }
+export class Flower { ... }
+</code>
+<code javascript Consumer.ts>
+import * as myLargeModule from "./MyLargeModule.ts";
+let x = new myLargeModule.Dog();
+</code>
+==== Re-export to extend ====
+종종 모듈에서 기능을 확장해야합니다. 일반적인 JS 패턴은 JQuery 확장이 작동하는 것과 유사한 확장을 사용하여 원래 객체를 보강하는 것입니다. 앞서 언급했듯이 모듈은 전역 이름 공간 객체처럼 병합되지 않습니다. 권장되는 솔루션은 원래 개체를 변경하지 않고 새로운 기능을 제공하는 새 엔터티를 내보내는 것입니다.
+Calculator.ts 모듈에 정의 된 간단한 계산기 구현을 고려하십시오. 또한 모듈은 입력 문자열 목록을 전달하고 끝에 결과를 작성하여 계산기 기능을 테스트하는 도우미 함수를 내 보냅니다.
+<code javascript Calculator.ts>
+export class Calculator {
+    private current = 0;
+    private memory = 0;
+    private operator: string;
+    protected processDigit(digit: string, currentValue: number) {
+        if (digit >= "0" && digit <= "9") {
+            return currentValue * 10 + (digit.charCodeAt(0) - "0".charCodeAt(0));
+        }
+    }
+    protected processOperator(operator: string) {
+        if (["+", "-", "*", "/"].indexOf(operator) >= 0) {
+            return operator;
+        }
+    }
+    protected evaluateOperator(operator: string, left: number, right: number): number {
+        switch (this.operator) {
+            case "+": return left + right;
+            case "-": return left - right;
+            case "*": return left * right;
+            case "/": return left / right;
+        }
+    }
+    private evaluate() {
+        if (this.operator) {
+            this.memory = this.evaluateOperator(this.operator, this.memory, this.current);
+        }
+        else {
+            this.memory = this.current;
+        }
+        this.current = 0;
+    }
+    public handleChar(char: string) {
+        if (char === "=") {
+            this.evaluate();
+            return;
+        }
+        else {
+            let value = this.processDigit(char, this.current);
+            if (value !== undefined) {
+                this.current = value;
+                return;
+            }
+            else {
+                let value = this.processOperator(char);
+                if (value !== undefined) {
+                    this.evaluate();
+                    this.operator = value;
+                    return;
+                }
+            }
+        }
+        throw new Error(`Unsupported input: '${char}'`);
+    }
+    public getResult() {
+        return this.memory;
+    }
+}
+export function test(c: Calculator, input: string) {
+    for (let i = 0; i < input.length; i++) {
+        c.handleChar(input[i]);
+    }
+    console.log(`result of '${input}' is '${c.getResult()}'`);
+}
+</code>
+다음은 노출된 ''test'' 함수를 사용하는 계산기의 간단한 테스트입니다.
+<code javascript TestCalculator.ts>
+import { Calculator, test } from "./Calculator";
+let c = new Calculator();
+test(c, "1+2*33/11="); // prints 9
+</code>
+이제 이것을 확장하여 10이 아닌 다른 수의 입력에 대한 지원을 추가하십시오. ProgrammerCalculator.ts를 만듭니다.
+<code javascript ProgrammerCalculator.ts>
+import { Calculator } from "./Calculator";
+class ProgrammerCalculator extends Calculator {
+    static digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
+    constructor(public base: number) {
+        super();
+        const maxBase = ProgrammerCalculator.digits.length;
+        if (base <= 0 || base > maxBase) {
+            throw new Error(`base has to be within 0 to ${maxBase} inclusive.`);
+        }
+    }
+    protected processDigit(digit: string, currentValue: number) {
+        if (ProgrammerCalculator.digits.indexOf(digit) >= 0) {
+            return currentValue * this.base + ProgrammerCalculator.digits.indexOf(digit);
+        }
+    }
+}
+// Export the new extended calculator as Calculator
+export { ProgrammerCalculator as Calculator };
+// Also, export the helper function
+export { test } from "./Calculator";
+</code>
+새로운 모듈 ProgrammerCalculator는 원래 Calculator 모듈과 유사한 API 모양을 내 보냅니다. 그러나 원래 모듈의 모든 오브젝트를 보강하지 않습니다. 다음은 우리의 ProgrammerCalculator 클래스에 대한 테스트입니다.
+<code javascript TestProgrammerCalculator.ts>
+import { Calculator, test } from "./ProgrammerCalculator";
+let c = new Calculator(2);
+test(c, "001+010="); // prints 3
+</code>
+** 모듈에서 namespace를 사용하지 마라 **
+모듈 기반 조직으로 처음 이동하면 일반적으로 추가 네임 스페이스 계층에 내보내기를 래핑하는 경향이 있습니다. 모듈은 자체 범위를 가지며 내 보낸 선언만 모듈 외부에서 볼 수 있습니다. 이를 염두에두고, 네임스페이스는 모듈을 사용할 때 아주 작은 값을 제공합니다.
+조직 측면에서는 네임스페이스가 논리적으로 관련된 개체와 유형을 전체 범위로 그룹화 할 때 편리합니다. 예를 들어 C#에서는 System.Collections의 모든 컬렉션 유형을 찾습니다. 유형을 계층 적 네임스페이스로 구성하여 이러한 유형의 사용자에게 적합한 "검색"환경을 제공합니다. 반면 모듈은 필연적으로 파일 시스템에 이미 존재합니다. 경로와 파일 이름으로 해결해야하므로 사용할 수있는 논리적 조직 체계가 있습니다. 목록 모듈이있는 /collections/generic/ 폴더를 가질 수 있습니다.
+네임스페이스는 전역 범위에서 충돌 이름을 지정하지 않는 것이 중요합니다. 예를 들어, My.Application.Customer.AddForm 및 My.Application.Order.AddForm을 가질 수 있습니다. 이름은 같지만 이름 공간이 다른 두 가지 유형이 있습니다. 그러나 이것은 모듈의 문제가 아닙니다. 모듈 내에서 동일한 이름을 가진 두 개의 객체를 갖는 그럴듯한 이유는 없습니다. 소비 측면에서, 주어진 모듈의 소비자는 모듈을 참조하는 데 사용할 이름을 선택하게되므로 우발적인 이름 충돌이 불가능합니다.
+>모듈 및 네임스페이스에 대한 자세한 내용은 네임스페이스 및 모듈을 참조하십시오.
-거꾸로
+===== Red Flags =====
+다음은 모두 모듈 구조화를위한 적색 플래그입니다. 이 중 하나라도 파일에 적용되는 경우 외부 모듈의 네임 스페이스를 시도하지 않는지 다시 확인하십시오.
+  * 최상위 선언 만 ''export namespace Foo {...}'' (''Foo''를 제거하고 모든 것을 'up' 레벨)
+  * 동일한 ''export namespace Foo {''최상위 수준에있는 여러 파일 (이 파일이 하나의 ''Foo''에 결합되지 않을 것이라고 생각하지 마십시오!)

GaramX

사용자 도구

사이트 도구

차이

문서 도구