Microsoft Virtual Academy

Exploring and Migrating to TypeScript 11/19/2018 9:12 PM Exploring and Migrating to TypeScript James Churchill ## Welcome * Hi there! My name is James * In this module, we'll explore the TypeScript language and learn how to migrate existing JavaScript to TypeScri pt using VS 2017 ### Setting Expectations * I'm going to assume in this module that you have a basic understanding of JavaScript and some experience  with using Visual Studio © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

James Churchill @SmashDev Teacher at Treehouse (teamtreehouse.com) 11/19/2018 9:12 PM James Churchill Teacher at Treehouse (teamtreehouse.com) 16 years of professional development experience working with a wide variety of client and server technologies Regional speaker and trainer for organizations throughout Oregon, Washington, Idaho, Utah, and Tennessee @SmashDev © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda 1 Introduction 2 Demo: VS 2017 JavaScript Editor 3 Demo: Introducing TypeScript 4 Demo: Migrating to TypeScript 5 Wrap Up

Introduction James Churchill

11/19/2018 9:12 PM Current Situation Code base that has organically grown over months or years Relatively clean but the team is afraid to make anything other than a minor change * Application with a code base that has organically grown over months or years * Code is relatively clean but the team is afraid to make anything than a minor change © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

If you're not careful, JavaScript can become a write-only language. 11/19/2018 9:12 PM If you're not careful, JavaScript can become a write-only language. * If you're not careful JavaScript can become a "write-only" language  * Especially if you don't have good unit test code coverage or tooling support © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What Do We Need? Better Tooling Language Features 11/19/2018 9:12 PM What Do We Need? Better Tooling Prevent simple mistakes Improved code discoverability and navigation Support for refactoring Language Features Ability to leverage newer JavaScript features * Better tooling support to prevent simple mistakes * Improved code discoverability and navigation * Support ability to refactor * Leverage newer JS features © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Possible Solutions Testing Tooling Static Typing 11/19/2018 9:12 PM Possible Solutions What are some things that we could consider? Testing Unit testing and integration testing can help improve code quality and provide a safety net for refactoring Tooling Tools like Babel can be added to your development workflow so you can start using newer JavaScript features today Static Typing Adding static types to your code improves your overall development experience * Testing * Tooling * Static Typing © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11/19/2018 9:12 PM What is TypeScript? TypeScript can be described as the sum of three things. * Superset of JavaScript * Optional static typing * Features from the future Superset of JavaScript TypeScript starts from the same  syntax and semantics that millions of  JavaScript developers know today. Optional Static Typing Types enable JavaScript developers to  use highly-productive dev tools and  practices like static checking and code  refactoring when developing JavaScript  applications. Features from the Future TypeScript offers support for the latest  and evolving JavaScript features,  including those from ECMAScript 2015  and future proposals. © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Incremental Migration 11/19/2018 9:12 PM Incremental Migration Not an "all or nothing" proposition Migrate as you want to or have time * Not an "all or nothing" proposition * Migrate as you want to or have time © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo: Visual Studio 2017 JavaScript Editor Let’s take a look at the new JavaScript editor in Visual Studio 2017.

Demo: Introducing TypeScript Let’s take a look at the TypeScript language.

Demo: Migrating to TypeScript Let’s incrementally migrate a simple JavaScript web app to use TypeScript.

Wrap Up James Churchill

Resources Resources and Demo Code Official TypeScript Website https://github.com/treehouse/vs2017-launch-event-typescript Official TypeScript Website https://www.typescriptlang.org/ Treehouse JavaScript Courses and Workshops Introducing ES2015 https://teamtreehouse.com/library/introducing-es2015 Defining Variables with let and const https://teamtreehouse.com/library/defining-variables-with-let-and-const Introducing Arrow Function Syntax https://teamtreehouse.com/library/introducing-arrow-function-syntax Introducing Template Literals https://teamtreehouse.com/library/introducing-template-literals

Treehouse 7-Day Free Trial 11/19/2018 9:12 PM Treehouse 7-Day Free Trial Get full access to our library for 7-days! Start learning today at https://teamtreehouse.com Get full access to our library for 7- days! You can check out any of the above JavaScript courses and workshops or our great React and Node rela ted content. Start learning today at https://teamtreehouse.com © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.