Bootstrap standalone TypeScript project

Question

I'd like to bootstrap a TypeScript project that would be transpiled to standalone vanilla *.js file. I'm looking of best tools to accomplish this.

1. Is it possible to embed / concat all required dependencies in this file ?

2. Is it possible to embed HTML templates in it ?

3. Similarly is it possible to embedd CSS files and use them ?

Answer 1

By itself TypeScript (I mean simply the NPM typescript package) transpiles TS code into JS code, nothing more. Eventually is possible to output the transpiled JS into 1 single file via the compilerOptions.outFile option in tsconfig.json.

About questions 2 and 3, whereas it's possible to embed an HTML template in TS (at the end of the day it's just a JS function), TS has no native capability of handling HTML templates or CSS, that is, it can't load and parse HTML with Mustache syntax. Of course you can support them but adding some templating libraries and eventually some building tool (i.e. webpack, rollup, etc.).

There exists several TS bootstrapping options, for example if you just want to create a TS lib, without HTML templates or CSS, you can use TSDX, but it appears you want to go out of Typescript domain into a front-end framework and here you have an entire world of options, for example VueJS has support for TS and it can bootstrap a project running:

# It will ask you if you want to use TS
vue create my-ts-project

If you don't want to use a framework, you must integrate an HTML templating library like MustacheJS on your own. But this really depends on your specific needs.