基本 Typescript Web 应用程序答案

【问题标题】：Basic Typescript Web App基本 Typescript Web 应用程序
【发布时间】：2018-06-16 07:18:58
【问题描述】：

我正在尝试将 typescript 变量传递给 html 页面。

所有代码都在github 上并在gh-pages 上运行。

我正在关注Typescriptlang.org 上的一个简短示例here

这应该允许我将 typescript 变量放入 DOM，但它不起作用。

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

如果这不可能，是否可以在 DOM 中放置一个模板变量？比如可以用Angular2+，

{{ variable }}

我得到的实际错误，

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

这可能意味着我在构建 DOM 之前运行代码。

【问题讨论】：

尝试从 app.ts 文件中获取变量以在编译为 app.js 后显示在 html 中
我得到的错误是 Uncaught TypeError: Cannot set property 'innerHTML' of null at app.ts:71 (anonymous) @ app.ts:71
为什么有人要对此投反对票？

标签： html typescript dom

【解决方案1】：

我从here得到了答案

使用window.onload可以先加载DOM再调用js代码，

app.ts

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

let user = "Jane User";

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

我试图做一些像这样简单的事情，

window.onload = function() {

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

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

【讨论】：