이것만 하면 돼!Type Script를 잡기 어려운 Import를 위한 사람

2013-11-15에서 Qita에 기고한 글의 아카이브다.본문의 링크가 때때로 실행되지 않습니다.
(2014/6/1 추기) 이 글은 TypeScript에 대한 지식이 많지 않을 때 망령되게 쓴 글로, TypeScriptimport는 클라이언트(브라우저)와 서버 측(Node.js 등 CommonJS)에 대한 해석이 다르기 때문에 컴파일러tsc에 대한 옵션 지시가 필요하다.다음 본문에서 '컴파일러 옵션을 주지 않으면 욕을 먹는다' 는 것은 고객을 대상으로 하는 정보와 서버를 대상으로 하는 정보를 혼합한 잘못된 결과이다.
다음은 클라이언트가 import를 사용할 때 쓴 오래된 글입니다.평론란에도 유용한 정보가 있으니 함께 참조하세요.
TypeScript에 따라 JavaScript도 쓰기 쉬워졌습니다.OOP로서 전역 변수와 정적 함수를 극력 줄이고 싶지만 jQuery 등 자바스크립트 자산을 동시에 사용하면 안 된다.
따라서 네임스페이스에 해당하는 타입 스크립트module를 활용해 스마트하게 소스 파일을 개별적으로 관리하자.

모듈을 사용할 때의 문제점

에 반하다.처음에는 뭘 해야 할지 전혀 몰랐어요.

조금export이나 import인 것 같아요.

검색에 나오는 고마운 정보에 따라 시도해도 컴파일러에게 마구 욕을 먹는다.

실재module()와 require()의 규격이 모두 미묘해서 앞으로 어떻게 될지 저도 잘 모르겠어요.컴파일러를 선택하지 않으면 욕먹는 등 사용하기도 불편하다는 인상을 준다.

해결책

네 번째 구절은 고사하고 읽었다방정식 문서(PDF)'10.3 Import Decllations'는 단번에 해결됐다.실험을 반복했기 때문에 결과를 기록해 두세요.

module 사용 성명.

외부 파일에서 사용하고 싶은 파일(클래스, 함수, 변수, 인터페이스 등)에 선포export.

모듈 외 또는 기타 모듈 내에서 사용import 호출.

module()와require() 모두 사용하지 않습니다.

moduleA.ts

module modA {
    export class clsA {
        
        n: number;
        
        constructor(n: number)
        {
            this.n = n;
        }
        
        times(x: number): number
        {
            return this.n * x;
        }
    }
}

moduleB.ts

/// <reference path="moduleA.ts"/>

module modB {
    import clsA = modA.clsA;
    
    export function run(): void
    {
        var obj: clsA     = new clsA(5);
        var times: number = obj.times(2);
        alert(String(times));
    }
}

modB.run();

타입 스크립트 경험이 있는 사람이라면 위의 소스가 뭘 하는지 이해할 수 있을 것 같아요.import할 때는 사실import clsA = modA.clsA;만으로도 충분했고 복잡한 것을 사용하지 않았다require().
참고로 이것import은 후술한 js장도 알 수 있는 것처럼 다만var.

주의점

module 전체를 exportexport module로 진행하려면 욕을 먹는다.require() 이런 상황에서 의미가 있는 것 같지만 범위를 좁히는 의미에서 각 함수, 유형export 선언은 이해하기 쉽다.다른 언어로public와private를분리해서사용하는느낌.
TypeScript 언어 규격에도 private가 있지만 그것은 컴파일러에 대한 지시입니다. js가 변환되면 어디에서든 불릴 수 있기 때문에 제한 범위module와 export의 조합이 좋다고 생각합니다.

덤

마지막으로 이것을 자바스크립트로 변환한 후 소스를 붙인다.
run.js

var modA;
(function (modA) {
    var clsA = (function () {
        function clsA(n) {
            this.n = n;
        }
        clsA.prototype.times = function (x) {
            return this.n * x;
        };
        return clsA;
    })();
    modA.clsA = clsA;
})(modA || (modA = {}));

/// <reference path="moduleA.ts"/>
var modB;
(function (modB) {
    var clsA = modA.clsA;

    function run() {
        var obj = new clsA(5);
        var times = obj.times(2);
        alert(String(times));
    }
    modB.run = run;
})(modB || (modB = {}));

modB.run();

대단하다.
TypeScript의 유형 선언도 요약되어 있습니다.