TypeScript Essentials Develop large scale responsive web applications with TypeScript Christopher Nance BIRMINGHAM - MUMBAI TypeScript Essentials Copyright © 2014 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: October 2014 Production reference: 1161014 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78398-576-0 www.packtpub.com [ FM-2 ] Credits Author Project Coordinator Christopher Nance Neha Bhatnagar Reviewers Proofreaders Andrea Martinelli Simran Bhogal Nathan Rozentals Ameesha Green Basarat Ali Syed Paul Hindle Carlos Ballesteros Velasco Indexers Commissioning Editor Monica Ajmera Mehta Amarabha Banerjee Priya Sane Acquisition Editor Graphics Richard Gall Disha Haria Content Development Editor Production Coordinators Arvind Koul Adonia Jones Komal Ramchandani Technical Editor Nitesh Thakur Kunal Anil Gaikwad Cover Work Copy Editors Komal Ramchandani Maria Gould Paul Hindle [ FM-3 ] About the Author Christopher Nance is an experienced software engineer and has been developing rich web applications for more than 4 years. At KnowledgeLake, he adopted TypeScript to develop a series of reusable components to scale across multiple product offerings and platforms. I would like to thank my parents for their constant support and encouragement. I would also like to thank my team at KnowledgeLake for pushing me to improve my skills as an engineer. [ FM-4 ] About the Reviewers Andrea Martinelli is a passionate software developer who is currently working on Shaman.IO, a tool that automatically detects and extracts structured data from the Web. In the past, he worked on Songr, a music player and aggregator. His interests span across web data extraction, code performance, and statically typed languages. He is a proficient C# developer and has been interested in TypeScript since its initial announcement. He graduated from the University of Trento in Computer Science and then studied at the Technical University of Denmark, even though he is now dedicating more time to the Shaman.IO project while moving across Europe. I would like to thank my friends, especially Gianluca and Stefano, for always being supportive. I would also like to thank Prof. Filz, who was one of my most influential teachers in high school. Thanks also to Mads, a special person that I will never forget. And to my family, who I haven't seen for quite a long time. Nathan Rozentals has been writing commercial software for over 23 years, starting with COBOL on mainframes, through C, on to C++ and Java, and finally settling on C# and ASP.NET. He picked up TypeScript in October 2012—a day after the 0.8.0 release—and could not put it down. In TypeScript, he found a language that could bring all of the design patterns and practices he had learned over the years—in a variety of languages—to JavaScript. [ FM-5 ] Some 6 days after the 0.8.0 release, he began blogging about TypeScript; covering a variety of topics, including unit testing, implementing an IoC container, and organizing code with AMD modules. He knew he had hit the mark when Microsoft themselves started to reference his blog in their CodePlex discussion forums. You can find his blog at http://blorkfish.wordpress.com. He currently works in the health industry, bringing touchscreen interfaces to medical systems, thereby enabling BYOD for clinicians and hospital staff. He is passionate about code quality, unit testing, and continuous integration, and has helped many large teams implement CI across many different software projects in many different languages. When he is not coding, he loves windsurfing and playing soccer. He is also an avid Liverpool FC supporter. I would like to thank my partner, Kathy, for her never ending love and support, and for giving me the freedom to spend long hours working on something that I am so passionate about. You are the best. To Ayron and Dayna—you are always in my thoughts—your enthusiasm for life and curious nature have given me such inspiration. I will always be there for you. Basarat Ali Syed (BAS) is a senior developer and the go-to guy for frontend issues at Picnic Software (http://picnicsoftware.com/) in Melbourne, Australia. He has a Master of Computing degree from Australian National University and graduated with high distinction in all courses. He is a familiar face at developer meetups and conferences in Australia and has been a speaker at events such as ALT.NET, DDD Melbourne, MelbJS, and Node.js meetups, among others. He is deeply passionate about web technologies. He is a known member of the TypeScript community and works on the DefinitelyTyped team (https://github.com/DefinitelyTyped). In his spare time, he enjoys bodybuilding, cycling, and maintains a YouTube channel for helping fellow developers (http://youtube.com/basaratali). You can easily find him on Twitter @basarat, www.github.com/basarat, and www.basarat.com. [ FM-6 ] www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. [ FM-7 ] Table of Contents Preface 1 Chapter 1: Getting Started with TypeScript 5 The advantages of TypeScript 6 Setting up the IDE 8 Hello World 9 Command-line compilation 10 Integrating Visual Studio 12 Creating a new project 13 Build options 14 Summary 16 Chapter 2: TypeScript Basics 17 Types 18 Functions 20 Interfaces 23 Classes 25 Definitions 25 Interfaces 27 Static and instance members 28 Properties 31 Enums 34 Modules 37 Internal modules 37 Generic objects 42 Summary 44 Table of Contents Chapter 3: The TypeScript Compiler 45 Generation of ECMAScript 45 ECMAScript version 46 Code manipulation 49 Controlling compiler output 51 JavaScript output 51 Source maps 54 Advanced options 56 Summary 60 Chapter 4: Object-oriented Programming with TypeScript 61 The basics 62 SOLID – object-oriented design 63 Understanding inheritance 64 Encapsulation 68 Abstraction 70 Polymorphism 72 Method overloading 72 Operator overloading 73 Method overrides 75 References 76 Summary 77 Chapter 5: Creating a Simple Drawing Application 79 Setting up the project 79 The shapes 82 Basic shapes 82 Drawing shapes 84 Making the application interactive 90 The engine 90 Mouse events 94 User options 97 Summary 104 Chapter 6: Declaration Files and Library Integrations 105 Declaration files 105 Third-party library integration 107 Installing NuGet packages 107 Integrating with jQuery 109 Integrating with Knockout 112 Using RequireJS 115 Summary 120 [ ii ] Table of Contents Chapter 7: Enhancing the Drawing Application 121 Converting to AMD modules 122 Binding the user controls 130 Reusable controls 130 Creating a ViewModel 135 Generating a single output file 138 Styling the application 144 Summary 149 Chapter 8: Debugging TypeScript 151 Debugging 151 Source maps 152 Debuggers 152 Test-driven development 154 Unit testing 155 Adding tests 156 Summary 162 Index 163 [ iii ] Preface This book is a quick and useful guide to learning the TypeScript language. The language features that TypeScript provides on top of JavaScript are covered thoroughly in this book with hands-on examples. TypeScript is a fairly new development language that can ease the pain of normal JavaScript development. Starting from downloading the compiler, covering language features, and implementing a dynamic application, this book will leave you ready to create new, large-scale JavaScript-based applications. What this book covers Chapter 1, Getting Started with TypeScript, covers setting up an environment for developing TypeScript applications and creating a simple application. Chapter 2, TypeScript Basics, covers the primary language features that TypeScript creates on top of JavaScript and how each of these features compiles into plain JavaScript. Chapter 3, The TypeScript Compiler, examines the TypeScript compiler and the different parameters that it accepts. The results of the different parameters will be discussed as well as how they affect the final JavaScript output.