Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
TypeScript Essentials
TypeScript Essentials

TypeScript Essentials: Develop large scale responsive web applications with TypeScript

By Christopher Nance
$19.99 $9.99
Book Oct 2014 182 pages 1st Edition
eBook
$19.99 $9.99
Print
$32.99
Subscription
$15.99 Monthly
eBook
$19.99 $9.99
Print
$32.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

TypeScript Essentials

Chapter 1. Getting Started with TypeScript

There are many languages available that can be used to create cross-platform applications and these types of code applications are being created daily. Some of the more common languages that these applications use are Java, C, and JavaScript and each has its advantages and disadvantages. While JavaScript is easy to get started with, it is also easy to lose control of. C requires a lot of overhead to create complex applications such as memory management, and Java requires the Java runtime to be installed. As applications grow and become more complex, so does the need to produce maintainable code. TypeScript is a new open source language created to make web development easier and more reliable. In this chapter we will:

  • Understand what TypeScript is

  • Learn how TypeScript improves on the foundations of JavaScript

  • Explore the ways TypeScript makes code more maintainable

  • Learn how to get the TypeScript compiler

  • Create our first application in TypeScript

The advantages of TypeScript


As hardware technology has advanced, so too has the need for more advanced software applications to run not just on one device but on an array of devices. JavaScript is the natural solution to this cross-platform model since almost all modern browsers are capable of running it. Unfortunately, the development paradigm of JavaScript is still dependent upon complex pattern knowledge, and debugging must be done at runtime. Creating large applications in JavaScript can be difficult and structuring the code in a maintainable form is just as difficult. TypeScript, an open source language project started by Microsoft, aims to take JavaScript development to the next level.

JavaScript originally ran as an interpreted language and still does in some places, while modern browsers convert it to machine code during execution. What this means is that the code you write is the code being used at runtime. The advantage of using interpreted languages is that they provide a rapid development model with very little overhead for the developer. They work in cross-platform environments because the code does not need to be compiled for each new device it is deployed to. Interpreted languages aren't without their share of disadvantages either though. In most modern implementations, JavaScript code must be run through a just-in-time compiler first, but even with the help of this compilation, the dynamic typing of the language makes this a difficult task and performance can suffer. On top of the performance hit, JavaScript code must still be deployed before testing can be done. A single syntax error will force you to run the application, track down the source of the problem, fix it, and then run the application again, which wastes a lot of time and can be quite frustrating. Developers like to refactor code as better ways to solve problems arise or new functionality is needed. This refactoring could cause other parts of the application to fail and without performing complete regression testing the problem could be overlooked. To interact with an object you must have intimate knowledge of the type that the object represents. TypeScript aims to solve these problems through a variety of additions to the JavaScript language including a compilation step with a detailed list of errors.

TypeScript is a statically typed compiled language that generates JavaScript code that can be used in cross-platform scenarios. You may be thinking to yourself at this point: why would I want to rewrite all of the applications I already have in this new language? The simple answer is you don't have to. TypeScript is just a superset of JavaScript that gets compiled into plain JavaScript. Although almost all of your existing JavaScript code is valid TypeScript code, certain pieces will need to be adapted to ensure safe compilation; however, they will generally improve the quality of your code. You are free to type your code as strong or as weak as you wish but I highly recommend embracing the typing system completely.

JavaScript was originally created as a scripting language, but as the need for larger applications has grown so has the need for those applications to contain more reusable components and libraries. JavaScript is dynamic enough to act as both a functional language and an object-oriented one through certain design patterns. Object-oriented code is focused on the concept of code reuse and we will be investigating it during our journey into TypeScript. TypeScript provides a rich set of object types and accessibility levels that will seem very familiar to object-oriented developers. Inheritance, encapsulation, and abstraction are all made easier in TypeScript. JavaScript is focused on the value of functions and prototype-based inheritance, which means TypeScript is as well. This can seem strange to anyone used to the idea of class-based inheritance. So through the use of its compiler, TypeScript introduces a number of important concepts from a few different object-oriented languages. These are as follows:

  • Static typing

  • Classes

  • Interfaces

  • Generics

  • Modules

