Clientside Javascript in Typescript Express projects

Question

I always wondered how I could properly add client-side JavaScript to my express project. I use Typescript and I would also like to take advantage of the Typescript typings (for jQuery for instance) when writing my clientside javascript.

My project structure looks like this:

• root
  • dist
  • src
    • helpers
    • models
    • registration
      • router.ts
      • form.pug
    • profile
      • router.ts
      • profile.pug
  • wwwroot
    • css
    • js
    • images

What I have done until today:

I created all clientsided javascript files in wwwroot/js (e.g. jquery.min.js, registration-form.js) and I loaded them into the header of the appropriate pages.

Disadvantages:

1. I had to write ES5 javascript which is compatible with the browsers we would like to support
2. I couldn't put the javascript files where they logically belong (e. g. I'd rather put my registration-form.js into src/registration/ instead of the wwwroot)
3. No Typescript possible :(. No typescript typings, no transpiring to ES5, etc.

In some tutorials I saw they would simply run npm install --save jquery and import it in their clientsided files. So I feel like I must have missed some pretty important stuff, but I couldn't find any tutorials about it.

My question:

What is the "right way / best practice" to write client-sided javascript in Typescript / Express applications (which should also eliminate the mentioned disadvantages)?

Answer 1

Using TypeScript on the client side is not much different from the server side.

Here is what you can do:

• Create client folder for client-side typescript sources
• Put tsconfig.json into client folder and configure it to produce "es5" code (target: es5)
• Install jquery types (npm install --save-dev @types/jquery)

That's it, now you can write your client side code in TypeScript.

You can compile server-side code with tsc -p ./src (having server-side tsconfig.json under src) and compile client-side code with tsc -p ./client.

I made a simple example of such app, check it here. I put the simple script to build everything into package.json, so you can run npm run-script complie to get both server and client code complied into /dist folder. Then run it with npm start.

Further steps:

• Automate your flow: you should be able to start your app locally and then just edit source TypeScript files and the app should be reloaded automatically. This can be done with webpack / gulp / grunt or custom shell script that can be triggered once any of your source file has been changed and saved.
• If you find yourself writing good amount of client-side code, check also angular (https://angular.io/docs). It uses TypeScript as preferred language for client-side development and you'll be able to build much more powerful client-side app using it. You may choose another library as well (react, vue.js, etc), see the examples on the TypeScript site.