TypeScript is a rising star, offering web developers the static typing missing from JavaScript, but still fully compatible with it. Whether you’re familiar with JavaScript already, or you want an easier gateway to it first, TypeScript is an excellent choice for languages to learn. As usual, Syncfusion can get you up and running with the Succinctly series.
In TypeScript Succinctly by Steve Fenton, you will learn about TypeScript’s optional static typing and classes for JavaScript development, how to create and load modules, and how to work with existing JavaScript libraries through ambient declarations. TypeScript is even significantly integrated with Visual Studio to provide the autocompletion and type checking you are most comfortable with.
Some of what’s covered in only 82 pages:
A glimpse inside this ebook:
Code organization I will begin by drawing some parallels between .NET and TypeScript in respect to code organization and language features. In some cases, the conventions are nearly identical, but there are also some interesting differences in both the naming conventions and the meaning of the various components used to compose your application.
Figure 1 demonstrates the structure of a TypeScript program, which is organized into a number of modules, each containing interfaces, classes, and variables. Each module should group related classes together and should have minimal dependencies on other modules in your program. Although you can create multidirectional dependencies and circular dependencies in TypeScript, I recommend that you avoid doing so, as it will make your program harder to maintain.
This program structure allows you to put your object-oriented programming skills into practice and makes it easy to use common design patterns to organize your program.
I will use the TypeScript naming conventions throughout this book, but feel free to read method when I use the term function, for example, if that is what you are more used to.
A TypeScript program is a collection of source files. Most of these source files will contain your code implementation, but they can also contain declarations that add static types to external code. I will talk about writing you own code in Chapter 4, “Creating new modules,” and consuming existing code and third-party libraries in Chapter 6, “Working with existing JavaScript.”
You can think of your program as both the TypeScript .ts files and the compiled JavaScript .js files. Module TypeScript modules are similar to .NET namespaces, and can contain a number of classes and interfaces. The structure of your modules can vary from very flat structures to highly nested ones depending on the kind of program you are writing.
Interfaces in TypeScript work exactly like .NET interfaces, allowing the development tools and the compiler to emit errors if a class fails to implement an interface correctly. Because the interface exists solely for the benefit of the design-time tools and the compiler, no JavaScript code is generated from a TypeScript interface. A TypeScript interface can extend multiple interfaces.
A TypeScript class is similar to a .NET class and can contain functions and variables with varying levels of visibility. In TypeScript you can use public and private visibility keywords on functions and variables.
A TypeScript class can extend one class and implement multiple interfaces.
Function
A TypeScript function is like a .NET method, accepting arguments and returning a typed value or void. This is where the real logic will live in your program.
Variable
In TypeScript all properties and fields are variables, but with optional typing. By default, these variables behave in a similar manner to those declared in .NET using the var keyword, as the compiler will attempt to infer the type and then treat the variable as statically typed. In cases where the type cannot be inferred, the compiler doesn’t show an error as it would in .NET, but instead treats the variable as a dynamic type, which in TypeScript is indicated with the any keyword. I will discuss this in more detail in Chapter 3, “Type safety.”
Enumerations in TypeScript are similar to .NET enumerations. The experimental implementation in version 0.8 of TypeScript has been amended slightly in version 0.9.
Because functions, classes, and modules are compiled into various flavors of JavaScript functions, everything nested within them is locally scoped, and will enjoy the benefits of JavaScript’s lexical scoping. This means a nested function has access to its own variables and also the variables in the outer function. If no variable exists in the local scope, the JavaScript runtime walks up the chain to find the variable in the outer function, and if no variable exists there, it continues to the next level. This continues right up until JavaScript checks the global scope.
TypeScript is converted into JavaScript at compile time. JavaScript is an implementation of the ECMAScript standard, and it isn’t the only one–ActionScript is another well-known language based on the ECMAScript standard. There are three versions of ECMAScript that you will come across when dealing with TypeScript.
ECMAScript 3 was published in 1999, and it is the version supported in most browsers. When TypeScript compiles into JavaScript, it uses the ECMAScript 3 standard by default. A very small number of features are unavailable in TypeScript when targeting ECMAScript 3, such as property getters and setters, but it offers the widest possible support for your program.
If you try to use a feature that isn’t available in the version of ECMAScript you are targeting, the compiler will warn you to either avoid the feature or change the target version. I have included instructions on how to target ECMAScript 5 in Chapter 2, “Visual Studio.”
ECMAScript 5 was published in 2009 and is supported in all modern browsers. You can instruct the TypeScript compiler to target ECMAScript 5, which makes additional language features available, but your program may encounter problems in older browsers. The following browsers support all of the important features of ECMAScript 5; older versions of these browsers have only partial support:
ECMAScript 6, also known as ECMAScript Harmony, is currently being drafted and has experimental support in some of the latest browsers. This version is interesting, because it will make modules and classes part of the JavaScript language. TypeScript gives you immediate access to these proposed new features in practically all browsers. At some point in the future you will be able to target the ECMAScript 6 standard from TypeScript, which will mean the compiled JavaScript will more closely match your TypeScript code.
There is currently no release date planned for ECMAScript 6, and it doesn’t support all of the concepts in the TypeScript language.
The TypeScript life cycle consists of three distinct stages. When you are writing TypeScript code, you are participating in the design time stage along with any development tools you are using. The compiler represents the second stage, converting TypeScript into JavaScript, and raising errors and warnings it discovers. The final stage involves the runtime executing the generated JavaScript.
To continue reading TypeScript Succinctly, download it from our Succinctly library.
If you read this ebook and want to see or play with some TypeScript controls, check out Syncfusion’s Essential JS 2 suite, with over 50 components written in TypeScript and compiled in JavaScript. You can download them with a 30-day trial or a Community License, if you qualify.
Have you read TypeScript Succinctly or worked with our Essential JS 2 controls? Are you a fan of TypeScript? Let us know what you think in the comments below or on Facebook or Twitter.
If you like this blog post, we think you’ll also like the following free e-books:
JavaScript Succinctly
TypeScript Succinctly
AngularJS Succinctly
Angular 2 Succinctly