TypeScript adds a static typing layer on top of JavaScript that is then run through a compiler. The compiler parses the TypeScript code and converts it into plain JavaScript. The addition of type safety and code compilation allows errors to be caught sooner and bugs to be eliminated without ever having to deploy a line of code. The introduction of classes and modules makes the development of large scale applications much easier. Including generics and interfaces in the type system allows us to easily create components and libraries that can be used with a variety of objects.

On top of this, TypeScript introduces the idea of public and private members. If an object or function attempts to access a private member of another object the compiler will recognize that the code is invalid and a build error will be generated. This helps implement encapsulation, which is meant to prevent consumers of your TypeScript objects from accessing methods and properties that could be potentially harmful when manipulated outside of the scope of the object itself. Providing accessibility levels helps us limit the scope of possible interactions with an object or even hide it completely from access by other components or libraries.

Tip

Keep in mind that the output from the compiler is just JavaScript code and when it is run, any segment of code that has access to the object can manipulate any property of the object.

Writing unit tests has become common practice in software development. Unit tests allow us as developers to refactor and clean code with the safety of knowing that we are not breaking existing functionality. The design decision to include interfaces in the language specification for TypeScript has helped to improve the testability of our code. Writing unit tests help us to verify that small segmented blocks of code always operate as expected. However, as our applications grow we must pass around more complex objects and create more complex functions. This makes testing small segments of code individually more difficult. With the addition of interfaces, it is now easier to mock up objects to be passed around and more tightly control the scope of the tests.

Another key component of JavaScript development is the ability to integrate third-party libraries. It is difficult to find rich web applications these days that don't integrate with jQuery, which has advantages and disadvantages. Due to the open nature of JavaScript development, libraries exist to do almost anything and a lot of them are free to use. Later on we will discuss how TypeScript is already equipped to integrate with these libraries and make the development experience infinitely better. For now, let's focus on getting ready to write our first application in TypeScript.

Setting up the IDE


To start writing code in TypeScript, we first need to install the compiler. The compiler is available as a standalone package through Node.js, Visual Studio tooling that Microsoft provides, or you can directly download the compiler's source code. Throughout this text we will be using Visual Studio 2013 as our interactive development environment (IDE). Visual Studio 2013 provides native support for TypeScript with the release of Update 2. For Visual Studio 2012, Microsoft provides an extension that can be installed from the TypeScript home page (http://www.typescriptlang.org/). As TypeScript is becoming more widespread, the number of code editors that have support for it has grown including Eclipse (http://www.jetbrains.com/webstorm/) and Notepad++ (https://github.com/hansrwindhoff/nppPluginTypescript).

The TypeScript compiler, as with a number of modern languages, is written in TypeScript, which means it will compile to plain JavaScript and run in any JavaScript host. With Microsoft's tools installed, you can access the TypeScript compiler directly from the command line and generate JavaScript immediately. The following screenshot shows a list of the available compiler options and what they do. We will look at each of these options more thoroughly later on but for now you can see that the compiler, although very new, already has a very robust feature set

As you can see the list of options is fairly extensive so far and will undoubtedly become richer as the language develops. TypeScript 1.0, which will be the version of the language used in this text, provides parameters for everything from specifying the output file to warnings based on code rules. We will discuss all of these options later on, but for now all you need to know is that you can compile your TypeScript code by passing the compiler the path of the file you want to compile. When we begin to build more complicated applications the Visual Studio integrations will provide an easy way for you to set compiler options for all TypeScript files included in your projects.

Hello World


Now that we have the compiler installed, let's start writing some code. This wouldn't be a good technical book without the inclusion of "Hello World" to get you started with writing code in a new language. The code for this particular example is pretty simple, but we can use it to demonstrate some of the early benefits of switching to TypeScript.

Command-line compilation

The TypeScript compiler is nothing more than JavaScript code; it is possible to compile your TypeScript anywhere that a JavaScript host exists. Earlier, we saw that an executable was provided that allows us to compile our code from the command line. We will walk through this first example using this executable and discover how simple it is to get going with TypeScript. To get started, let's create a new file on the filesystem and call it HelloWorld.ts. The following code creates a new HTML paragraph element and sets the text to the value of a pair strings concatenated together:

var p = document.createElement('p');
var hello: string = "Hello";
var world: string = 2;
p.textContent = hello + " " + world;

document.body.appendChild(p);

