Jump to content
  • Advertisement
  • entries
    23
  • comments
    12
  • views
    1967

A few TypeScript files on Sandbox

8Observer8

985 views

There is a few TypeScript files in our example. We want to place these scripts on Sandbox.

This is the result on the Sandbox: click. Open the debug console in your browser to see the result: "Ctrl+Shift+J" in Chrome.

You will see in the debug console this messages:

Quote

Rectangle was created
Rectangle was drawn

Create these files on Sandbox: https://plnkr.co/edit/

Program.ts

import { Rectangle } from "./Rectangle";

export class Program
{
    public static Main(): void
    {
        // Create a rectangle
        let rectangle = new Rectangle();

        // Draw the rectangle
        rectangle.Draw();
    }
}
Program.Main();

Rectangle.ts

export class Rectangle
{
    public x: number;
    public y: number;

    public constructor(x: number = 0, y: number = 0)
    {
        /* ... */
        console.log("Rectangle was created");
    }

    public Draw(): void
    {
        /* ... */
        console.log("Rectangle was drawn");
    }
}

We need to compile these files to AMD. For this, create the "tsconfig.json" file on the Sandbox:

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "outDir": ".",
        "sourceMap": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        ""
    ]
}

Create the RequereConfig.ts file on the Sandbox:

RequireConfig.ts

requirejs.config({
    baseUrl: "."
});

requirejs(["Program"], (Program) =>
{

});

Add "require.min.js" in the "index.html" file:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>A few TypeScript files on sandbox</title>
    <script data-main="RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>

<body>
    <h3>See the console output. Press "Ctrl+Shiprt+J" in the Chrome browser.</h3>
</body>

</html>

This is the result on the Sandbox: click. Open the debug console in your browser to see the result: "Ctrl+Shift+J" in Chrome.

You will see in the debug console this messages:

Quote

Rectangle was created
Rectangle was drawn

 

P.S. If you need to work locally you need to run these commands:

npm init -y
npm i -D @types/requirejs

P.S.S. Read this book to learn more about AMD and RequireJS: Mastering TypeScript - 2nd Edition - Nathan Rozentals



1 Comment


Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!