GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » namespace
추적: • mixins • destructuring • apt • javascript • regexp • namespace
typescript:namespace

목차

Namespace

Table of contents

  • Introduction First steps
    • Validators in a single file
  • Namespacing
    • Namespaced Validators
  • Splitting Across Files
    • Multi-file namespace
  • Aliases
  • Working with Other JavaScript Libraries
    • Ambient Namespaces
용어에 대한 참고사항 : TypeScript 1.5에서는 명명법이 변경되었음을 유의해야합니다. “내부 모듈”은 이제 “네임 스페이스”입니다. “외부 모듈”은 이제 ECMAScript 2015의 용어 (즉, 모듈 X {는 현재 선호되는 네임 스페이스 X {와 동등합니다)와 일치하도록 단순히 “모듈”입니다.

Introduction

이 게시물은 TypeScript에서 네임스페이스 (이전의 “내부 모듈”)를 사용하여 코드를 구성하는 다양한 방법을 설명합니다. 우리가 용어에 대해 언급 할 때 “내부 모듈”은 이제 “네임 스페이스”로 언급됩니다. 또한 내부 모듈을 선언 할 때 module 키워드가 사용 된 곳이면 어디에서나 namespace 키워드를 사용할 수 있고 대신 사용해야합니다. 이렇게하면 비슷한 이름의 용어로 오버로드함으로써 새로운 사용자를 혼란스럽게하는 것을 방지 할 수 있습니다.

First steps

이 페이지에서 예제로 사용할 프로그램부터 시작하겠습니다. 웹 페이지의 양식에 대한 사용자의 입력을 확인하거나 외부에서 제공되는 데이터 파일의 형식을 확인하기 위해 작성할 수있는 것처럼 단순한 문자열 유효성 검사기를 작성했습니다.

Validators in a single file

interface StringValidator {
    isAcceptable(s: string): boolean;
}
 
let lettersRegexp = /^[A-Za-z]+$/;
let numberRegexp = /^[0-9]+$/;
 
class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
        return lettersRegexp.test(s);
    }
}
 
class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
 
// Some samples to try
let strings = ["Hello", "98052", "101"];
 
// Validators to use
let validators: { [s: string]: StringValidator; } = {};
validators["ZIP code"] = new ZipCodeValidator();
validators["Letters only"] = new LettersOnlyValidator();
 
// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        let isMatch = validators[name].isAcceptable(s);
        console.log(`'${ s }' ${ isMatch ? "matches" : "does not match" } '${ name }'.`);
    }
}

Namespacing

우리가 더 많은 검증자를 추가함에 따라, 우리는 우리의 유형을 추적하고 다른 객체와의 이름 충돌에 대해 걱정할 필요가 없도록 일종의 조직 체계를 원할 것입니다. 전역 이름 공간에 다른 이름을 많이 사용하는 대신 개체를 이름 공간으로 마무리합시다.

이 예제에서는 모든 유효성 검사기 관련 엔터티를 유효성 검사라는 네임 스페이스로 이동합니다. 우리가 여기서 인터페이스와 클래스를 네임 스페이스 외부에서 볼 수 있기를 원하기 때문에 우리는 그것들을 export로 시작한다. 반대로 lettersRegexp 및 numberRegexp 변수는 구현 세부 사항이므로 unexported 상태로 유지되며 네임 스페이스 외부의 코드에는 표시되지 않습니다. 파일의 맨 아래에있는 테스트 코드에서 네임 스페이스 외부에서 사용할 때 유형의 이름을 한정해야합니다, 예 : Validation.LettersOnlyValidator.

Namespaced Validators

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
 
    const lettersRegexp = /^[A-Za-z]+$/;
    const numberRegexp = /^[0-9]+$/;
 
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
 
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
 
// Some samples to try
let strings = ["Hello", "98052", "101"];
 
// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();
 
// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
    }
}

Splitting Across Files

응용 프로그램이 커짐에 따라 코드를 여러 파일로 분할하여 유지 관리하기 쉽게 만들려고합니다.

Multi-file namespaces

여기에서는 유효성 검사 네임 스페이스를 여러 파일로 분할합니다. 파일은 별개이지만 각각 동일한 네임 스페이스에 기여할 수 있으며 모든 파일이 한 곳에서 정의 된 것처럼 사용할 수 있습니다. 파일 간에는 종속성이 있으므로 컴파일러에서 파일 간의 관계를 알 수 있도록 참조 태그를 추가합니다. 테스트 코드는 변경되지 않습니다.