For the most part, this looks like plain old JavaScript. However, if you pay close attention to the declaration of the hello and world variables, you will see something new. After the variable names, you will see that they are now given the type of string. This type annotation tells the compiler to always treat the variables hello and world as strings; however, in this case, the compiler can infer these types from their initial values. Every other reference to these variables will be able to assume that all of the properties and methods of an object of the type string will be accessible. This allows IDEs to provide intelligent code completion as well as visually alert us if we are performing an action that the compiler is going to fail on. Now let's verify that this code compiles and analyze the JavaScript that the compiler outputs.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Launch an instance of the command prompt and browse to the directory where you created the HelloWorld.ts file. From here, running the compiler is as simple as typing the following:

tsc HelloWorld.ts

This generates the following output:

As you can see, the compiler recognizes that we typed the world variable as string and then tried to assign a numeric value to it. While that would have been legal JavaScript, it could lead to data errors later when another piece of code is expecting world to be string. So let's go back to the TypeScript file and modify the value we are assigning to world and run the compiler again:

 var world: string = "World!";

Success! Our code has successfully made it through the TypeScript compiler and it generated a JavaScript file by the name of HelloWorld.js. If you open up this file, you will find the resulting code that will be deployed and run on the client. As you can see, the type annotations were stripped out of the final code, while maintaining a one-to-one mapping between our TypeScript code and the resulting JavaScript code, because they are not actually part of the JavaScript language specification:

  var p = document.createElement('p');
var hello = "Hello";
var world = "World!";
p.textContent = hello + " " + world;

document.body.appendChild(p);

Now that we have our JavaScript generated, we need to test it. The first thing our code is attempting to do is to create a new HTML paragraph element. So we will need to generate an HTML file to load our code and be available for manipulation. Then two parts of a message are concatenated together and assigned to the text value of the paragraph element that has just been created. Finally, the paragraph element is appended to the body of the HTML document. The following HTML code will load our generated JavaScript file:

<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <script src="HelloWorld.js" ></script>
</body>
</html>

Note

In general, script tags should be included within the <head> tag, not in the main <body> tag. In this case, our code is dependent upon the DOM being ready for our code to execute successfully.

Opening the HTML file in a browser will result in the immediate execution of our code when the document's body loads. As you can see in the following screenshot, our paragraph was added to the HTML on the page and Hello World! is displayed:

So as you can see, creating and compiling TypeScript applications is just as easy as creating a basic JavaScript application. However, running the compiler from the command line will become cumbersome as the applications you develop grow in size and complexity. So let's go over setting up a TypeScript project in Visual Studio and get the Hello World application running in a web-based project.

Integrating Visual Studio

Now that we have created a simple application and discovered how TypeScript generates JavaScript that can be deployed, let's cover the integration with Visual Studio or Visual Studio Express, which is a free version of Visual Studio available at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx. Once you have the Visual Studio tooling installed for TypeScript, you will be able to create new projects that are set up to use our new language of choice.

Creating a new project

To create a new project that includes TypeScript, go to the File menu and navigate to New | Project. In the New Project window, you will see a list of installed templates. There is now a new section named TypeScript; select this section and you will see all of the available project templates that can be used to create TypeScript applications.

Note

The location of this template may vary depending on the version of Visual Studio installed. If the TypeScript section is not available, use the search function of the project template selector.

This does not mean that TypeScript can only be added to these project types—you can add TypeScript files to any existing project. For our examples, we will be using the HTML Application with TypeScript project template, so let's select that and create our new application:

Once the project has been created you will notice a few things right away. First, a default TypeScript file and HTML file have been created to host our new application. There is also a web.config and CSS file to host your application styles. All of these elements should seem pretty familiar to you, except the TypeScript file, which is there in place of a JavaScript file.

Now that our project has been created we need to move our code in. Copy the code from HelloWorld.ts into app.ts and do the same with the HTML that was generated. Change the script tag's source attribute to app.js to reference the new location of our code and run the application. The output displayed should be the same.

Build options

Visual Studio has provided a seamless integration with TypeScript and provides a large variety of configuration options. Let's take a look at the project build options first and get a feel for the different things that TypeScript can generate when it is being compiled. To find the build options, right-click on the project in the solution explorer and select Properties from the context menu. As you can see in the following screenshot, we are able to manipulate a large number of the compiler options we saw earlier:

From the build settings you can see that we have the ability to change which version of JavaScript we want to compile our TypeScript into: ECMAScript 5 or ECMAScript 3.

Tip

