SystemJs로 브라우저에서 Typescript 작성

(이 게시물은 내 작업 중 일부의 부작용에 대한 대략적인 공개 참고 사항일 뿐입니다. 도움이 될 수도 있고 그렇지 않을 수도 있습니다 :) )

Typescript를 좋아하고 그것을 사용하여 가지고 놀고 싶은 간단한 장난감 HTML 사이트를 강화하고 싶습니까? SystemJ와 약간의 즉석 브라우저 컴파일을 사용하면 가능합니다.

항상 멋진 설정이 필요한 것은 아닙니다. :P

데모 Index.html + Typescript 파일

Typescript 파일을 작성하고 Index.html 파일에서 메서드를 사용하는 방법을 보여주는 이 데모Plunker를 확인하십시오.

예, 이렇게 하려면 SystemJs 구성 설정을 올바르게 설정해야 하지만 쉽게 시작할 수 있도록 데모AG Grid에 사용한 이 스타터를 공유하는 이유입니다.

System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: "ts",
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            target: "es5",
            module: "system", //gets rid of console warning
            moduleResolution: "node",
            sourceMap: false,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            lib: ["es2015", "dom"],
            noImplicitAny: true,
            suppressImplicitAnyIndexErrors: true
        },
        meta: {
            typescript: {
                exports: "ts"
            },
            '*.css': { loader: 'css' }
        },

systemjs.config.js 파일을 제외하고 코드의 주요 부분은 다음과 같습니다.

<script src="https://unpkg.com/[email protected]/dist/system.js">        </script>
<script src="systemjs.config.js"></script>
<script>
  System.import('./main.ts')
        .catch(function(err) { console.error(err); });
</script>

메서드를 창 범위에 연결하여 HTML에서 호출할 수 있도록 합니다. (이 작업은 일반 Javascript 파일을 사용할 때 자동으로 수행됩니다.)

<button onclick="onBtExcludeMedalColumns()">Exclude Medal Columns</button>

// Attach external event handlers to window so they can be called from index.html
(<any>window).onBtExcludeMedalColumns = onBtExcludeMedalColumns;

그 정도야!

(이 게시물은 내 작업 중 일부의 부작용에 대한 대략적인 공개 참고 사항일 뿐입니다. 도움이 될 수도 있고 그렇지 않을 수도 있습니다 :) )