Basic Typescript Web App

Question

I am trying to pass a typescript variable to a html page.

All the code is on github and running on gh-pages.

I am following a short example here on Typescriptlang.org

This should allow me to put a typescript variable into a DOM but it isn't working.

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

If this isn't possible it is possible to put a template variable in the DOM? Such as might be done with Angular2+,

{{ variable }}

The actual error I get it,

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at app.ts:71
(anonymous) @ app.ts:71

Which possibly means I am running the code before the DOM is constructed.

Trying to get a variable from the app.ts file to show in the html after compiling to app.js — Shane G, Jan 06 '18 at 21:42
The error I get is Uncaught TypeError: Cannot set property 'innerHTML' of null at app.ts:71 (anonymous) @ app.ts:71 — Shane G, Jan 06 '18 at 23:13

Shane G · Accepted Answer · 2018-01-06T23:32:17.863

I got the answer from here

Using window.onload I can load the DOM first and then call the js code,

app.ts

window.onload = function() {
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
}

I was trying to do something simple like this,

window.onload = function() {

let user: string = "Jane";
let sentence: string = `${user} is super
totally cool!`;

document.body.innerHTML = "<p><strong>" + sentence + "</strong></p>";
}

Basic Typescript Web App

1 Answers1