1. Microsoft Virtual Academy

2. 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.

3. 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.

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

5. Introduction
James Churchill

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

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

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

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

15. Wrap Up
James Churchill

16. Resources Resources and Demo Code Official TypeScript Website
Official TypeScript Website
Treehouse JavaScript Courses and Workshops
Introducing ES
Defining Variables with let and const
Introducing Arrow Function Syntax
Introducing Template Literals

17. 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
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 
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.