Save WordPress Development Time by Replacing JavaScript with TypeScript

WordPress’s Gutenberg content editor is a UI framework built on React, an open-source front-end JavaScript library. The introduction of Gutenberg brought useful features and benefits of the React and JavaScript ecosystems to the WordPress content editing experience. The versatility of JavaScript is part of what makes it unique, practical, and convenient. JavaScript allows you to create dynamic content, control multimedia, animate, etc., and it can be used on both the client-side and the server-side.

One of the downsides of JavaScript is that it can be difficult to debug your scripts and find the root cause of the bug. You may try to reproduce the bug, attempt to fix the issue, refresh the application and try to reproduce it again, and then end up hoping for the best if you’re not 100% sure what’s causing the bug. It’s not very efficient. Though there are some tools to help with debugging, they are not perfect. Console.log() only tells you where you are in the code, not what the problem is. Browser console is helpful too, but if the JavaScript source code is minified and you don’t have the source map, then good luck reading the code and debugging it.

What is TypeScript?

TypeScript, a superset of JavaScript with syntax for types, is developed and maintained by Microsoft. Unlike JavaScript, TypeScript is strongly typed, meaning it has stricter rules when compiling. The advantage of this is it allows the editor to give immediate feedback if there is an error, whether it be using the wrong variable name, trying to call a method that doesn’t exist, or calling a method with the wrong parameters. While JavaScript catches errors at runtime, TypeScript can catch errors at compile time. Additionally, TypeScript promotes self-documenting code so that other developers can have an easier time understanding your code and vice-versa.

TypeScript converts to JavaScript so it can run anywhere that JavaScript can. If you’re familiar with how SCSS works in relation to CSS, TypeScript works similarly with JavaScript. All vanilla JavaScript is valid TypeScript, similar to how all CSS is valid SCSS. Also, TypeScript offers more features than vanilla JavaScript, similar to how SCSS offers more features than CSS.

How TypeScript can be used with WordPress

Gutenberg can take advantage of JavaScript when creating custom blocks or manipulating existing ones. To make development and debugging easier, TypeScript can be implemented into WordPress plugins or themes. As noted earlier, TypeScript can help spot errors before you compile, saving time spent on debugging.

To get started with TypeScript, you’ll need to install it using one of three installation routes: npm module, NuGet package, or a Visual Studio Extension.

For this example, we’ll install TypeScript using NPM as our dependency manager. Run the following in your theme or custom plugin directory:

Npm install typescript --save-data

You’ll have to set up the JSON file so the TypeScript compiler knows where the TypeScript files are to compile. Run the following command in the same directory to create the JSON file:

Npx tsc --init

You can now change the file extensions from .js to .ts or .jsx to .tsx and start writing in TypeScript or start migrating your current code to TypeScript. When you’re ready to compile, run the following command:

Npx tsc

Or, if you want to compile TypeScript on the fly as you’re developing, run the following:

Npx tsc --watch

The compiler will watch for changes to any TypeScript files when you save and automatically compile it to a JavaScript file. It will also notify you of any errors. Note that if you’re using jQuery, you’ll have to take some additional steps to configure the compiler.

These are the basics for getting started with using TypeScript in WordPress. TypeScript is one of the most popular programming languages because it overcomes JavaScript’s shortcomings. It is an invaluable tool in the WordPress development system, especially if you want to build and maintain your project for a long period of time or if it’s a large project that is JavaScript-heavy. Of course, there is much more to TypeScript. You can read and learn more about it here: https://www.typescriptlang.org/. If you’re in need of web development assistance, contact the Hall experts.

See how Hall can help increase your demand.