네임스페이스 적용하기

전역 네임스페이스에 다른 이름을 많이 넣는 대신, 객체들을 하나의 네임스페이스로 감싸겠습니다.

이 예에서는 유효성 검사기 관련 객체를 Validation 이라는 하나의 네임스페이스로 옮기겠습니다. 여기서 인터페이스 및 클래스가 네임스페이스 외부에서도 접근 가능하도록 선언부에 export 를 붙입니다.

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

사용

// 시도해 볼 샘플
let strings = ["Hello", "98052", "101"];

// 사용할 검사기
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

// 각 문자열이 각 검사기를 통과했는지 표시
for (let s of strings) {
    for (let name in validators) {
        console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
    }
}

<aside> 💡 아래 글에서 네임스페이스를 안티 패턴으로 설명한다.

</aside>

10++ TypeScript Pro tips/patterns with (or without) React

파일 간 분할

다중 파일 네임스페이스

여기서 Validation 네임스페이스를 여러 파일로 분할합니다. 파일이 분리되어 있어도 네임스페이스에 기여할 수 있고 마치 한 곳에서 정의 된 것처럼 사용할 수 있습니다. 파일 간 의존성이 존재하므로, 참조 태그를 추가하여 파일 간의 관계를 알립니다.

Validation.ts

namespace Validation{
    export interface StringValidator{
        isAcceptable(s: string): boolean;
    }
}

LettersOnlyValidators.ts

/// <reference path="Validation.ts" />
namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}