Is it possible to use typescript inside html file?

JavaScript
1

iam not creating huge site or api or whatever so i dont wanna use exteranal file.
iam doing everything in one file, in html file.
the html, css and js.
decided to try that with ts, it seem to not work tho.
is there a way to use it inside html file?

2

Hello there~!

Browsers cannot read TypeScript. It needs to be compiled into JavaScript in order for it to work in the browser. So, unfortunately, you cannot inject TypeScript into your HTML file.

3

The correct way would be to use tsc and compile your TS files to JS and then use them in the html.

But if you really, really want to do the compilation in the browser, then there is a babel-standalone that could be used exactly for that. Just remember that it’s very inefficient and shouldn’t be used on production sites.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      interface User {
        name: string;
      }

      const user: User = {
        name: 'bob',
      };

      console.log(user);
    </script>
  </head>
  <body></body>
</html>
1 Like
4

hmm… i dont want to inject.
i want to write it on .html file
cuz its not a big assigment or anything, so… no real reason to use more than one file for it.

5

I’m not sure how well that would work with the TypeScript compiler. I would strongly recommend separating your files if you want to use TypeScript. :slight_smile:

6

Browsers only understand one programming language (JavaScript). If you use a different programming language, they cannot understand it. You need to compile that language to something they do understand (JS), you can’t get around this.

8

thanks alot mate, do i need to find the

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

on my machine derectory? cuz this one doesnt work.

9

wait but ts is complied into js regadless, the ts thing is for the programmer.

10

i get it, its not recomanded for huge project or at professional place.
but hmm… its just pretty short home work assignment.
latter on ofc i’ll use separately.

11

The index.html file in my post is complete. You can copy/paste it and open in browser.

12

TS is a language. It’s a superset of JS, but it’s still a language, and it is a compiled language (it needs to be converted to executable code to be ran). It is based on (and is designed specifically to compile to) JS. Because of that, as long as you are careful about how you write your code, a tool like Babel (which does not understand Typescript) can be used to strip out the Typescript-specific syntax and just leave JavaScript.

You can compile almost any reasonably popular language to JS, that doesn’t mean those languages work in the browser

13

idk… in my vsc it still falgs the ts stuff, saying i cant use them.
ofc at the browser it all works fine, thanks anyways.

14

alright… thanks man i see what you mean.

15

Of course VSCode will complain, because TS is not supposed to be used that way.

You can extract TS code into separate .ts file and import it in <script type="text/babel" src="your-ts-file.ts></script>. Then you’ll get proper syntax support in VSCode.

TS implies using of compilation/build step, so the stuff you’re trying to achieve is honestly just a waste of time.