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
Next part: Browserify TypeScript