Progressively Adopting TypeScript in a Dojo Toolkit Application

Introducing TypeScript to Your Project

Installing the TypeScript Compiler

The TypeScript Configuration File

  • allowJs - Allows JavaScript files to be compiled. We need this right now because our entire app is written in JavaScript.
  • checkJs - Reports errors in JavaScript files. We can have TypeScript perform type checking on our original JavaScript files, possibly surfacing some application bugs before we even make any code changes!
  • esModuleInterop - Enables compatibility with the dojo loader.

Ambient Declarations

  • dojo/1.11/modules.d.ts - Ambient declarations for Dojo 1.11
  • diijt/1.11/modules.d.ts - Ambient declarations for Dijit 1.11
  • dojo/1.11/loader.d.ts - Ambient declarations for the loader to give us access to require and define.

Transitioning Loaders

Type Safety

  • Accidentally using a variable that doesn’t exist will create a compile-time error. So if we type this.nmeInput by mistake, we’ll get an error right away.
  • We’ve got autocomplete (most IDEs support this)! Now that TypeScript knows what types things should be, typing domConstruct or this. will provide you with an autocomplete list that is specific to that type.
  • We’ve got additional type safety on Dijit constructor parameters. Since TypeScript knows what TextBox({ ... }) should accept, if you try to type in a property that hasn’t been defined in the types, you’ll get a compile-time error.

.js to .ts

Rename Your Files

Update Your Types

Your Project: What’s First?

Critical Business Logic

Modules with few dependencies

Potential Issues

Mapped Libraries

Next Steps

TypeScript and ESLint

Webpack

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store