• 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 {와 동등합니다)와 일치하도록 단순히 “모듈”입니다.

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

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

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 }'.`);
    }
}

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

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

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 }`);
    }
}

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

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

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" />