An Introduction to Typescript

Javascript isn’t a pet language anymore and sites have grown in new ways. Typescript will help organize your code and handle problems with clean solutions. Adding great error detection and stronger typing lets you move faster and more accurately through the development process.

In this introduction to using TypeScript, we’ll dicuss why it’s great, how to incorporate it into your project, and what you can do with it. Learn all about types, enums, classes, and how to expose errors and typos before the console can. Let’s go over the many successes of typescript, what a typescript project can look like, and how your project can be converted to typscript with a lot less effort than you would expect.

Transcript

1. An introduction to TypeScript John Pavek
3. About me • .Net developer at Blend Interactive • Web enthusiast • Code golfer • Father and husband • North Dakota native • Award Winning Pun Master • World of Warcraft player
4. A brief history of Javascript frameworks Transpilers/Languages • CoffeeScript - December 13, 2009 • Dart - October 10, 2011 • Kotlin - 2011 • Typescript - October 1, 2012 Front End frameworks • Knockout.js - July 5, 2010 • AngularJS - October 20, 2010 • React - May 29, 2013 • Angular - September 14, 2016
5. Why Typescript?
6. Why should I use TypeScript? • Increase clarity of your codebase ◦ Catch errors before runtime ◦ Help future you and your teammates • Excellent tooling ◦ Smarter intellisense ◦ Null and type checks while you code ◦ Customizable compiler options • New feature support ◦ Support for new ES5/6 features without (another) transpiler ◦ Types, which are opt-in ◦ Classes and interfaces ◦ Async and await ◦ Namespaces
7. Why should I use TypeScript? • Superset of JavaScript ◦ No unexpected features ◦ Follows ECMAScript specifications ◦ Allows plain JS “Some examples, like Dart, portend that JavaScript has fundamental flaws and to support these scenarios requires a “clean break” from JavaScript in both syntax and runtime. We disagree with this point of view. We believe that with committee participant focus, the standards runtime can be expanded and the syntactic features necessary to support JavaScript at scale can be built upon the existing JavaScript standard.”
8. What are Types?
9. What are the types in JavaScript? • Numbers • Strings • Booleans • Functions • Objects • Undefined • Symbols
10. Strongly Typed Arguments
11. What does that interaction look like? function OrderFood() { selection = ...arguments; } function OrderFood(mealName: string, mealParameters: object) : Food { selection.push(mealName); selection.push(mealParameters); } function OrderFood(mealName, mealParameters) { selection.push(mealName); selection.push(mealParameters); }
12. Let’s make something with Typescript!
13. Mileage Tracker • Project Goals ◦ Record mileage, date, amount of fuel, and the cost of the fuel ◦ Mobile friendly or PWA possibility ◦ Use a new technology I wasn’t familiar with ◦ No 3rd party libraries ◦ Code generated markup ◦ Use as many interesting features of TypeScript as possible ◦ Maintain support for ES5 ▪ near 100% on all major browsers
14. Show me the code. </>
15. Mileage Tracker
16. Mileage Tracker
17. Mileage Tracker
18. Mileage Tracker
19. Mileage Tracker
20. Common Pitfalls • Incorrect Configuration ◦ Missing library references ◦ Wrong paths ◦ Config too strict, or not strict enough. •
21. Lightning Round Questions 1. What is a `.d.ts` file for? 2. How do I handle a non-typescript 3rd party library? 3. How can I gradually add types to my project? 4. Is typescript for every project? 5. Can typescript do more than C#? (or other typed languages?) 6. What are Union Types? 7. What are Intersection Types? 8. What are Tuples?
22. Questions? https://github.com/Nhawdge/ts-talk-2019