Book Image

TypeScript Blueprints

By : Ivo Gabe de Wolff
Book Image

TypeScript Blueprints

By: Ivo Gabe de Wolff

Overview of this book

TypeScript is the future of JavaScript. Having been designed for the development of large applications, it is now being widely incorporated in cutting-edge projects such as Angular 2. Adopting TypeScript results in more robust software - software that is more scalable and performant. It's scale and performance that lies at the heart of every project that features in this book. The lessons learned throughout this book will arm you with everything you need to build some truly amazing projects. You'll build a complete single page app with Angular 2, create a neat mobile app using NativeScript, and even build a Pac Man game with TypeScript. As if fun wasn't enough, you'll also find out how to migrate your legacy codebase from JavaScript to TypeScript. This book isn't just for developers who want to learn - it's for developers who want to develop. So dive in and get started on these TypeScript projects.
Table of Contents (16 chapters)
TypeScript Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Comparing React and Angular


In the previous chapters, we used Angular and in this chapter we used React. Angular and React are both focused on components, but there are differences, for instance, between the templates in Angular and the views in React. In this section, you can read more about these differences.

Templates and JSX

Angular uses a template for the view of a component. Such a template is a string that is parsed at runtime. TypeScript cannot check these templates. If you misspell a property name, you will not get a compile error.

React uses JSX, which is syntactic sugar around function calls. A JSX element is transformed, by the compiler, into a call to React.createElement. The first argument is the name of the element or the element class, the second argument contains the props, and the other arguments are the children of the component. The following example demonstrates the transform:

<div></div>; 
React.createElement("div", null); 
 
<div prop="a"...