Include TypeScript into webpage that uses multiple components
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have a TypeScript file that looks a little something like this:
myTypescript.ts
import MyFirstClass from "./MyFirstClass"
import AnotherClass from "./AnotherClass"
import MyThirdClass from "./MyThirdClass"
var test = new MyFirstClass();
// some more code
MyFirstClass.ts
export class MyFirstClass
constructor()
Here is what myTypescript.ts compiles to:
1 | "use strict";
2 | exports.__esModule = true;
3 | var MyFirstClass_1 = require("./MyFirstClass");
4 | // more classes included
And the HTML that includes the main (compiled) typescript:
index.html
<html>
<head></head>
<body>
<h1>Hello world</h1>
<script src="MyTypescript.js"></script>
</body>
</html>
But going to localhost:8080 shows this in the console:
Uncaught ReferenceError: exports is not defined at myTypescript.js:2
and commenting out that second line just yields another error:
Uncaught ReferenceError: require is not defined at myTypescript.js:3
Perhaps my assumption that TypeScript can simply be compiled into JS is erroneous. I've written half a dozen custom classes, similar to how I would in Java, hoping it would just compile into JS nicely.
Is my code still usable in-browser? I've tried some of the solutions posted on StackOverflow, but they are a little vague, and don't address the custom classes being includes. Thanks in advance!
I'm a little unfamiliar with how the tsconfig file works, so I don't actually have one.
typescript
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
add a comment |
I have a TypeScript file that looks a little something like this:
myTypescript.ts
import MyFirstClass from "./MyFirstClass"
import AnotherClass from "./AnotherClass"
import MyThirdClass from "./MyThirdClass"
var test = new MyFirstClass();
// some more code
MyFirstClass.ts
export class MyFirstClass
constructor()
Here is what myTypescript.ts compiles to:
1 | "use strict";
2 | exports.__esModule = true;
3 | var MyFirstClass_1 = require("./MyFirstClass");
4 | // more classes included
And the HTML that includes the main (compiled) typescript:
index.html
<html>
<head></head>
<body>
<h1>Hello world</h1>
<script src="MyTypescript.js"></script>
</body>
</html>
But going to localhost:8080 shows this in the console:
Uncaught ReferenceError: exports is not defined at myTypescript.js:2
and commenting out that second line just yields another error:
Uncaught ReferenceError: require is not defined at myTypescript.js:3
Perhaps my assumption that TypeScript can simply be compiled into JS is erroneous. I've written half a dozen custom classes, similar to how I would in Java, hoping it would just compile into JS nicely.
Is my code still usable in-browser? I've tried some of the solutions posted on StackOverflow, but they are a little vague, and don't address the custom classes being includes. Thanks in advance!
I'm a little unfamiliar with how the tsconfig file works, so I don't actually have one.
typescript
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 '18 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 '18 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16
add a comment |
I have a TypeScript file that looks a little something like this:
myTypescript.ts
import MyFirstClass from "./MyFirstClass"
import AnotherClass from "./AnotherClass"
import MyThirdClass from "./MyThirdClass"
var test = new MyFirstClass();
// some more code
MyFirstClass.ts
export class MyFirstClass
constructor()
Here is what myTypescript.ts compiles to:
1 | "use strict";
2 | exports.__esModule = true;
3 | var MyFirstClass_1 = require("./MyFirstClass");
4 | // more classes included
And the HTML that includes the main (compiled) typescript:
index.html
<html>
<head></head>
<body>
<h1>Hello world</h1>
<script src="MyTypescript.js"></script>
</body>
</html>
But going to localhost:8080 shows this in the console:
Uncaught ReferenceError: exports is not defined at myTypescript.js:2
and commenting out that second line just yields another error:
Uncaught ReferenceError: require is not defined at myTypescript.js:3
Perhaps my assumption that TypeScript can simply be compiled into JS is erroneous. I've written half a dozen custom classes, similar to how I would in Java, hoping it would just compile into JS nicely.
Is my code still usable in-browser? I've tried some of the solutions posted on StackOverflow, but they are a little vague, and don't address the custom classes being includes. Thanks in advance!
I'm a little unfamiliar with how the tsconfig file works, so I don't actually have one.
typescript
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
I have a TypeScript file that looks a little something like this:
myTypescript.ts
import MyFirstClass from "./MyFirstClass"
import AnotherClass from "./AnotherClass"
import MyThirdClass from "./MyThirdClass"
var test = new MyFirstClass();
// some more code
MyFirstClass.ts
export class MyFirstClass
constructor()
Here is what myTypescript.ts compiles to:
1 | "use strict";
2 | exports.__esModule = true;
3 | var MyFirstClass_1 = require("./MyFirstClass");
4 | // more classes included
And the HTML that includes the main (compiled) typescript:
index.html
<html>
<head></head>
<body>
<h1>Hello world</h1>
<script src="MyTypescript.js"></script>
</body>
</html>
But going to localhost:8080 shows this in the console:
Uncaught ReferenceError: exports is not defined at myTypescript.js:2
and commenting out that second line just yields another error:
Uncaught ReferenceError: require is not defined at myTypescript.js:3
Perhaps my assumption that TypeScript can simply be compiled into JS is erroneous. I've written half a dozen custom classes, similar to how I would in Java, hoping it would just compile into JS nicely.
Is my code still usable in-browser? I've tried some of the solutions posted on StackOverflow, but they are a little vague, and don't address the custom classes being includes. Thanks in advance!
I'm a little unfamiliar with how the tsconfig file works, so I don't actually have one.
typescript
typescript
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
edited Nov 14 '18 at 6:06
cameraguy258
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
asked Nov 14 '18 at 5:58
cameraguy258cameraguy258
24210
24210
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 '18 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 '18 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16
add a comment |
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 '18 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 '18 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16
Please add your
tsconfig.json to the question, it will make answering much easier.– Cerberus
Nov 14 '18 at 6:00
Please add your
tsconfig.json to the question, it will make answering much easier.– Cerberus
Nov 14 '18 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 '18 at 7:01
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 '18 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293985%2finclude-typescript-into-webpage-that-uses-multiple-components%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293985%2finclude-typescript-into-webpage-that-uses-multiple-components%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please add your
tsconfig.jsonto the question, it will make answering much easier.– Cerberus
Nov 14 '18 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 '18 at 6:07
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 '18 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 '18 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 '18 at 18:16