Include TypeScript into webpage that uses multiple components
up vote
1
down vote
favorite
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 at 5:58
cameraguy258
1184
add a comment |
up vote
1
down vote
favorite
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 at 5:58
cameraguy258
1184
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 at 5:58
cameraguy258
1184
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 at 5:58
cameraguy258
1184
asked Nov 14 at 5:58
cameraguy258
1184
edited Nov 14 at 6:06
asked Nov 14 at 5:58
cameraguy258
1184
asked Nov 14 at 5:58
cameraguy258
1184
asked Nov 14 at 5:58
cameraguy258
1184
1184
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16
add a comment |
Please add yourtsconfig.jsonto the question, it will make answering much easier.
– Cerberus
Nov 14 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
Well, then how do you compile these files? Justtsc <filenames>, without any additional options?
– Cerberus
Nov 14 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16
Please add your
tsconfig.json to the question, it will make answering much easier.– Cerberus
Nov 14 at 6:00
Please add your
tsconfig.json to the question, it will make answering much easier.– Cerberus
Nov 14 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 at 7:01
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16
add a comment |
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 at 6:00
@Cerberus edited post.
– cameraguy258
Nov 14 at 6:07
Well, then how do you compile these files? Just
tsc <filenames>, without any additional options?– Cerberus
Nov 14 at 7:01
Possible duplicate of How to transpile typescript for the client
– Matt McCutchen
Nov 14 at 15:09
Yes, just tsc <filename> @Cerberus
– cameraguy258
Nov 14 at 18:16