Clientside Javascript in Typescript Express projects

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.