JavaScript is now formally known as ECMAScript but it is still commonly referred to as its original name.

You also have the option for compiling TypeScript files when you save changes to them. This is a helpful option because when a TypeScript file is compiled so are all other TypeScript files that it references. This is a helpful feature when you have only a few files being referenced, but as your applications grow and the dependency trees become more complex you could run into performance issues. Allowing implicit "any" types tells the compiler not to fail if an object's type is not given or cannot be implied. Unchecking this option is the easiest way to force yourself to fully embrace the type system. Although you may run across some scenarios where an "any" type is inevitable they should be very rare. This can be done by providing a type annotation as shown here:

 var explicitAny: any;

We also have the ability to change the module system we want to use when our JavaScript code is generated. We will discuss modules and the differences between each of our available options later on, but it is important to be aware of this option because it could drastically change the way our final code looks.

The output section gives us a variety of options for what the final output from the compiler will be. Commenting code is a very useful way of making it maintainable, but this can bloat the size of a JavaScript file. This could cause performance problems when downloading the code to a remote client over the web. Since Visual Studio gives us the ability to define different compiler options for different build configurations, we could allow the comments to remain in the output for debugging while removing them for release builds. The Combine JavaScript output into file option allows us to combine all of our generated code into a single output file. This becomes incredibly useful as the number of files in our project grows and there are a lot of network calls taking place to get each file one at a time.

We also have the ability to change the output path of the generated JavaScript. This gives us the ability to push changes directly into a test environment upon successful compilation without ever having to bring down the site or manually copy files to the deployment location. The last option in the output section is a very interesting one. Checking the Generate declaration files option will create declaration files for each of the types you create. These declaration files can then be referenced by other TypeScript files to provide a type definition for objects of a specific type. We will discuss declaration files in more depth later on in the book.

The final section is related to how we want to debug our TypeScript code. We have the ability to generate source maps and the directory in which they should be deployed to. Source maps provide a way for debugging combined and minified JavaScript code. They are particularly helpful when debugging code that has been pushed into production by creating a way to make the JavaScript readable, however, in TypeScript they also provide us with a way back to the original TypeScript code. The final option specifies where the TypeScript files are located; this will allow debugging from inside of Visual Studio directly. In most scenarios, the default option here will suffice.

Summary


The things learned in this chapter will be the basis for continuing our journey into TypeScript. We have discussed a variety of ways in which TypeScript improves the JavaScript development model. TypeScript makes large scale application development easier with the addition of a static typing system and code completion. Visual Studio's intellisense feature brings JavaScript development in line with other languages such as C# and Visual Basic. We briefly discussed the compiler and how it turns TypeScript into deployable JavaScript and created our first application. All of the examples shown moving forward will be using Visual Studio; however, feel free to use your favorite IDE. In the next chapter, we will discuss the different language features provided by TypeScript and how the compiler generates its JavaScript output.

Left arrow icon Right arrow icon

Key benefits

What you will learn

Set up the environment to install the TypeScript compiler and development tools Explore the features of the TypeScript language such as type annotations, interfaces, classes, and modules Examine the JavaScript code that has been generated by the compiler Create modular code that can be reused again and again Develop an interactive web application that can be easily extended Integrate with common JavaScript libraries to ease development Improve performance and reduce network traffic Focus on creating reliable code through testdriven development

Product Details

Country selected

Publication date : Oct 21, 2014
Length 182 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781783985760
Vendor :
Microsoft
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Oct 21, 2014
Length 182 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781783985760
Vendor :
Microsoft
Category :

Table of Contents

15 Chapters
TypeScript Essentials Chevron down icon Chevron up icon
Credits Chevron down icon Chevron up icon
About the Author Chevron down icon Chevron up icon
About the Reviewers Chevron down icon Chevron up icon
www.PacktPub.com Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Getting Started with TypeScript Chevron down icon Chevron up icon
2. TypeScript Basics Chevron down icon Chevron up icon
3. The TypeScript Compiler Chevron down icon Chevron up icon
4. Object-oriented Programming with TypeScript Chevron down icon Chevron up icon
5. Creating a Simple Drawing Application Chevron down icon Chevron up icon
6. Declaration Files and Library Integrations Chevron down icon Chevron up icon
7. Enhancing the Drawing Application Chevron down icon Chevron up icon
8. Debugging TypeScript Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.