Converted HTML5+JavaScript app to TypeScript

Below are me experiences in converting one of my small personal project from HTML,JavaScript to TypeScript.

Converting Karel to TypeScript

The application is simple one screen. Its used for teaching programming basics.

The conversion has mainly 2 steps.

Get the .js to .ts

1. Create new TypeScript project in Github. Checkout the same in local machine.
2. Create a new TypeScript project in Visual Studio. Better have Web Essentials installed.
3. Copy paste the existing JavaScript code.
4. Rename the .js files to .ts
5. There may be validation errors on compilation. But it will generate .js files.
6. Add jQuery map file via nuget 
1. install-package jquery.TypeScript.DefinitelyTyped -version 2.0.0
7. Better use Local IIS server setup from Visual Studio
8. Run the app and make sure it works as usual.
9. Commit the project.
10. Host to staging. No need to deploy any .ts files to server.

Some steps are solely related to Github source control repository not at all related to TS. The project is live at https://github.com/joymon/karel-typescript

Use the .ts features

Now leverage TypeScript features one by one. Below are some examples.

world.ts - added class support

https://github.com/joymon/Karel-TypeScript/commit/9a4d0bd9a1d8eb279ac584bc35d61dfc2c972f2f?diff=split

https://github.com/joymon/Karel-TypeScript/commit/bc80e03ad8c112df82a791a77c2b43568a5e26dc?diff=split

https://github.com/joymon/Karel-TypeScript/commit/c4667d3f765e183db9d85938488a760cd526485d?diff=split

TypeScript clearly shows the dead code. Remove everything. Refactor with confidence as it will show errors early.

How to convert from JavaScript to TypeScript is now a solved question. This approach can be used on even large apps. There are chances that somethings may show compilation errors due to lack of type definitions. eg: FileReaderSync class. Ignore those as any valid .js is valid .ts and .ts compiler will produce the code for everything.

Happy conversion.