Clientside Javascript in Typescript Express projects

user_3924219 0
Viewed 5121

I always wondered how I can properly add the clientsided javascript in 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 javascripts.

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 to (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 transpiling 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 missing some pretty important stuff, but I couldn't find any tutorials about it.

My question:

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

typescript express node.js
1 Answers

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.
user_46120640
Related