A new JavaScript writing tool from Microsoft called TypeScript aims to revolutionize the language. TypeScript links a strongly typed layer with JavaScript, as the name suggests. Along with JavaScript, TypeScript includes an object-oriented layer.
JavaScript is neither tightly typed nor object-oriented, as you are aware if you are familiar with the language. JavaScript, on the other hand, is a functional dynamic language. JavaScript can provide substantial difficulties for C# or Visual Basic developers, including the need to define interfaces and classes, declare integers, strings, and other variables, and enforce the integrity of those declarations.
You don't define classes and interfaces in JavaScript. Instead, objects are declared, and object-oriented inheritance can be accomplished through prototyping. The var keyword is used to define every variable. From a string to an integer to a date, a variable can readily change. You can declare a function in JavaScript that doesn't accept parameters and then call that function with arguments.
You're already making wise choices by selecting TypeScript as one of your first languages.
The idea that TypeScript is a "flavour" or "variant" of JavaScript is probably not news to you. Learning more about the relationship between TypeScript (TS) and JavaScript (JS), two contemporary programming languages, will help you comprehend what TypeScript contributes to JavaScript.
The majority of programming languages would produce an error when these kinds of mistakes happened; some would do so during compilation, which occurs before any code is executed. When building applications with hundreds or thousands of lines of code, these continuous surprises are a severe issue. When writing tiny programs, these oddities are unpleasant but doable. Static checking is the process of finding flaws in code without actually running it. Static type checking determines what is and is not an error depending on the types of values being operated on.
A static type checker, TypeScript evaluates a program for mistakes before execution based on the types of values. JavaScript's syntax is not regarded by TypeScript as being incorrect. This means that you can use any functional JavaScript code in a TypeScript file without worrying about how it was created specifically.
None of this implies that you can't use JavaScript to impose constraints using custom code. Declarative code can be written in TypeScript to enforce rules. For instance, you can declare a variable in TypeScript to be a string if that is what it is intended to be. With JavaScript, the typing is not as robust. The TypeScript Compiler detects and reports this mistake if your code tries to assign an integer value to the same variable. Developers using C# and Visual Basic can connect to that experience, where the compiler caught the type mismatch problems. Such errors are not caught by pure JavaScript until the code is run (assuming the operation you were employing could only be performed on a string).
Downloading and Installing TypeScript
TypeScript's web home is typescriptlang.org. You will have immediate access to downloads, samples, and tutorials there. Downloading the plugin is the best way to install TypeScript if you're using Visual Studio.
A Superset of JavaScript
A superset of JavaScript is TypeScript. This means that adding TypeScript to your existing JavaScript code is simple; all you have to do is rename the.js file to.ts. Of course, you don't gain the full potential of TypeScript by simply renaming a file. However, you can start enjoying some of the benefits of Typescript by just changing the file to.ts and continuing to write JavaScript as usual. Naturally, the IDE you use will affect these benefits, but for this essay, I'll focus on Visual Studio Code.
Visual Studio Integration
The Visual Studio IDE is most likely where you will interface with TypeScript, even though the command prompt option is useful to know. You may automatically compile your TypeScript files from the IDE. You must ensure that you have downloaded and installed the Web Essentials plug-in in order to enjoy the full experience.
Once you have everything installed in Visual Studio, you can add a new TypeScript file. The dual pane for TypeScript files is present. The TypeScript file is in the left pane. The compiled JavaScript code is located in the right pane, which is read-only. Keep in mind that the keyword Module corresponds to a JavaScript namespace. The JavaScript code is updated to match changes made to the TypeScript code. Additionally, be aware that both minified and unminified JavaScript files are produced.
Static Typing
Both JavaScript's strengths and weakness stem from the absence of static type. The result is an extremely flexible language that is also quite prone to mistakes. Static typing is a concept that TypeScript introduces to JavaScript. Simply put, TypeScript will do its best to determine the data type of a variable using whatever it is assigned to when the data type is not explicitly assigned by typing var variablename. It assigns it any data type if it is unable to determine the data type.
You may take it a step further and give your variables a specific data type. Boolean, Number, String, Array, Enum, Void, or Any are the possible data types. An object type can also be designated as a data type.
You can add definition files to add support for recognized types particular to a platform if you're using a non-HTML JavaScript engine, such V8 running in NodeJS. Later, more on that.
The benefit of being able to strongly type HTML components is that you can now create TypeScript with extensive coding assistance. For instance, the HTMLCanvasElement is very new, and I had no idea that it could be used to quickly turn canvas data into a DataURL and attach an image. Fortunately, you learn as you go along with TypeScript IntelliSense.
Future-Looking Features
There is ES6, which makes an effort to address many of the problems. The issue is that ES6—or, worse yet, not all of ES6—might not be supported by the browser where your code executes.
To the rescue with TypeScript! You can use all of ES6's features to create your code, as well as some of ES7's potential features in the future. If you ask it to, the TypeScript transpiler will translate your code to ES5, or even ES3. In this manner, you can build dependable code right away while utilizing ES6's advantages.
There are plenty of such instances. I advise exploring all that ES6 has to offer at http://es6-features.org. These days, JavaScript can be used with many of those options. Let me choose only one of those characteristics, the Arrow Functions, as a straightforward illustration. Similar to Lambda expressions in C#, the shorthand for defining entire functions is called an "Arrow Function."
The good news is that lambda expressions, also known as Arrow Functions, automatically give the appropriate value to this, eliminating the need for you to save this into that.
I could talk about ES6 and how it will resolve all of the difficult problems that humanity is currently facing for the rest of the day. Each illustration is superior to the previous one. I'll give you free rein to experiment with them in ES6. Code written in TypeScript can be executed and used on browsers that don't yet support ES6. You should use TypeScript to write ES6. You'll observe that most of them are still functional today. Even a few ES7 features are currently supported.
Browser Compatibility
I detest the growth of browsers. Yes, I am aware that if Firefox didn't exist, we would still be using IE6. But as a web developer, proliferation makes my job much more difficult. I detest how different web browsers are! I've created code and tested it on IE so many times just to discover that some clever guy also tested it in Firefox. When I make a change in Firefox, Chrome breaks. When I make a change in Chrome, IE is broken. I need a break! That issue is also resolved with TypeScript.
You just use TypeScript, the only language supported by all browsers. You instruct the TypeScript compiler to translate it to either commonJS, ES3, or ES5. No matter what you write on the other side, this always ensures that the proper cross-browser compatible JavaScript is emitted.
It feels so fantastic to finally concentrate on a single-language family! I find it constructive, therefore I'll probably keep doing it.
IntelliSense
It's important to have IntelliSense. This was briefly mentioned in the "Static Typing" section above. It gets better still! Once you've correctly and strongly typed your variables, created interfaces and classes, and started obtaining rich intelliSense, your code will become much more insightful.
Nowadays, you seldom ever create new JavaScript code from scratch. By utilizing libraries and frameworks like jQuery and AngularJS, you are always standing on the shoulders of others. The community has created.d.ts, or certainly typed files, for almost every library you care about, providing you with IntelliSense for those third-party libraries.
ForEach is a good example. The ability to loop through a JavaScript array would be useful. These are the opinions of ES6, jQuery, and AngularJS. Except that iterating through an array wasn't considered to be particularly significant in the original JavaScript specification. Heh.
We have a forEach method available in both jQuery and Angular. Unfortunately, they have the wrong parameter ordering. This alone leads to a great deal of confusion and mistakes because you commonly end up combining jQuery and Angular.
The IDE offers numerous more helpful suggestions like these, including tool tips, IntelliSense, and hints. You will be accustomed to these since you are used to speaking higher-level languages. Writing JavaScript will be as enjoyable for you as writing C#.
Large Community Support
Naturally, the question is: where do you get the.d.ts files for your project? The TypeScript compiler creates the d.ts files for you for any code you write, is the answer. You may just get the d.ts files from www.definitelytyped.com for the libraries you use.
All of those files are extremely good, and they are all available for free download. Although I'll never fully comprehend why open source is so effective, I'll take it.
Yes, before you ask, a Mac can also use it. In actuality, the IntelliSense tooltip for Visual Studio Code has a marginally superior layout. For a beta product, it's not terrible.
But there is one thing I must warn you about: TypeScript and the IDEs that use it don't distinguish between your code and regular third-party libraries.
Without any alarms or sirens sounding, you can rename it in Visual Studio as well as Visual Studio Code. Literally!
The idea of blackboxing framework files would be great if the IDEs supported it. Here is a best practice I'd like to share with you in the interim. Simply designate the folder containing the d.ts files as read-only. You won't ever unintentionally alter them after that. Make sure that the majority of developers do not have write access to the master SVN or git repository folder. You won't unintentionally step on this landmine using the combination of TypeScript and source control in this way.
Summary
Although TypeScript is fantastic, there is one significant drawback: It needs to be translated. To put it another way, the code you create doesn't actually run. When you write some code, it is translated into JavaScript, which is then executed in the browser. There is some friction brought on by this, especially during debugging. Your development environment must be set up with consideration for how and when TypeScript code is translated into JavaScript. This transpilation shouldn't take place in the middle of a scene in a play. Transpiled files are constructed and delivered in advance. Perhaps TypeScript is less adaptable than JavaScript. Not to add the fact that using sourcemaps as a workaround when hitting a breakpoint in TypeScript is complicated. And let's face it, not all browsers are aware of anything I just said.
However, given the enormous benefits that TypeScript offers, this is a tiny drawback that I am willing to ignore. In fact, TypeScript is now the greatest way to write JavaScript, in my opinion.
There is also no good reason not to create TypeScript because it is a superset of JavaScript. I'll discuss MVC, Angular, TDD, and other key components of successful JavaScript in my following article. The ideal coding language for Angular 2 is TypeScript. In fact, I'd contend that writing it in plain JavaScript is the worst possible alternative and that there is no other way to develop Angular 2 code.
Conclusion
The features that TypeScript offers are hardly touched upon in this article. However, you have a solid foundation to assess if TypeScript is something you should add to your set of development tools. It is highly attractive to compile JavaScript so that syntax mistakes can be detected before execution. An automated build and continuous integration system would greatly benefit from this. It may be simpler for those with little to no expertise with JavaScript to embrace and adopt the language if TypeScript allows developers to use C#-like syntax to interact with JavaScript in an OOP manner. Even though TypeScript compiles to pure JavaScript, it is nevertheless imperative that you understand JavaScript's internal workings if you plan to use it.