Migrating JavaScript to TypeScript in ASP.NET MVC Projects

Introduction Many legacy ASP.NET MVC applications rely on JavaScript for client-side behavior. While JavaScript is flexible, it lacks the static typing and development-time tooling that modern TypeScript provides. Migrating to TypeScript can significantly improve code maintainability, reduce bugs, and enhance developer productivity. This report explores how to incrementally adopt TypeScript in an existing ASP.NET MVC project, including recommended practices and tooling.

Getting Started

1. Install TypeScript
   • Install globally or as a dev dependency:

     npm install -D typescript
     

2. Create a tsconfig.json

   {
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "outDir": "wwwroot/js",
       "rootDir": "Scripts/ts",
       "strict": true,
       "esModuleInterop": true
     }
   }
   

3. Directory Structure Suggestion
   • Scripts/js/ → legacy JavaScript files
   • Scripts/ts/ → new TypeScript files
   • wwwroot/js/ → compiled JavaScript output

Integrating with ASP.NET MVC Views

• Compile .ts files to .js and reference them in your Razor views just like normal JavaScript files.
• Use bundling/minification tools such as Bundler & Minifier or integrate with Webpack (see below).

Incremental Migration Strategy

1. Start with TypeScript-Compatible JavaScript
   • Rename .js files to .ts and fix immediate type issues.
   • Use @ts-ignore where absolutely necessary to suppress errors temporarily.
2. Add Types Gradually
   • Leverage any for legacy code where typing is unclear.
   • Introduce interfaces and types as you refactor or touch code.
3. Use Declaration Files
   • Install type definitions for third-party libraries:

     npm install -D @types/jquery @types/bootstrap
     

Optional: Webpack Integration For better asset bundling and live reload:

1. Install Webpack and Loaders

   npm install -D webpack webpack-cli ts-loader
   

2. Example webpack.config.js

   module.exports = {
     entry: './Scripts/ts/app.ts',
     module: {
       rules: [
         {
           test: /\.ts$/,
           use: 'ts-loader',
           exclude: /node_modules/
         }
       ]
     },
     resolve: {
       extensions: ['.ts', '.js']
     },
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'wwwroot/js')
     }
   };
   

Challenges & Tips

• Legacy jQuery Usage: Use type declarations and gradually refactor jQuery-heavy code.
• Global Variables: Declare global types or refactor to modules.
• Razor View Conflicts: Avoid mixing complex inline scripts with TypeScript logic.

Conclusion Migrating from JavaScript to TypeScript in ASP.NET MVC projects brings substantial long-term benefits. With careful planning, it can be done incrementally without disrupting existing functionality. Leveraging modern build tools like Webpack can further streamline the process and improve maintainability. This approach ensures your frontend stack evolves alongside your backend, enabling a modern and scalable web application architecture.

Notes: This is also a key part in the endeavor of migrating the Voky project, wherein we try to move from JQuery and pure Javascript - into a modular type-safe scripts with VueJS to incrementally replace old JS widgets.