Better JavaScript programming with TypeScript

TypeScript helps you write better JavaScript, tame large JavaScript projects, and prepare for ECMAScript 6 — and getting started couldn’t be easier.

If there’s a lingua franca of the modern development world, it’s JavaScript. Netscape’s browser scripting language has come a long way in almost 20 years and now can be found almost everywhere. It’s at the heart of much of our development tooling, and with server-side implementations like Node.js, it’s also driving much of the move to microservices. JavaScript is even at the heart of much of Microsoft’s development technologies. Want to extend Microsoft Office? You’re using JavaScript. Want to write a Windows 10 UI? You’re using JavaScript.

But JavaScript is not perfect, especially when you’re building a large-scale Web application that includes a lot of client code. That’s where TypeScript comes in. TypeScript is a superset of JavaScript that adds features intended for the upcoming ECMAScript 6, and it can be transcompiled into JavaScript for use in current browsers — and on Node.js.

TypeScript was designed by a team at Microsoft led by Anders Hjelsberg (perhaps best known for his work on Turbo Pascal, Delphi, and C#). The Microsoft team has designed TypeScript to use a compiler that’s written in JavaScript. You write code in TypeScript and pass it through the compiler. The resulting JavaScript either runs server side or can be called on the client from your HTML.

TypeScript adds a lot of ECMAScript 6 features to JavaScript, including classes and modules, and the team intends to bring the two language dialects closer together as the ECMAScript 6 standard approaches ratification. It’s a sensible approach. You can use TypeScript to get your code ready for ECMAScript 6, while taking advantage of TypeScript’s static typing to make your code safer and more secure.

If you’ve used languages like C or Fortran, you’ll be familiar with static typing, which lets you declare types for variables to ensure, for example, A is always an integer and C is always a string. While TypeScript’s type safety isn’t as comprehensive as, say, Fortran’s, the ability to define number, string, and Boolean types can significantly help with debugging code. There’s also the option of letting TypeScript infer types, reducing the risk of errors when, for example, you assign an object to a string without an appropriate conversion. If your code is adding two numbers together, TypeScript will assume the result is always a number.

You can also use TypeScript to apply types to arrays, or use enums to set values to specific variable names. Enums are a useful tool, as they’re two-way, so you can use them to look up a variable name by number — giving you a simple way of building a key/value record in your code. If you’re not sure of the type you might be using, you can set a variable to any, in which case TypeScript won’t infer type and you won’t trigger errors or warnings. TypeScript types are optional, so you don’t need to go through your existing code adding types before it will compile or run. That simplifies migrating existing code. You can start with pure JavaScript and add types as you add other TypeScript features.

Note that your existing JavaScript code will run as part of a TypeScript application. You’ll get to take advantage of TypeScript features if you migrate your code to ECMAScript 6 or to TypeScript syntaxes. If you’re using TypeScript-aware tooling, you’ll also get support for Visual Studio’s IntelliSense, which will help manage the types in function calls. In addition, you can use TypeScript declaration files to quickly add type support to common libraries and services, such as the popular JQuery library.

Defining the types in a function call is key to creating the structure of an interface, helping make your code more object-oriented. You can specifically define function elements as interfaces, giving you the option of having more descriptive names in a function, while still notifying tools like IntelliSense of function requirements when checking a call.

Defining types and interfaces in this way makes it easier to manage large JavaScript projects with many developers. Taking an “interface first” contractual approach to function and class design lets you optimize one part of an application without affecting the rest, or take an interface definition from one developer and give it to another to implement. It’s an approach that allows you to make more effective use of tools like Git and GitHub to manage multiple code branches within a continuous development model.

If you’re using Java or C#, then the TypeScript (and ECMAScript 6) implementation of classes will look very familiar. You’ll create classes with constructors that define the types used in a method, and that use the familiar this to handle internal objects. You can extend classes using inheritance, adding features and overriding methods. Perhaps most interesting, there’s also support for generics, which can be used for both functions and interface — and help you deliver reusable functions.

Once you’ve understood how TypeScript handles classes and functions, you can start to group them in modules, which themselves can be split into several files. It’s a handy approach to organizing your code — for example, using separate files to handle the different functions of a shopping cart. You can then update submodules separately, allowing you to zero in on certain functions to improve performance without impacting others. JavaScript libraries with declaration files can be used as modules too, so you can take advantage of them in TypeScript applications.

If you want to work with TypeScript, you’ll find support in current releases of Visual Studio and in the new Visual Studio Code cross-platform editing tool. There’s also an online code playground on the TypeScript site, where you can try out code ideas or work through online tutorials.

With JavaScript used in larger and larger projects, it makes a lot of sense to get started with TypeScript. TypeScript can help you get code under control and encourage reuse, as well as put you on a path toward ECMAScript 6.

Source : http://www.infoworld.com/