Validation.ts
namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}
LettersOnlyValidator.ts
/// <reference path="Validation.ts" />
namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}
ZipCodeValidator.ts
/// <reference path="Validation.ts" />
namespace Validation {
    const numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
Test.ts
/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
 
// Some samples to try
let strings = ["Hello", "98052", "101"];
 
// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();
 
// Show whether each string passed each validator
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
    }
}

여러 파일이 포함되면 컴파일 된 코드가 모두로드되는지 확인해야합니다. 이 작업에는 두 가지 방법이 있습니다.

먼저 –outFile 플래그를 사용하여 연결된 출력을 사용하여 모든 입력 파일을 단일 JavaScript 출력 파일로 컴파일 할 수 있습니다. 

tsc --outFile sample.js Test.ts

컴파일러는 파일에있는 참조 태그를 기반으로 출력 파일을 자동으로 정렬합니다. 각 파일을 개별적으로 지정할 수도 있습니다. 

tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts

또는 파일 별 컴파일 (기본값)을 사용하여 각 입력 파일에 대해 하나의 JavaScript 파일을 내보낼 수 있습니다. 여러 개의 JS 파일이 생성되면 웹 페이지에서 <script> 태그를 사용하여 내보내는 각 파일을 적절한 순서로로드해야합니다.

예 :

MyTestPage.html (excerpt)
    <script src="Validation.js" type="text/javascript" />
    <script src="LettersOnlyValidator.js" type="text/javascript" />
    <script src="ZipCodeValidator.js" type="text/javascript" />
    <script src="Test.js" type="text/javascript" />

Aliases

네임스페이스 작업을 단순화 할 수 있는 또 다른 방법은 import q = x.y.z를 사용하여 일반적으로 사용되는 개체의 짧은 이름을 만드는 것입니다. 모듈을로드하는 데 사용되는 import x = require(“name”) 구문과 혼동하지 말고,이 구문은 지정된 심볼에 대한 별칭을 만듭니다. 모듈 가져 오기에서 만든 객체를 비롯하여 모든 종류의 식별자에 대해 이러한 종류의 가져 오기 (일반적으로 별칭이라고 함)를 사용할 수 있습니다. 

namespace Shapes {
    export namespace Polygons {
        export class Triangle { }
        export class Square { }
    }
}
 
import polygons = Shapes.Polygons;
let sq = new polygons.Square(); // Same as 'new Shapes.Polygons.Square()'

require 키워드는 사용하지 않습니다. 대신 우리는 가져 오는 심볼의 정규화 된 이름에서 직접 할당합니다. 이것은 var를 사용하는 것과 비슷하지만 가져온 심볼의 유형과 네임 스페이스 의미에 대해서도 작동합니다. 중요하게, 값의 경우 import는 원래 기호와 별개의 참조이므로 별칭이 지정된 var에 대한 변경 사항이 원래 변수에 반영되지 않습니다.

Working with Other JavaScript Libraries

TypeScript로 작성되지 않은 라이브러리의 모양을 설명하려면 라이브러리가 노출하는 API를 선언해야합니다. 대부분의 JavaScript 라이브러리는 몇 개의 최상위 수준 객체 만 노출하므로 네임 스페이스는 객체를 표현할 수있는 좋은 방법입니다.

구현을 “ambient”으로 정의하지 않는 선언을 호출합니다. 일반적으로 .dts 파일에 정의되어 있습니다. C/C++에 익숙하다면이 파일을 .h 파일로 생각할 수 있습니다. 몇 가지 예를 살펴 보겠습니다.

Ambient Namespaces

인기있는 라이브러리 D3은 d3이라는 전역 개체에서 해당 기능을 정의합니다. 이 라이브러리는 (모듈 로더 대신) <script> 태그를 통해 로드되기 때문에 이 선언은 네임스페이스를 사용하여 모양을 정의합니다. TypeScript 컴파일러가 이 모양을 보려면 ambient namespace 선언을 사용합니다. 예를 들어 다음과 같이 작성할 수 있습니다.

D3.d.ts (simplified excerpt)
declare namespace D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }
 
    export interface Event {
        x: number;
        y: number;
    }
 
    export interface Base extends Selectors {
        event: Event;
    }
}
 
declare var d3: D3.Base;
typescript/namespace.txt · 마지막으로 수정됨: 2025/04/15 10:05 저자 127.0.0.1

문서 도구