[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to take the output and use SystemJS as the module loader so that you can use the files in your browser.

To use system.js, first create a index.html, add system.js file from npmcdn:

https://npmcdn.com/[email protected]/

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://npmcdn.com/[email protected]/dist/system.js"></script>
</head>
<body>

<script>
    System.config({
        packages: {
            "dist": {
                "defaultExtension": "js",
                "main": "main"
            }
        }
    });

    System.import("dist")
</script>
</body>
</html>

It tell System to load the packages. Serve "dist" folder, use default extension as js, and the main entry file is main.js. Then import dist folder.

Start a server:

http-server -c-1  // -c-1 -> no cache

Run:

tsc -w

To prove it do work in broswer, add console log in the code:

//main.ts

import {Two} from './two';

class Person{
    constructor(){
        console.log("Person!");
    }
}

new Two();
new Person();


// tow.ts
export class Two{
    constructor(){
        console.log("Two");
    }
}

[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

猜你喜欢