Contact us anytime to know more — Kuldeep K., Founder & CEO CISIN
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Which means, what you're really operating in the browser or in the node is actually JavaScript. Web Developer are only writing it.
The Benefits Of Utilizing Typescript
So when should you use TypeScript? Or for that matter any statically typed language. Shortly lived prototypes which are assumed to be throwaways, well if the only thing you're producing is small I wouldn't opt for TypeScript.
It may initially slow you down a whole group. It needs to be lived In the event that you, on the other hand, need to send something to a customer and multiple men and women need to be operating on it, I'd proclaim TypeScript to be the antidote for a number.
The aim of TypeScript would be to include a static type system into a place where it does not exist. The benefits of a statically typed language are a bit outside the scope of this post, but a quick summarization of their most common benefits that are perceived are listed below:
- Lowers the number of mistakes.
- Code becomes self-documenting.
- Greater capability to refactor with confidence.
- Makes efficient code completion.
- The lesser mental burden on the programmer.
A quick search on the net will show even more benefits, but also some of the numerous drawbacks a statically typed language could offer.
The list of benefits looks like a good addition, That said. So let's take a peek at how we chose to make use of TypeScript.
Utilizing Typescript Within An Existing Code Base
Besides the aforementioned benefits, we had another sub-goal. We wanted the TypeScript implementation also to be as noninvasive as possible and to maintain an existing code base.
We wanted to maintain our JS code can be written in TypeScript. In case it ain’t broke don't fix it. Therefore, in the event that you deem TypeScript a pursuit and also a good investment follow along below!
So onto the practical side of things.
Obtaining the TypeScript compiler up and running shouldn't pose much of an issue. You need to have Node.js and npm available on your device and that's more or less it.
Install TypeScript together:
When you've got that all you need to do is create an app.ts file, point the compiler on it and results in an app.js document you can run in either your browser or with Node.js.
tsc ./ / app.ts // transpiles and sparks an app.js document in the exact same directory as app.ts.
Node app.js // implements our little app.
So today we have noticed that running the TypeScript compiler actually just generates a JavaScript file that can be run in any environment that supports JavaScript, be it that the browser or Node.js.
Configuring TypeScript in Drupal
The dull but quite useful last portion of this post is how to configure TypeScript for our Steam 8 program. The part that is boring being set up, not Drupal.
The reply to this is that you may do it a few different ways.
The most fundamental and simple setup would be to have a directory with your TypeScript files along with also an output directory for your transposed JS files.
When dealing with numerous ts files and likely nested directories of its files we need a tsconfig.json file at the root of the undertaking. In the root of our custom theme directory, we want it in our case for this Drupal 8 website.
The above configuration is pretty simple and self-explanatory, however, without both of them, the TypeScript compiler would not know where to go searching for ts documents and in which to output them.
To transpose your own ts files all you want to do now is run tsc at precisely the exact same directory that your config file is in and you'll get a folder that has all your transpiled ts documents from plain js.
There are many more configurations you may want and want to set up when utilizing TypeScript, but we'll stick with this for now in the name of simplicity.
You can use this as it is. Is to have a plain js file named the same as a ts file because the compiler would overwrite after implementing the js file.
Make the tsc command component of your build script and you should be good to go with this.
Consider Your Pipeline Setup
Most of the time the entire world and our jobs aren't as straightforward as what I just described. You most likely already have a pipeline setup consisting of grunt, gulp, web pack, rollup, package etc..
One of the very prevalent pipeline installments in the Drupal community is gulp. Here we will go through how we implemented TypeScript.
You'll want to set up the plugin gulp-typescript in addition to the typescript package.
Npm install help-typescript typescript --save-dev
In your gulpfile, require the gulp-typescript package and generate a new task for this.
Pretty simple stuff right? You might run into a problem with your variant of Node.js if you are on a very old one.
We did. TypeScript has great backward compatibility, however, the gulp-typescript package requires a minimum version of Node.js 8.
Add this task to your view, production, etc. and you're good to go.
A Rude Awakening
So should you re-write or even just copy paste all your existing working Drupal JavaScript code and then make it into TypeScript? The answer is most likely no.
For our test with this setup interface it and I chose to take our existing gallery implementation. A bit of clean-up and typing later I was completed, tested and shipped.
An hour after our chat was burning off. The gallery was not working. "But it is type safe and conducted through the pipeline perfectly?".
We had missed the situation where there is more than one gallery on a webpage.
This illustration is simply to underline that TypeScript isn't a silver bullet. It squashes a particular breed of bugs and does result in a developer experience, but it doesn't supply you with functioning features from the box.
You have to provide that.
Godspeed
It is my hope that this pragmatic walkthrough was enlightening to you, dear reader.
For all of us in Reload, the delve into TypeScript on unique projects are rewarding and a great learning experience.
Hopefully, you will discover it equally as awesome as we all do.
